Question

我有一个较旧的应用程序（Angular 1.5.3），我想在我的一些页面中利用angular-ui-router和组件。

是否可以将旧的routeProvider与ui-router提供的stateProvider结合使用？

IE我希望转换几页以便在我有时间的时候使用组件，而剩下的则用完。

我很确定使用ng-view和ui-view我很难让它工作（可能因为你不应该这样做）。这是否意味着我必须一次将整个项目从routeProvider转换到stateProvider？

Answer 1

是否可以将旧的routeProvider与。一起使用 ui-router提供的stateProvider？

简短回答

否即可。结构相似但语法不同

答案很长

不，但是......您可以轻松地将ng-view转换为ui-view a.e.从$routeProvider到$stateProvider。

考虑示例ng-view：

$routeProvider  
  .when('/Book/Add', {
    template: '<div class="box" ng-class="classname">Add</div>',
    controller: function($scope) {$scope.classname="add"}
  })
  .when('/Book/Error', {
    templateUrl : 'error.html',
    controller: 'ErrorController'
  })
  .otherwise({redirectTo: '/Book/Error'});

考虑示例ui-view：

 $stateProvider
 .state('book', {
                 url: '/Book',
                 abstract: true,
                 templateUrl: 'views/Book.html'
                })
.state('book.add', {
                    url: '/inbox',                    
                    template: '<div class="box" ng-class="classname">Add</div>',
                    controller: function($scope) {$scope.classname="add"}                     
                })
.state('book.error', {
                    url: '/Error',                    
                    templateUrl : 'error.html',
                    controller: 'ErrorController'                   
                })

$urlRouterProvider.otherwise(function ($injector, $location) {
           return '/Book/Error';
          });

请记住，路由语法也会发生变化。

例如：

 if ($state.current.name === 'login') {
      $state.go('book.add', {});
 }

而是<a href="/Book/Add">Add</a>我们会写<a ui-sref="book.add">Add</a>

依旧......

如您所见，语法有点类似。我相信你会发现很多关于$stateProvider的力量的参考资料。例如https://stackoverflow.com/a/21024270/1631379

希望我回答你的问题

从ng-view转换到ui-view

1 个答案:

简短回答

答案很长