Question

我正在使用angularJS创建一个simpleApp，遗憾的是我不知道为什么它一直显示为空白。我猜AngularJS未能粘合我的控制器和放大器。图。

的index.html

<!DOCTYPE html>
<html data-ng-app="simpleApp">
    <head>
    </head>
    <body>
        <div data-ng-view="">
        </div>
        
        <script src="/app/controllers/controllers.js"></script>
        <script src="/app/services/customerService.js"></script>
        <script src="/app/app.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    </body>
</html>

App.js

var app = angular.module("simpleApp", []);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", { controller: "simpleController", templateUrl: "/app/partials/view1.html" })
        .when("/view2", { controller: "simpleController", templateUrl: "/app/partials/view2.html" })
        .otherwise({ redirectTo: "/" });
});

Controllers.js

app.controller("simpleController", function($scope) {
    $scope.customers = [
        { Name: "Dave Jones",  City: "Phoenix" }
        , { Name: "Jamie Riley", City: "Atlanta" }
        , { Name: "Heedy Walhin", City: "Chandler" }
        , { Name: "Thomas Winter", City: "Seattle" }
    ];
});

View1.html

<div>
    <input type="text" data-ng-model="filter.name"/>
    <ul>
        <li data-ng-repeat="cust in customers | filter: filter.name | orderBy: 'Name'">
            {{ cust.Name | uppercase }} - {{ cust.City | lowercase }}
        </li>
    </ul>
    <br/>
    Customer Name:
    <br/>
    <input type="text" data-ng-model="newCustomer.Name"/>
    <input type="text" data-ng-model="newCustomer.City"/>
    <br/>
    <input type="button" data-ng-click="addNewCustomer"/>
    <a href="#/view2">View 2</a>
</div>

View2.html

<div>
    <ul>
        <li data-ng-repeat="cust in customers">
            {{ cust.Name | lowercase }} - {{ cust.City | upppercase }}
        </li>
    </ul>
</div>

任何想法？

Answer 1

ng-route模块不是核心angular.js文件的一部分，您需要单独包含它。还需要更改js文件的顺序

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="/app/app.js"></script>
<script src="/app/controllers/controllers.js"></script>
<script src="/app/services/customerService.js"></script>

然后

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

此外，您的过滤器名称uppercase错误

{{ cust.Name | lowercase }} - {{ cust.City | uppercase }}

演示：Fiddle

Answer 2

我相信你在索引上缺少对控制器的引用。

类似的东西：

<body ng-controller="simpleController">

应该让你的索引页面继续。

您的路由配置看起来很好，但这些路由不会影响实际的索引页面。这些路由会将您的视图加载到ng-view指令中。

Answer 3

这是路径问题。我确实想念“。”当引用index.html文件中的所有javascript时

以下代码段应解决此问题

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.4/angular-route.js"></script>
<script src="./app/app.js"></script>
<script src="./app/controllers/controllers.js"></script>
<script src="./app/services/customerService.js"></script>

AngularJS无法连接控制器实例

3 个答案: