var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.when('/admin', '/admin/dashboard')
.when('/user', '/user/dashboard')
.otherwise('/admin/dashboard');
$stateProvider
// .state('admin', {
// url: '/',
// abstract: true
// })
.state('admin', {
url: '/admin/dashboard',
resolve: {
test: function() {
console.log('called admin');
return;
}
},
views: {
'navigation': {
template: '<div>admin navigation. Go <a ui-sref="admin.link1">link1</a></div>'
},
'content': {
template: '<div>admin dashboard</div>'
}
}
})
.state('admin.link1', { //for some reason admin.link1 does not work but just link1 is OK
url: '/admin/link1',
resolve: {
test: function() {
console.log('admin.link1 called resolve');
return;
}
},
views: {
'navigation': {
template: '<div>admin navigation</div>'
},
'content': {
template: '<div>admin link1</div>'
}
}
})
.state('user', {
url: '/user/dashboard',
views: {
'navigation': {
template: '<div>user navigation</div>'
},
'content': {
template: '<div>user dashboard</div>'
}
}
});
});
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular.min.js" data-semver="1.2.19"></script>
<script data-require="angular-ui-router@0.2.10" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<script src="app.js"></script>
<style>
div {
border: 1px solid gray;
padding: 5px;
}
</style>
</head>
<body ng-app="plunker">
<div>
<a ui-sref="admin">Admin</a>
<a ui-sref="user">User</a>
</div>
<div ui-view="navigation"></div>
<div ui-view="content"></div>
</body>
</html>
/* Put your css in here */