Menu
I used ng-route for this before and it worked fine, but with UI Router, the links are not clickable anymore, or at least most of the time they aren't. When they are, which is very random, they don't display the html templates I'm using.
HTML:
<head>
<title>Tutorial</title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body>
<ng-view></ng-view>
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
<li><a ui-sref="view2">view2</a></li>
</ul>
.js
angular.module('myApp', [
'myApp.controllers',
'ui.router'
]);
angular.module('myApp').config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('view1',{
url: '/view1',
controller:'Controller1',
templateUrl:'/view1.html'
}).state('view2', {
url: '/view2/:firstname/:lastname',
controller: 'Controller2',
resolve: {
names: function() {
return ['Misko', 'Vojta', 'Brad'];
}
},
templateUrl: '/view2.html'
});
$urlRouterProvider.otherwise('/view1');
});
angular.module('myApp.controllers', []).controller('Controller1', function($scope, $location, $state) {
$scope.loadView2=function() {
$state.go('view2', {
firstname: $scope.firstname,
lastname: $scope.lastname
});
};
}).controller('Controller2', function($scope, $stateParams, names) {
$scope.firstname = $stateParams.firstname;
$scope.lastname = $stateParams.lastname;
$scope.names = names;
});
I'm following the instructions in the SitePoint ebook on AngularJS, so I'm not really sure what I'm doing wrong or what I missed.
http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn
887
I don't see a ui-view anywhere in your markup, so your states' views are most likely not being rendered and injected.
You should not need ng-view. A single ui-view should exist in your main HTML file. Your top level states will be rendered and injected there. States can have substates, and each template of a state which has a substate should have a ui-view of its own where its rendered substates will be injected.
Look through ui-router's readme for the basics of getting it working. Also, they have a good demo app, the source of which really helped me understand what this state routing engine is about and how to use it.
143
Helpful info, hopefully...
Although the answers above are correct (missing ui-view, referencing ui.router, etc.), I have run into situations where other problems with the load of a view will cause links to not be generated. For example, this morning I forgot to reference the module angular-cache and was running into a problem with CacheFactory not loading (completely unrelated to ui.router). Until the references were resolved, ui.router was dead in the water.
25
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
