<html>
<head>
<!--<script src="//unpkg.com/show-current-browser-url"></script>-->
<script src="//unpkg.com/angular@1.5/angular.js"></script>
<script src="//unpkg.com/angular-ui-router@1.0.0-beta.3/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="routerApp">
<a ui-sref="home">Home</a>
<a ui-sref="about({ meId:1})">About</a>
<ui-view></ui-view>
</body>
</html>
angular
.module('routerApp', ['ui.router'])
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('home',{
url : '/home',
templateUrl : 'home.html',
controller: function($state,$stateParams){
var vm = this;
vm.go = function(){
$state.go('about', {someParam : 'about page loading'});
};
console.log('about param:', $stateParams);
}
})
.state('about',{
url : '/about/{meId}',
templateUrl : 'about.html',
controller: function($stateParams){
if($stateParams.meId == 1) {
var vm = this;
vm.meId = {
id: $stateParams.meId,
naam: 'audrey',
nickname: 'audi'
}
}
}
});
$urlRouterProvider.otherwise('/home');
}])
The angular-ui-router "Hello World" app
<h1>Home</h1>
<h1>About me</h1>
{{meId.id}}
{{meId.naam}}
{{meId.nickname}}