Question

我是角度js的新手，并按照本教程http://embed.plnkr.co/dd8Nk9PDFotCQu4yrnDg/创建简单的SPA页面。其中，当我在“关于”页面中使用“本地”和“会话”存储概念时，除了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>

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

页/ contact.html：

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

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

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

提前致谢。

Answer 1

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

参考此stackoverflow answer

在chrome中使用会话和本地存储时，不会加载Angular JS Page

1 个答案: