angular.module('myApp', ['ngRoute'])
.config(function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController'
})
.when('/detail', {
templateUrl: 'views/detail.html',
controller: 'DetailController'
})
.otherwise('/home');
});
angular.module('myApp', ['ngRoute'])
.controller('DetailCtrl', function($scope, $routeParams) {
$scope.record = $http.get('api/' + $routeParams.recordId);
});
.config(function($routeProvider) {
$routeProvider.when('/detail/:recordId', {
templateUrl: 'views/detail.html',
controller: 'DetailCtrl'
});
});
angular.module('myApp', ['ngRoute'])
.controller('DetailCtrl', function($scope, record) {
$scope.record = record;
})
.config(function($routeProvider) {
$routeProvider.when('/detail/:recordId', {
templateUrl: 'views/detail.html',
controller: 'DetailCtrl',
resolve: {
record: function($route, $http) {
var recId = $route.current.params.recordId;
return $http.get('api/' + recId);
}
}
});
});
<!DOCTYPE html>
<html ng-app>
<head></head>
<body>
<header>Some static header perhaps</header>
<div ng-view>
<!-- your route here -->
</div>
<footer>Obligatory privacy policy and copyright.</footer>
</body>
</html>
$stateProvider.state('feed', { url: '/feed' resolve: { 'feedData': function() { return 'foo'; } } }) .state('feed.detail', { url: '/feed/:itemId' resolve: { 'singleFeedData': function(feedData, $state) {
// can access the current state with
$state.current... // $state object. return feedData; // the inherited resolve. } } });
angular.module('main', ['main.contacts', 'ui.router']) .config(function($stateProvider) { $stateProvider.state('main', {
...
}) }); angular.module('main.contacts', ['ui.router']) .config(function($stateProvider) { $stateProvider.state('main.contacts', { ... }) });
$scope.$on('$stateChangeError', function(event, toState, ... , error) {
// catch errors from resolves in here! });
$stateProvider.state("contacts", { templateUrl: 'contacts.tpl.html', resolve: { data: function() { return 'My Contacts'; },
onEnter: function(data){ if(data){ ... do something ... } }, onExit: function(title){ if(data){ ... do something ... } } })
(with Authentication)
$stateProvider.state('admin', {
url: '/admin',
data: {
pageTitle: 'Admin Console',
requiresAuth: true
}
...
})
$scope.$on('$stateChangeStart', function(event, toState, toParams... )
// check authentication in your "auth service".
if (toState.data.requiresAuth && !AuthService.isAuthenticated()) {
$state.transitionTo('login');
event.preventDefault(); // stop state transition
}
});
<header ui-view="header"></header>
<nav ui-view="switcher"></nav>
<div ui-view="menu" autoscroll="false"></div>
$stateProvider.state('home', {
url: '/home',
views: {
'main': {
templateUrl: 'home/home.tpl.html'
}
}
})
.state('home.confirm', {
url: '/confirm',
views: {
// target and override the named view "main" in the parent state
'main@': {
templateUrl: 'home/confirm.tpl.html'
}
}
});
// cannot activate this state directly.
.state('parent', { url: '/home', abstract: true })
// ALSO url '/home', overriding its parent's activation
.state('parent.list', { url: '', abstract: true })
because everyone loves animations.
<a ng-class="{ active: $state.includes('app.dashboard')}" ui-sref="app.dashboard">Dashboard</a>
url: '/{userId:[0-9]{1,4}}',