Yasmina Lembachar Yasmina Lembachar - 4 months ago 94
AngularJS Question

Ui-sref not generating clickable links/not working

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

Answer

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.

Comments