Question

我在尝试在index.html文件上显示部分html时遇到问题（未显示任何内容）。

请参阅我的index.html代码：

    <!doctype html>
<html lang="en" ng-app="myApp">
    <head>
        <meta charset="utf-8">
        <title>My AngularJS App</title>
        <link rel="stylesheet" href="css/app.css"/>
        <link rel="stylesheet" href="css/animations.css"/>
        <link rel="stylesheet" href="css/bootstrap.css"/>
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-animate.js"></script>
        <script src="lib/angular/angular-route.js"></script>
        <script src="lib/angular/angular-resource.js"></script>
        <script src="js/app.js"></script>
        <script src="js/animations.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/directives.js"></script>
    </head>
    <body>
        <li>
            <a href="#people">Show People</a>
        </li>
        <div ng-view></div>
    </body>
</html>

然后我尝试使用app.js上的路由加载部分目录上的people.html：

'use strict';

// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.when('/people', {
        templateUrl : 'patials/people.html',
        controller : 'PeopleController'
    }).otherwise({
        redirectTo : '/people'
    });
}]);

如果我用我的模板文件内容替换index.html上的ng-view部分，一切都很好，所以我不认为我的控制器声明有问题。

你能看看并帮我弄清楚出了什么问题吗？

谢谢！

Answer 1

您在控制器中使用var myApp = angular.module('myApp', []);。如果您在angular.module中添加一个数组作为第二个参数，则该模块会自动创建为新模块并覆盖前一个具有相同名称的模块，因此config不再起作用，因为在您的模块中代码它是在不同的模块上定义的。

只需更改PeopleController定义中的代码

即可

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

到

var myApp = angular.module('myApp');

它应该有效

编辑插件： http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview

Angular JS模板现在显示

1 个答案: