gpt4 book ai didi

http - Angular.JS 尝试使用 OPTIONS HTTP 方法加载 View 失败

转载 作者:可可西里 更新时间:2023-11-01 16:38:25 25 4
gpt4 key购买 nike

我一直在关注 AngularJS 基础知识 60 多分钟教程

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

在导师测试应用程序之前,我的表现一直很好,直到我用了 52 分钟。此时在应用程序中,我们正在尝试加载 View 。当我尝试加载我的应用程序时,我在窗口中什么也看不到。我打开 Chrome 开发者工具 > 网络,看到 View1.html 的状态是 Load Cancelled,这是应该加载的 View 。我还注意到 Angular 试图通过 OPTIONS 方法调用它。这是一个屏幕截图:

enter image description here

在尝试解决这个问题时,我遇到了这个 SO 问题

AngularJS performs an OPTIONS HTTP request for a cross-origin resource

与我的问题相似的是 Angular 使用 OPTIONS 来检索数据。不同之处在于,在那种情况下,Angular 正在检索跨源资源。所以这是有道理的,但对我来说不是。我想做的就是加载一个位于我系统上的 View 。这是位于我的 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>

最佳答案

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

评论后编辑

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

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

关于http - Angular.JS 尝试使用 OPTIONS HTTP 方法加载 View 失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16463597/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com