Javascript 在chrome中使用会话和本地存储时未加载Angular JS页面_Javascript_Angularjs_Google Chrome_Local Storage_Session Storage

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

javascript angularjs google-chrome

Javascript 在chrome中使用会话和本地存储时未加载Angular JS页面,javascript,angularjs,google-chrome,local-storage,session-storage,Javascript,Angularjs,Google Chrome,Local Storage,Session Storage,我是angular js新手，并遵循本教程创建简单SPA页面。其中，当我在About页面中使用本地和会话存储概念时，除了Chrome之外，它在Firefox中工作得非常好。我无法在Chrome中找到问题。所以请你帮忙 index.html <html ng-app="scotchApp"> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap

我是angular js新手，并遵循本教程创建简单SPA页面。其中，当我在About页面中使用本地和会话存储概念时，除了Chrome之外，它在Firefox中工作得非常好。我无法在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>

提前感谢。

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

请参阅此

控制台是否有任何错误？@Asim K T XMLHttpRequest无法加载file:///C:/Users/sivakumarj/Desktop/Examples/Session/angular/pages/home.html. 跨源请求仅支持协议方案：http、data、chrome、chrome extension、https、chrome-extension-resource。看起来您必须使用本地服务器来提供文件。或者在终端启动chrome时使用以下标志：--允许从文件访问它不能使用您需要从某处获得服务的那种请求来请求直接文件。如果您需要一些东西，easynode.js可以很好地为localhost提供服务，一些资源可以在几分钟内让您启动并运行。

<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>

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

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

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

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

    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.';
    });