Я прохожу путь через точку сайта.Я застрял на последнем примере в главе 4. В этом приложении встроенный угловой модуль ngRoute заменен более мощным модулем Angular UI Router.Я не могу заставить его работать, и мне интересно, что я сделал не так.Ниже приведен код страницы индекса, а также view1.html и view2.html.Спасибо за помощь.
<!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>