2

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

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

直到导师测试应用程序时，我有 52 分钟的时间我做得很好。此时在应用程序中，我们正在尝试加载视图。当我尝试加载我的应用程序时，我的窗口中什么也没看到。我打开 Chrome 开发工具 > 网络，看到 的状态View1.html，即应该加载的视图，是Load Cancelled. 我还注意到 Angular 试图通过该OPTIONS方法调用它。这是一个屏幕截图：

在此处输入图像描述

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

AngularJS 对跨域资源执行 OPTIONS HTTP 请求

与我的问题的相似之处在于 Angular 使用 OPTIONS 来检索数据。不同之处在于，在这种情况下，Angular 正在检索跨域资源。所以这是有道理的，但对我来说不是。我想做的只是加载一个位于我系统上的视图。AngularApp这是位于我的 Ubuntu 12.10 桌面上的文件夹的目录结构：

.
├── 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>
4

2 回答 2

1

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

评论后编辑

我为 yeoman 担保，因为我在我的所有项目中都使用了它——因为 angularJS 团队中的一些开发人员正在积极开发 yeoman 生成器，它有很多接受度，并且必须遵循 angular 的所有标准实践。但应该注意的是，yeoman 不仅仅是作为本地 http 服务器。它控制脚手架、测试（就像在测试驱动的开发中，而不仅仅是查看本地服务器中的文件）和构建应用程序（缩小和连接、处理依赖关系等等......）

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

于 2013-05-09T14:46:47.343 回答
0

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

cd /home/max/Desktop/AngularApp/
python -m SimpleHTTPServer
于 2013-05-09T14:15:37.633 回答