AngularJS 编写一个没有服务器的应用程序答案

【问题标题】：AngularJS writing an app with no serverAngularJS 编写一个没有服务器的应用程序
【发布时间】：2014-06-10 17:05:14
【问题描述】：

我正在尝试编写一个 AngularJS 客户端专用应用程序。
我想我可以通过在地址栏中输入来从 chrome 加载它： file:///C:/path/to/project//index.html 我还尝试使用标志 --allow-file-access-from-files 调用 chrome

很遗憾，什么也没发生 - 只是标签名称上的忙碌标志正在工作。
为什么没有加载我的应用程序？

我正在使用以下代码：

index.html:

<!doctype html>
<html ng-app="app">
<head>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>
    <script src="app.js"></script>
    <title></title>
</head>
<body style="background-color: white;">
<h1>Index</h1>
<a id="link" href="/login">Go to login</a>
<ng-view></ng-view>
</body>
</html>

app.js：

angular.module('app', ['ngRoute']).
   config(function($routeProvider) {
        $routeProvider.
            when('/', {controller: HomeCtrl, templateUrl: 'app.html'}).
            when('/login', {controller: LoginCtrl, templateUrl: 'login.html', resolve: function() {}}).
            otherwise({redirectTo:'/'});
    });

function HomeCtrl($scope) {
    $scope.numbers = [1,2,3,4,5];
}

function LoginCtrl($scope) {

}

app.html:

<div ng-controller="HomeCtrl">
    <ul ng-repeat="number in numbers" >
        <li>{{number}}</li>
    </ul>
</div>

编辑：

2 种可能的解决方案：

关闭所有 chrome 实例并从命令行运行：
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --allow -文件访问
运行没有此限制的 Firefox（如@GeekBoy 提到的）

【问题讨论】：

控制台说什么？还是网络标签？有什么错误吗？
Chrome 选项卡刚刚冻结，无法打开控制台。

标签： angularjs google-chrome angular-routing

【解决方案1】：

据我所知，谷歌浏览器不允许从文件系统运行 javascript。但我做了一个快速的谷歌搜索并找到了这个。可能有用 Link

另一方面，您可以使用 Firefox。据我所知，Firefox 没有这样的限制

【讨论】：

【解决方案2】：

尝试更改以下行：

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>

到

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"></script>

我认为由于您使用基于文件的方式来获取 index.html，因此假设 // 也指向本地系统资源。通过明确指出http://，它会看实际位置。

【讨论】：

【解决方案3】：

我知道这是一个老问题，但对于任何可能仍然感兴趣的人，这里有一个小项目，演示如何编写 angularjs 客户端应用程序。它是一个完整的 AngularJS 1.63 单页应用程序，具有不需要 Web 服务器的路由：https://github.com/jlinoff/aspa-nows。

要使其正常工作有两个关键挑战：由于新引入的默认哈希前缀!（有关详细信息，请参阅aa077e8）而正确引用页面href，并将模板HTML代码嵌入到index.html 为 ng-template 脚本以避免 CORS 错误。一旦进行了这些修复，它就会按预期工作。

项目 README.md 详细解释了需要完成的工作，并提供了完整的源代码。

【讨论】：