Question

我的代码如下所示：

的index.html

<!doctype html>
<html ng-app="myApp">
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js">   </script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
    <div>
        <div data-ng-view></div>
    </div>
</body>
</html>

main.js

var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
        .when('/view1', {
            controller : 'SimpleController',
            templateUrl : 'templates/view1.html'
        })
        .when('/view2', {
            controller : 'SimpleController',
            templateUrl : 'templates/view2.html'
        })
        .otherwise({ redirectTo : '/view1' });
}]);



app.controller('SimpleController', function ($scope) {
    $scope.customers = [
        {name : "John Doe", city : "San Francisco"},
        {name : "John Bollinger", city : "Phoenix"},
        {name : "Jane Doe", city : "Washington"}
    ];
    $scope.addCustomer = function () {
        $scope.customers.push(
            {name : $scope.newCustomer.name,
             city : $scope.newCustome.city  
            }
        )
    }
});

在我的js文件夹中，我有另一个名为templates的文件夹。在这里我们有2个html文件。

view1.html

<div class="container">
  <h1>View 1</h1>
  Enter a name to search the list
  <input type="text" data-ng-model="custName" />
  <ul>
    <li data-ng-repeat="cust in customers | filter : custName | orderBy : 'name' ">
        {{ cust.name }} - {{ cust.city }}
    </li>
  </ul>

  <br />
  Customer name: <br />
  <input type="text" data-ng-model="newCustomer.name" />
  Customer city: <br />
  <input type="text" data-ng-model="newCustomer.city" />
  <br />
  <button data-ng-click="addCustomer()">Add Customer</button>
</div>

最后......

view2.html

<div class="container">
  <h1>View 2</h1>
  Enter a name to search the list
  <input type="text" data-ng-model="custName" />
  <ul>
    <li data-ng-repeat="cust in customers | filter : custName | orderBy : 'city' ">
      {{ cust.name }} - {{ cust.city }}
    </li>
  </ul>
</div>

为什么这不起作用的任何想法？我尝试用ng-route修复问题，但这也没有用。当我打开文件时，URL会转到index.html＃/ view1，表明路由有效，但网页完全为空。没有任何html元素加载。

修改这是我在开发人员模式中遇到的错误：

XMLHttpRequest无法加载angular.js：8632 file：/// E：/Learning%20AngularJs/templates/view1.html。交叉源请求仅支持协议方案：http，数据，chrome，chrome-extension，https，chrome-extension-resource。

注意，我在index.html中有另一个模板文件夹，其中包含2个视图html文件。

Answer 1

您的代码没有任何问题。问题是您需要在Web服务器中托管它，我认为您正试图从文件浏览器

打开它

您可以在IIS或任何其他网络服务器中进行部署，然后尝试。

或者您可以按照以下步骤进行操作

确保安装node js

打开命令提示符
导航到根目录
运行以下命令 npm安装连接 npm install serve-static
创建一个名为server.js的文件。放在下面的代码

var connect = require（'connect'），serveStatic = require（'serve-static'）;

var app = connect（）;

app.use（serveStatic（ ''）） app.listen（5000）;
浏览http://localhost:5000

它应该工作。我能够使用你给出的代码

为什么我的html文件没有加载到这个AngularJs项目中？

1 个答案: