将$ routeProvider与$ stateProvider一起使用

时间:2013-11-10 10:16:45

标签: angularjs angular-ui-router

一开始我只是使用$ routeProvider如下,它给了我想要的东西。

angular.module('angularProject', ['angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
      })
      .otherwise({redirectTo: '/home'});
  }]);

但是当我也想使用$ stateProvider时,它不会给我错误但也不允许我改变状态..

var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
  myapp.config(['$routeProvider', '$stateProvider',function($routeProvider,$stateProvider) {
    $routeProvider
      .when('/home', {
        title: 'Home',
        templateUrl: 'views/home.html',
        controller: 'homeCtrl'
      })
      .otherwise('/home');
    $stateProvider
        // .state('index', {
            // url: "",
            // views: {
                // "viewA": {
                    // template: "index.viewA"
                // },
                // "viewB": {
                    // template: "index.viewB"
                // }
            // }
        // })
        .state('route1', {
            url: "/route1",
            views: {
                "viewA": {
                    template: "route1.viewA"
                },
                "viewB": {
                    template: "route1.viewB"
                }
            }
        })
        .state('route2', {
            url: "/route2",
            views: {
                "viewA": {
                    template: "route2.viewA"
                },
                "viewB": {
                    template: "route2.viewB"
                }
            }
        })
     // .otherwise({redirectTo: '/home'});
  }]);

有关如何将$ stateProvider与$ routeProvider一起使用的任何帮助都将受到赞赏..

1 个答案:

答案 0 :(得分:10)

我认为这是不可能的,我不认为ui.router是为了与ngRoute一起使用而构建的。
根据{{​​3}},您应该使用ui-router自己的$routeProvider实现,称为ui-router docs