var app = angular.module('plunker', ['ui.router']);
app.run(['$rootScope', '$transitions', '$state', '$trace', function($rootScope, $transitions, $state, $trace){
$trace.enable('TRANSITION');
// https://ui-router.github.io/ng1/docs/latest/classes/transition.transition-1.html
$transitions.onError({}, function(transition) {
if(transition.to().name === 'auth' && transition.error().detail === 'AUTH_REQUIRED') {
$rootScope.message = 'You need to login in order to view that page!';
$state.go('home');
}
});
}]);
app.config(function($stateProvider, $urlRouterProvider){
var states = [
{
name: 'home',
url: '/',
template: '<h1>This is home</h1>'
},
{
name: 'about',
url: '/about',
template: '<h1>This is about</h1>'
},
{
name: 'params',
url: '/params/{id}',
template: '<h1>Param value: {{ paramId }}</h1>',
controller: function($scope, $stateParams) {
$scope.paramId = $stateParams.id;
}
},
{
name: 'auth',
url: '/auth',
template: '<h1>Success</h1>',
resolve: {
auththenticate: ['$q', function($q) {
if(true) { // user is not logged in
return $q.reject("AUTH_REQUIRED");
}
}]
}
}
];
states.forEach((state) => $stateProvider.state(state));
$urlRouterProvider.otherwise('/');
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Routing: angular-route</title>
<!--<script>document.write('<base href="' + document.location + '" />');</script>-->
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.10/js/uikit-icons.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="//unpkg.com/@uirouter/angularjs@1.0.19/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body class="uk-container">
<div class="uk-child-width-expand@s uk-text-center" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<div class="uk-width-1-1@s">
<ul class="uk-nav uk-nav-default">
<li class="uk-active">
<a ui-sref="home">Menu</a>
</li>
<li>
<a ui-sref="home" ui-sref-active="active">Home</a>
</li>
<li>
<a ui-sref="about" ui-sref-active="active">About</a>
</li>
<li>
<a ui-sref="params({id: 1})" ui-sref-active="active">Params</a>
</li>
<li>
<a ui-sref="auth" ui-sref-active="active">You shall not pass!</a>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
{{ message }}
<ui-view></ui-view>
</div>
</div>
</div>
<div class="uk-margin-top">
<div uk-sticky="bottom: true">
<p>AngularJS: v1.7.2</p>
<p>UI-Router: v1.0.19</p>
</div>
</div>
</body>
</html>
/* Put your css in here */
.active {
color: red;
font-weight: bold;
}