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

标签 angularjs google-chrome angular-routing

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

不幸的是没有发生任何事情 - 只是选项卡名称上的忙碌标志正在起作用。
为什么没有加载我的应用程序?

我正在使用以下代码:

索引.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>

应用程序.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) {

}

应用程序.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-file-access
  • 运行没有此限制的 Firefox(如@GeekBoy 提到的)
  • 最佳答案

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

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

    关于AngularJS 编写一个没有服务器的应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24146934/

    相关文章:

    html - 简单的 AngularJS 脚本在 Chrome 中工作但在 IE11 中失败

    javascript - Ionic Accordion 中断的切换功能。不展开第二个 Accordion 。(传递的数据太多?)

    html - 水平对齐 3 个 div,没有边距,仅在 chrome 中存在错误

    css - Base64 字符串仅适用于 Chrome

    javascript - 无法从服务订阅数据到组件

    angularjs - 从指令中更改属性

    javascript - 根据 AngularJS 中的一系列输入更新值

    html - 为什么 transform with transition 会导致整个页面重绘?

    angular - 在 Angular 中保存/恢复路由器状态

    angular - 在 routerLink 中设置 url 字符串