I used ng-route for this before, and it worked fine, but with the UI Router interface the links are no longer clickable or, at least in most cases, they are not. When they are, which is very random, they do not display the html templates that I use.
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 follow the instructions in the SitePoint book on AngularJS, so I'm not quite sure what I'm doing wrong or what I missed.
http://plnkr.co/edit/amh3nZmyB7lC2IQi3DIn