I've been diving into the sitepoint ANGULARJS: NOVICE TO NINJA book and I've hit a roadblock with the final example in chapter 4. In this application, the default angular ngRoute module is swapped out for the more robust Angular UI Router module. Despite my best efforts, I can't seem to get it functioning properly and I'm at a loss as to where I've gone wrong. Below you'll find the code for the index page, view1.html, and view2.html. Any assistance would be greatly appreciated.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title ng-bind="title"></title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
</head>
<body>
<h3>Chapter 4 - App 15a - {{title}}</h3>
<ul class="menu">
<li><a ui-sref="view1">view1</a></li>
</ul>
<div ng-view></div>
<script>
'use strict';
angular.module('myApp', [
'myApp.controllers',
'ngRoute',
//This is the dependency on ui.router module
'ui.router'
]
);
// .run() gets called when all the modules are loaded
angular.module('myApp').run(
function($rootScope){
$rootScope.title = 'Angular Routing - The Angular UI Router';
}
);
// $stateProvider and $urlRouterProvider are from ui.router module
angular.module('myApp').config(
function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('view1', {
url: '/view1',
controller:'Controller1',
templateUrl:'/partials/view1.html'
})
.state('view2', {
url: '/view2/:firstname/:lastname',
controller:'Controller2',
resolve:{
names: function(){
return ['Misko','Vojta','Brad'];
}
},
templateUrl: '/partials/view2.html'
}
);
// when no route match found redirect to /view1
$urlRouterProvider.otherwise('/view1');
$locationProvider.html5Mode(true);
});
angular.module('myApp.controllers', [])
.controller('Controller1', function($scope, $location, $state) {
$scope.loadView2 = function() {
// the following activates state view2
$state.go('view2', {
firstname: $scope.firstname,
lastname: $scope.lastname
}
);
}
}
);
angular.module('myApp.controllers')
.controller('Controller2', function($scope, $stateParams, names){
$scope.firstname=$stateParams.firstname;
$scope.lastname=$stateParams.lastname;
$scope.names=names;
});
</script>
</body>
</html>
<!-- Contents of view1.html -->
<p>
First name: <input type="text" ng-model="firstname" style="border:1px solid black;" /> <br/>
<br/>
Last name: <input type="text" ng-model="lastname" style="border:1px solid black;" /> <br/>
<br/>
<button ng-click="loadView2()">Load View2</button>
</p>
<!-- Contents of view2.html -->
<p>
From View2.
<ul>
<li>First name: {{firstname}}</li>
<li>Last name: {{lastname}}</li>
</ul>
Our additional users are:
<ul>
<li ng-repeat="name in names">
{{name}}
</li>
</ul>
</p>