Question

这是我的plnuker ，可以在plnkr网站上按预期加载视图。

但是，当我将zip文件作为zip下载并在我的机器上解压缩并打开index.html时，它不会按预期加载视图。我已经研究了其他相关线程中讨论的href和路由的语法。

  <body>
   <div ng-app="SmartCartApp">
    <ul>
       <li> <a href="#BaseStationTest">BaseStation Test</a> </li> 
      <li style="float:right"> <a href="#ContactUs">Contact</a> </li>
       </ul>
      <div ng-view=""></div>
   </div>
          <script type="text/ng-template" id="BaseStation.html">  
            <div id="div1">  
                 <br/> {{message}}
            </div>  
        </script>  
       <script type="text/ng-template" id="ContactUs.html">  
            <div id="div2">  
                <br/> {{message}}

            </div>  
        </script> 
     </body>

// create the module and name it smartCartApp
var SmartCartApp = angular.module('SmartCartApp', ['ngRoute']);

// configure our routes
SmartCartApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider 
  .when('/BaseStationTest', {
    templateUrl: 'BaseStation.html',
    controller: 'BaseStationController'
  }) 
    .when('/ContactUs', {
    templateUrl: 'ContactUs.html',
    controller: 'ContactUsController'
  }) 
  .otherwise({
    redirectTo: '/BaseStationTest'
  });
}]);

我相信，因为这是AngulaJs SPA，它是客户端框架，它不需要任何后端支持（就像任何网络服务器来托管它）。因此，将所有html和javaScript放在一个文件夹中并打开index.html应该打开SPA。如果这种理解不正确，请纠正我并帮助我解决问题。

Answer 1

如果您打开控制台，则会看到以下错误消息：

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

您需要在Web服务器上运行它。最简单的方法是：

下载您的plunker。假设您的下载位置为/Users/username/Downloads/plunk-tDKn84
运行cd /Users/username/Downloads/plunk-tDKn84
运行python -m SimpleHTTPServer 这将在端口8000运行基本HTTP服务器。
打开浏览器并输入http://localhost:8000/index.html

您应该会看到您的应用加载。希望这有帮助！

这就是我在localhost上看到的内容：

angularJs视图没有从浏览器加载相同的代码加载plunker

1 个答案: