在chrome中使用会话和本地存储时未加载Angular JS页面答案

【问题标题】：Angular JS Page not loading while using session and local storage in chrome在chrome中使用会话和本地存储时未加载Angular JS页面
【发布时间】：2016-03-01 14:34:49
【问题描述】：

我是 Angular js 的新手，并按照本教程 http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/ 创建简单的 SPA 页面。其中，当我在 About 页面中使用 Local 和 Session 存储概念时，除了 Chrome 之外，它在 Firefox、IE 中都能完美运行。我无法在 Chrome 中找到问题。所以请需要你的帮助。

index.html

<html ng-app="scotchApp">
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   <script src="./script.js" type="text/javascript"></script>
    </head>
    <body ng-controller="mainController">
    <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">Angular Routing Example</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#about"><i class="fa fa-shield"></i> About</a></li>
                    <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

           <div ng-view></div>

        </div>

    </body>
    </html>

pages/about.html:

<div class="jumbotron text-center">
        <h1>About Page</h1>

        <p>{{ message }}</p>

         <input type="button" value="Save" ng-click="Save()" />
         <input type="button" value="Get" ng-click="Get()" />

    </div>

pages/contact.html：

 <div class="jumbotron text-center">
    <h1>Contact Page</h1>

    <p>{{ message }}</p>
</div>

pages/home.html:

<div class="jumbotron text-center">
        <h1>Home Page</h1>

        <p>{{ message }}</p>
    </div>

scripts.js：

    var scotchApp = angular.module('scotchApp',['ngRoute','ngStorage']);


    scotchApp.config(function($routeProvider) {
        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/home.html',
                controller  : 'mainController'
            })

            // route for the about page
            .when('/about', {
                templateUrl : 'pages/about.html',
                controller  : 'aboutController'
            })

            // route for the contact page
            .when('/contact', {
                templateUrl : 'pages/contact.html',
                controller  : 'contactController'
            });
    });

    // create the controller and inject Angular's $scope
    scotchApp.controller('mainController', function($scope, $localStorage, $sessionStorage, $window) {
        // create a message to display in our view
        $scope.message = 'Everyone come and see how good I look!';
    });

    scotchApp.controller('aboutController', function($scope, $localStorage, $sessionStorage, $window) {
        $scope.message = 'Look! I am an about page.';
        $scope.Save = function () {
                $localStorage.LocalMessage = "LocalStorage: My name is Mudassar Khan.";
                $sessionStorage.SessionMessage = "SessionStorage: My name is Mudassar Khan.";
                $localStorage.$save();
                $sessionStorage.$save();
            }
            $scope.Get = function () {
                $window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
            }
    });

    scotchApp.controller('contactController', function($scope, $localStorage, $sessionStorage, $window) {
        $scope.message = 'Contact us! JK. This is just a demo.';
    });

提前致谢。

【问题讨论】：

有错误控制台吗？
@Asim K T XMLHttpRequest 无法加载文件：///C:/Users/sivakumarj/Desktop/Examples/Session/angular/pages/home.html。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https、chrome-extension-resource。
看起来您必须使用本地服务器来提供文件。 stackoverflow.com/questions/10752055/…。或者使用以下标志在终端中启动 chrome：--allow-file-access-from-files
它不能使用您需要从某个地方提供它们的那种请求来请求直接文件。如果您需要一些简单的东西，node.js 可以很好地为本地主机提供服务，并且一些资源可以让您在几分钟内启动并运行。

标签： javascript angularjs google-chrome local-storage session-storage

【解决方案1】：

您需要通过本地服务器提供您的 html。现在您的文件作为 file:/// 它应该是 http://

参考这个stackoverflow answer

【讨论】：