【发布时间】：2013-05-04 00:52:33
【问题描述】：
我一直在关注 AngularJS Fundamentals In 60-ish Minutes 教程
http://www.youtube.com/watch?v=i9MHigUZKEM
在导师测试应用程序的 52 分钟之前，我一直做得很好。此时在应用程序中，我们正在尝试加载视图。当我尝试加载我的应用程序时，我的窗口中什么也没看到。我打开 Chrome 开发工具 > 网络，看到 View1.html 的状态是 Load Cancelled，这是应该加载的视图。我还注意到 Angular 试图通过 OPTIONS 方法调用它。截图如下：
在尝试解决这个问题时，我遇到了这个 SO 问题
AngularJS performs an OPTIONS HTTP request for a cross-origin resource
与我的问题的相似之处在于 Angular 使用 OPTIONS 来检索数据。不同之处在于，在这种情况下，Angular 正在检索跨域资源。所以这是有道理的，但对我来说不是。我所要做的就是加载一个位于我系统上的视图。这是位于我的 Ubuntu 12.10 桌面上的 AngularApp 文件夹的目录结构：
.
├── app.html
├── Partials
│ ├── View1.html
│ └── View2.html
└── scripts
└── angular.js
我用来查看我的应用程序的 URL 是
file:///home/max/Desktop/AngularApp/app.html
我做错了什么？
这里是app.html 代码：
<!DOCTYPE HTML>
<html data-ng-app="demoApp">
<head>
<title>App</title>
</head>
<body>
<div>
<!-- Placeholder for views -->
<div data-ng-view=""></div>
</div>
<script src="scripts/angular.js"></script>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/view1',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/view1' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Hasbro Meclan', city: 'New South Rolly' },
{ name: 'Haley Meclan', city: 'New South Rolly' },
{ name: 'Sammy Watson', city: 'New South Rolly' },
{ name: 'Sammy Warboy', city: 'Onice City' }
];
$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 | orderBy:city">
</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>
【问题讨论】：
标签： http model-view-controller angularjs angularjs-routing