我想开始使用Angular的ui-router而不是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")
规则。我handler
是否正确指定了s,就像它们是模板URL一样?
如果我将.when()
s注释掉,除了,其他任何方法都不会起作用"/customer/:username"
。是否必须为每条路线都定义一个状态?如果是这样,则同时拥有$urlRouterProvider
和有$stateProvider
什么意义?问的不同,每个人应该做什么?
这是我之前做的一个基本示例,在ui-router配置中使用名称分隔的控制器,并使用一个嵌套路由(第二个选项卡):http : //plnkr.co/edit/2DuSin?p=preview
template:
可以更改为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>',
controller: 'SecondCtrl',
data: {}
});
});
控制器:
app.controller('FirstCtrl', ['$scope', '$stateParams', '$state', function($scope,$stateParams,$state){
}]);
app.controller('SecondCtrl', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state){
$scope.things = ["A", "Set", "Of", "Things"];
}]);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句