Angular需要web服务器来运行吗?那么，如果我给浏览器一个本地文件的url, Angular会工作吗?

我的意思是我读到过Angular允许使用模拟数据，这样就不需要连接RESTFul api了。我可以想到这样一个用例:用户体验设计师只需要查看外观，而不需要连接到web服务器。我还能想到其他的用例。

如果我给浏览器一个本地文件的url，比如C:tempindex.html, js文件要么在C:temp，要么在C:temp js。

所以实际上，我试过了，这是一个应用程序文件(我知道它应该分开)

<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-controller="myNoteCtrl">
<h2>My Note</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script >
// was in separate file but pasted in for demo purposes
var app = angular.module("myNoteApp", []);
</script>
<script >
// was in separate file but pasted in for demo purposes
app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left  = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save  = function() {alert("Note Saved:" + $scope.message);};
});
</script>
</body>
</html>

结果是，它在Chrome和Firefox中工作没有问题，IE最初阻止内容，但可以允许它运行。

你不能只通过本地机器上的文件路径访问angular应用程序，因为你会得到跨源域错误。

解决方案是安装http-server(需要安装node.js)。这允许你在你的机器上创建一个http-server，并允许你访问Angular应用程序，就好像它是在线托管的，用于开发和测试。

是的，你可以运行本地文件，但如果你需要从服务器获取数据，浏览器应该阻止它，这取决于你运行的浏览器的版本和类型。

下面是官方的Angularjs教程在PhoneCat Tutorial App: Running the Development Web Server

虽然Angular应用程序是纯客户端代码，而且可以直接从文件系统在web浏览器中打开它们，最好从HTTP web服务器提供它们。特别是，对于出于安全原因，大多数现代浏览器不允许JavaScript如果页面是直接从文件加载的，则发出服务器请求系统。

如果你只需要在div中使用像{{mymessage}}这样的表达式来显示数据，你不需要web服务器。

但是如果你需要使用ngview加载template的html文件，你需要一个web服务器-否则它会抱怨以下错误。

请求无法加载文件。跨域请求只支持以下协议方案:http、data、chrome、chrome-extension、https、chrome-extension-resource。

如果需要加载模板来学习angularjs路由，我找到了一个易于使用的web server exe - HFS。目前满足了我学习AngularJS的要求。

引用

HFS介绍

所以，我这样做的方式是创建一个临时服务，只是加载它，而不是从url/文件。

的例子:

//tempUser.js
angular.module("app").constant("tempUser", {
    firstname : "Joe",
    lastname : "Smith"
});
//userService.js
angular.module("app").factory("userService", function ($q, tempUser) {
    return {
        load : load
    };
    function load(id) {
        //TODO: finish impl
        return $q.when(tempUser);
    }
});

这样控制器仍然可以像从web服务加载一样工作。

angular.module("app").controller("UserDetailCtrl", function (userService) {
    userService.load().then(function (user) {
        $scope.user = user;
    });
});

就像其他人说的那样，最好正确地作为http提供服务。但是，还有其他的解决方法。

一些编辑器，如括号(在文件中单击右上角的闪电)，可以正确地将代码提供给浏览器。对于其他人来说，可能有插件可以做到这一点。

更新:我下面的建议在AngularJS 1中工作得很好，但仅供参考对于Angular 2来说是不够的。参见在Chrome中禁用同源策略

此外，如果你在Chrome上，你可以用标志运行它，这意味着你在路径的。exe部分后面添加一些东西。如果你愿意，可以选择。具体来说，您需要:

--allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt

这使得它在尝试访问不同来源的文件时不会抛出错误。曾经有一个插件，但我不能让它工作。注意，出于安全原因，这不是默认设置，所以也许不要把它放在你冲浪时经常使用的主快捷方式上……-使用风险自负

相关内容

最新更新

热门标签：