我有一个小问题，我的AngularJS应用无法正常运行。 一切似乎都很好...但是当我打开项目页面时，它一片空白...
AngularJS在此页面上可以正常工作，因为我已经检查了简单的示例，该示例出现在页面上。
我尝试了很多解决方案：将id添加到html标记中，将['ngRoute']添加到模块中，但仍然无法正常工作...
这是代码：
test.html
<!DOCTYPE html>
<html ng-app="demoApp" id="demoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
</head>
<body>
<div>
<!-- placeholder for views -->
<div ng-view="demoApp">
<ng-view></ng-view>
</div>
</div>
</script>
<script>
var demoApp = angular.module("demoApp", ['ngRoute']);
demoApp.config(function($routeProvider) {
$routeProvider.when("#/view1", {
controller: "SiteController",
templateUrl: "view1.html"
});
$routeProvider.when("#/view2", {
controller: "SiteController",
templateUrl: "view2.html"
});
$routeProvider.otherwise({ redirectTo: "/view1.html" });
});
demoApp.controller("SiteController", function($scope) {
$scope.customers = [
{ name: 'Piotrek', city: 'Radom' },
{ name: 'Jan', city: 'Cracow' }
];
$scope.addCustomer = function() {
$scope.customers.push(
{
name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>
view1.html
<div class="container">
<h2>View 1</h2>
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 />
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>
view2.html
<div class="container">
<h2>View 2</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:city">
{{cust.name}} - {{cust.city}}
</li>
</ul>
</div>
有任何想法吗？
$routeProvider的配置对我来说似乎很可疑。
demoApp.config(function($routeProvider) {
$routeProvider.when("#/view1", {
controller: "SiteController",
templateUrl: "view1.html"
});
$routeProvider.when("#/view2", {
controller: "SiteController",
templateUrl: "view2.html"
});
$routeProvider.otherwise({ redirectTo: "/view1.html" });
});
我敢肯定，你需要从省略＃ when块和你应该参考的路径，而不是在一个模板otherwise 。
尝试：
demoApp.config(function($routeProvider) {
$routeProvider.when("/view1", {
controller: "SiteController",
templateUrl: "view1.html"
});
$routeProvider.when("/view2", {
controller: "SiteController",
templateUrl: "view2.html"
});
$routeProvider.otherwise({ redirectTo: "/view1" });
});