Question

我一直关注 AngularJS Fundamentals 60-ish Minutes 教程

http://www.youtube.com/watch?v=i9MHigUZKEM

我做得很好，直到我在导师测试应用程序时得到52分钟。在应用程序的这一点上，我们正在尝试加载视图。当我试图加载我的应用程序时，我的窗口中没有看到任何内容。我打开了Chrome Dev Tools＆gt;网络并看到View1.html的状态是Load Cancelled，这是应该加载的视图。我还注意到Angular试图通过OPTIONS方法调用它。这是一个截图：

enter image description here

在我试图解决这个问题时，我遇到了这个问题

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

我用来查看我的应用的网址是

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>

Answer 1

这不是angularJS问题，而是CORS问题 - 从您的计算机加载资源被认为是“跨源的”，因为没有服务器（即，他的浏览器的来源可能是“空”）。正如marcoseu所说，使用服务器是可行的方法 - python和node.js有非常简单的实现，但我建议你尝试自己（http://www.yeoman.io）。它是用于构建js webapps的集成工作流解决方案，并且特别适用于angularJS。（我认为自耕农网站的主页以angularJS为例）

在评论后修改

我保证为我的所有项目使用它 - 因为angularJS团队的一些开发人员正在积极研究自然生成器，它有很多人接受，并且必须遵循所有角度的标准做法。但应该指出的是，yeoman不仅仅是作为本地http服务器。它控制脚手架，测试（如在测试驱动的开发中，不只是查看本地服务器中的文件），以及构建应用程序（缩小和连接，处理依赖关系等等）

它非常完整，因此可能相当复杂（特别是当您对构建任务有特定要求时）。但是如果你打算部署一个或几个angularJS应用程序，它可以提供巨大的帮助！

Answer 2

我经常遇到通过file：//运行AngularJS代码的奇怪问题。假设您有python，您可以尝试使用以下命令在应用程序的根目录下启动一个简单的Web服务器：

cd /home/max/Desktop/AngularApp/
python -m SimpleHTTPServer

Angular.JS尝试使用OPTIONS HTTP方法加载视图失败

2 个答案: