angularjs - 面临错误 - 无法弄清楚答案

【问题标题】：angularjs - facing error - can't figure it outangularjs - 面临错误 - 无法弄清楚
【发布时间】：2016-08-04 07:05:13
【问题描述】：

var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
  });

app.controller('ModalCtrl', function($scope,  $modal) {
      
      $scope.name = 'theNameHasBeenPassed';
      
      $scope.showModal = function() {
        
        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };
          
        
        $scope.opts.resolve.item = function() {
            return angular.copy({name:$scope.name}); // pass name to Dialog
        }
        
          var modalInstance = $modal.open($scope.opts);
          
          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {
    
     $scope.item = item;
    
      $scope.ok = function () {
        $modalInstance.close();
      };
      
      $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
      };
}

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="angular.js"></script>
    <script src="angular-route.js"></script>
    <script src="ui-bootstrap-tpls-0.7.0.js"></script>
    <script src="example.js"></script>
    <link href="bootstrap-combined.min.css" rel="stylesheet">
    <style>
      .left-nav,.right-nav{
         float:left; 
      }
      .right-nav{
        margin-left:20px;
      }
      a{
        cursor:pointer; 
      }
    </style>
  </head>
  <body>


<div ng-controller="ModalCtrl">
    <div>Some Content</div>
    <button ng-click="showModal()">Click Me</button>
</div>

  </body>
</html>

<div class="modal-header">
  <h1>This is the title {{item.name}}</h1>
</div>'
<div ng-controller="Nav" class="modal-body">
 
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

每当我尝试在 chrome 中运行我的应用程序时，它都会引发以下错误。

angular.js:7889 XMLHttpRequest 无法加载 file:///C:/Users/user/Desktop/Angular_modal_popup/modalContent.html。跨源请求仅支持协议方案：http，数据、chrome、chrome-extension、https、chrome-extension-resource

为什么会这样？怎么解决？

我只是通过plunker下载了一些例子来学习，但我不能再运行了。

http://plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview

以上链接是我尝试在本地机器上学习和执行的内容。该示例在 plunker 站点中运行正常，没有任何问题，但是每当我在我的机器上下载并运行它时都会出错。

从 StackOverflow 得到了一些答案，但我不明白。

谁能一步步指导我？

【问题讨论】：

嗨@SaE 请看一下。编辑了我的帖子和以下链接 plnkr.co/edit/lHTw0p381rcnnUKiJTpB?p=preview 我下载的地方
@Like_2_learn 您可能正在将 html 文件直接加载到浏览器中。您需要创建本地服务器来托管这些文件。这就是问题。角度通过 ajax 加载模板，因此在没有本地服务器和相同域的情况下，可能会出现此错误。
如何设置本地服务器？我需要安装 NPM 并创建端口抛出节点吗？请详细解释我。或提前给我的任何工作示例/文档感谢@The_ehT
是的，你必须通过 npm 创建服务器，或者如果你有 Visual Studio，打开文件夹作为网站并将 index.html 设置为启动页面并点击上面的运行按钮。
@Like_2_Learn-> stackoverflow.com/questions/27742070/…

标签： javascript angularjs modal-dialog angular-ui-bootstrap ngroute

【解决方案1】：

"Cross origin requests are only supported for HTTP." error when loading a local file 他提到浏览器的部分无法显式加载文件：// 而是使用网络服务器加载

【讨论】：

浏览器无法从CDN获取文件？如果是这样的话。我下载所有依赖的文件并在 index.html 页面中提到它，如下所示