angularJs视图无法从浏览器加载相同的代码加载在浏览器上的视图

这是我的plnuker 加载视图如预期在plnkr网站。angularJs视图无法从浏览器加载相同的代码加载在浏览器上的视图

然而，当我下载了plunks为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并且是客户端框架它不需要任何的后台支持（如Web服务器的任何主办吧）。因此，将所有html和javaScript放入一个文件夹并打开index.html应该打开SPA。请纠正我，如果这种理解不正确，并帮助我解决这个问题。

来源

2017-03-16 ari

如果你打开控制台，你会看到此错误消息：

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

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

下载你的运动员。假设你的下载位置是/Users/username/Downloads/plunk-tDKn84
运行cd /Users/username/Downloads/plunk-tDKn84
运行python -m SimpleHTTPServer 这将在端口8000
打开浏览器中运行一个基本的HTTP服务器，并键入http://localhost:8000/index.html

你应该可以看到你的应用程序加载。希望这可以帮助！

这是我看到它在我的本地：

来源

2017-03-16 20:21:51

我只是检查你的消息，在此之前，我安装的Apache网络服务器和验证相同。我没有投票权。我仍然从你的文章中了解到运行基于python的服务器很酷。 – ari

没关系。如果它适合你，你可以接受我的答案。很高兴我能帮上忙！ –

angularJs视图无法从浏览器加载相同的代码加载在浏览器上的视图

回答

相关问题