I want to start using Angular's ui-router instead of ngRoute. Originally, my app config looked like
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"
})
;
}
]);
I swapped out the libraries, and changed the config. I understand I could still use $routeProvider
, but that seems like a legacy workaround.
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"
})
;
}
]);
This gives me errors that seem to indicate $digest
is stuck in a loop. I suspect the .otherwise("/home")
rule. Am I specifying the handler
s correctly, as if they were template URLs?
If I comment-out the .when()
s, nothing works except "/customer/:username"
. Do I have to have a state defined for every route? If so, what is the point of having both $urlRouterProvider
and $stateProvider
? Asked differently, what is each supposed to do?
UI-Router is the defacto standard for routing in AngularJS. Influenced by the core angular router $route and the Ember Router, UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1. x).
ui-sref-active directive ui-sref-active is a directive working alongside ui-sref to add classes to an element based on the state of the ui-sref directive. This can be replaced with the Angular equivalent RouterLinkActive directive like so: HTML. Copy ...
$stateParams captures url-based params that $state considers applies to that state, even if its child state contains more params. $state. params seems to capture all url + non-url based params of the current state you are in. If you are in state parent.
Here is a basic example, i made a while ago, with name-spaced controllers in ui-router config, & one nested route (2nd tab): http://plnkr.co/edit/2DuSin?p=preview
template:
can be changed to templateUrl:
to point at HTML file.
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: {}
});
});
controllers:
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"];
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With