AngularJS 中的 Ng-view 不起作用答案

【问题标题】：Ng-view in AngularJS doesn't workAngularJS 中的 Ng-view 不起作用
【发布时间】：2016-07-22 22:19:41
【问题描述】：

我有一个简单的 Angular 应用程序和两个链接，我希望 Angular 为我更改 URL 并为同一个单页应用程序中的每个链接显示正确的视图。但是当我在主模块中添加控制器模块时 - 它不起作用！

app.js

'use strict';

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select','appControllers'])

.config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/roles',{
        templateUrl: '/views/roles.html',
        controller: 'rolesController'
    })
    .otherwise(
        { redirectTo: '/views/index.html'}
    );
}]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Spring boot and Angularjs Tutorial</title>
<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>
<script src="/js/controllers.js"></script>
</head>
<body>
<h2>Administrator Panel</h2>
<div class="home-section">
<ul class="menu-list">
    <li><a href="#/report">Report</a></li>
    <li><a href="#/roles">Roles</a></li>
</ul>
</div>
<div ng-view></div>
</body>
</html>

controllers.js

'use strict';

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

appControllers.controller('rolesController', ['$scope', function($scope) {
$scope.headingTitle = "Roles List";
}]);

当 app.js 视图中没有“appControllers”时，视图工作正常，但控制器不工作。

var app = angular.module('app', ['ngRoute','ngResource','ngSanitize','ui.select'])

使用 - 没有任何效果。我该怎么办？

【问题讨论】：

为了帮助自己快速获得答案，您应该首先通过尝试获取显示问题的最简单和最短的代码示例来确定问题所在。在此处删除对于您的问题而言不必要的所有内容。

标签： javascript html angularjs

【解决方案1】：

改变

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

到

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

您的代码正在尝试获取一个不存在的现有模块。

From the documentation：

请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。利用 angular.module('myModule') 检索现有模块。

【讨论】：