我一直在从Dan Wahlin的电子书中学习AngularJS。作者试图从第53页解释模块,路由和工厂。然后,我在index.html中编写了代码:
<div class="container" data-ng-app="demoApp">
<div>
<h3>Adding Module Configuration and Routing</h3>
<!-- ng-view handles loading partials into it based
upon routes -->
<div data-ng-view=""></div>
</div>
</div>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View1.html'
})
//Define a route that has a route parameter in it (:customerID)
.when('/view2',
{
controller: 'SimpleController',
templateUrl: urlBase + 'View2.html'
})
.otherwise({ redirectTo: '/View1' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Dave Jones', city: 'Phoenix' },
{ name: 'Jamie Riley', city: 'Atlanta' },
{ name: 'Heedy Wahlin', city: 'Chandler' },
{ name: 'Thomas Winter', city: 'Seattle' }
];
});
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
}
</script>
然后我创建了两个html页面 - View1.html
和View2.html
,在View1.html中,我写道:
<div class="container">
<h3>View 1</h3>
Name<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name">
{{ cust.name }} - {{ cust.city }}
</li>
</ul>
<br />Customer Name<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
<br />Customer City<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br />
<a href="#/view2">View 2</a>
</div>
当我浏览http://localhost/angular/index.html#/view1
时,我没有看到任何意味着没有输出的东西。我实际上不明白我做错了什么。
答案 0 :(得分:1)
这里最大的问题是你不包括routing module,这是自Angular 1.2 +以来所必需的
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript">
var demoApp = angular.module('demoApp', ['ngRoute']);
//Snip...
</script>
正如goutham in the comments所述,您还需要定义urlBase
,而您似乎无处可行。
因为JavaScript确实为字符串连接键入了强制,所以最终会得到“未定义”这个词。附加到templateUrl
。
console.log(undefined + "view1.html"); // 'undefinedview1.html'