Question

我已经建立了一个AngularJS MVC结构。不幸的是，脚本中没有特定的错误或警告。但是，屏幕没有显示任何内容，并且视图不是根据地址栏中的URLS给出的。

请帮我解决这个问题。

请参阅以下代码单独

----------------- controller.js ---------------------

var demoApp = angular.module('demoApp', []);
var controllers = {};
demoApp.controller('simpleController', function ($scope) {
    $scope.customers = [{
        name: 'Rex',
        city: 'Kensas'
    }, {
        name: 'Cyrin',
        city: 'Texas'
    }, {
        name: 'Vijith',
        city: 'Florida'
    }];
    $scope.addCustomer = function () {
        $scope.customers.push({
            name: $scope.newCustomer.name,
            city: $scope.newCustomer.city
        });
        $scope.newCustomer.name = '';
        $scope.newCustomer.city = '';
    };
});
demoApp.config(function ($routeProvider) {
    $routeProvider
        .when('/view1', {
            controller: 'simpleController',
            templateUrl: 'Partials/view1.html'
        })
        .when('/view2', {
            controller: 'simpleController',
            templateUrl: 'Partials/view2.html'
        })
        .otherwise({
            redirectTo: '/view1'
        });
});

-----------------------的index.html --------------------- -----

    <!doctype html>
<html ng-app="demoApp">
    <head>
        <script src="angular.min.js"></script>
        <script src="controller.js"></script>
    </head>
    <body>
        <div>
            <div ng-view=""></div>
        </div>
    </body>
</html>

-------------局部模板/ view1.html ---------------------------- < / p>

<div class="container">
    <h2>View 1</h2>
    Name:
    <br />
    <input type="text" ng-model="name" />
    <br />
    <ul>
        <li ng-repeat="cust in customers | filter:name">{{ cust.name }}</li>
    </ul>
    <br />
    User Name:<br />
    <input type="text" ng-model="newCustomer.name" />
    <br />
    User Name:<br />
    <input type="text" ng-model="newCustomer.city" />
    <br />
    <button ng-click="addCustomer()">Add Customer</button>
    <br />
    <a href="#view2">View 2</a>
</div>

不包括view2.html，因为它在这里不太重要。

希望快速解决问题。：）

感谢您的时间！雷克斯

Answer 1

你必须定义ng-controller

<div ng-controller="simpleController">

Answer 2

您正在使用哪个版本的Angular？

如果您使用1.2 *，那么您必须通过单独包含ngRoute将angular-route.js模块明确注入您的应用

请参阅文档：https://docs.angularjs.org/guide/migration#ngroute-has-been-moved-into-its-own-module

在代码中导入ngRoute

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

此外，您尚未将控制器定义为任何HTML元素。
```
<div ng-controller="simpleController"></div>
```

<强> DEMO PLUNKER

注意：在您询问任何内容之前，请查看您的浏览器控制台是否有任何错误。如果您尚未包含ngRoute，则会抛出错误，您可以在控制台中看到它。

Answer 3

您已定义了自己的应用（ng-app）..但您尚未在任何HTML文件中定义控制器。

对于需要使用控制器的HTML文件，请通过以下方式调用它：

<div ng-controller="simpleController">
    // The rest of your HTML
</div>

设置简单的AngularJS MVC的问题

3 个答案: