从 ng-view 过渡到 ui-view

Question

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

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

IE 我想在有时间的时候转换几个页面以在这里和那里使用组件，而保留其余部分。

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

Answer 1

Is it possible to use the old routeProvider in conjunction with the stateProvider that ui-router provides?

简答

否。结构相似但语法不同

长答案

不，但是...您可以轻松地将 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 的参考资料。例如

希望我回答了你的问题

从 ng-view 过渡到 ui-view

Transition from ng-view to ui-view

angularjs

angular-ui-router

ng-view

简答

长答案