我想开始使用Angular的ui路由器而不是ngRoute.最初,我的应用配置看起来像
myApp.config(["$routeProvider",function($routeProvider) {
$routeProvider
.when("/search",{
templateUrl: "partials/customerSearch.html"
})
.when("/home",{
templateUrl: "partials/home.html"
})
.when("/login",{
templateUrl: "partials/login.html",controller: "LoginCtrl"
})
.otherwise({
redirectTo: "/home"
})
;
}
]);
我换了图书馆,改变了配置.我知道我仍然可以使用$routeProvider,但这似乎是一种遗留的解决方法.
myApp.config(["$urlRouterProvider","$stateProvider",function($urlRouterProvider,$stateProvider) {
$urlRouterProvider
.when("/search","partials/customerSearch.html")
.when("/home","partials/home.html")
.when("/login","partials/login.html")
.otherwise("/home")
;
$stateProvider
.state({
name: "customer",url: "/customer/:username",templateUrl: "partials/customer.html"
})
.state({
parent: "customer",name: "details",url: "/details",templateUrl: "partials/customerDetails.html"
})
;
}
]);
这给我错误,似乎表明$digest被困在一个循环中.我怀疑.otherwise(“/ home”)规则.我正确地指定了处理程序,就好像它们是模板URL一样吗？
如果我注释了.when(),除“/ customer /：username”之外没有任何作用.我必须为每条路线定义一个状态吗？如果是这样,那么两个$urlRouterProvider和$stateProvider有什么关系呢？当被问及不同的时候,每个人应该做什么？
这是一个基本的例子,我做了一段时间,在ui-router config和&一个嵌套路由(第二个选项卡)：
http://plnkr.co/edit/2DuSin?p=preview
模板：可以改为templateUrl：
指向HTML文件.
var app = angular.module('plunker',['ui.bootstrap','ui.bootstrap.tpls','ui.router']);
app.config(function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('state1',{
url: "/",template: 'Hello from the first Tab!',controller: 'FirstCtrl',data:{}
})
.state('state2',{
url: "/route2",template: 'Hello from the 2nd Tab!<br>' +
'<a ui-sref="state2.list">Show List</a><div ui-view></div>',controller: 'SecondCtrl',data: {}
})
.state('state2.list',{
url: '/list',template: '<h2>Nest list state</h2><ul><li ng-repeat="thing in things">{{thing}}</li></ul>',data: {}
});
});
控制器：
app.controller('FirstCtrl',['$scope','$stateParams','$state',function($scope,$stateParams,$state){
}]);
app.controller('SecondCtrl',$state){
$scope.things = ["A","Set","Of","Things"];
}]);
