AngularJS - 为什么应用程序没有路由？答案

【问题标题】：AngularJS - Why the application is not routing?AngularJS - 为什么应用程序没有路由？
【发布时间】：2015-11-25 07:01:01
【问题描述】：

我正在尝试制作一个 AngularJS 应用程序，但我不明白为什么它不能正确路由，我遵循了一些指南但还没有让它工作。

代码如下：

index.html

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
<meta charset="UTF-8">
<title>Example App</title>
</head>
<body>

    <div ng-view></div>

    <!-- Vendor libraries -->
    <script src="lib/jquery-2.1.4.min.js"></script>
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-route.min.js"></script>
    <!-- Application Files -->
    <script src="app/app.js"></script>
    <script src="app/home/controllers/HomeController.js"></script>
</body>
</html>

app.js

(function() {
    'use strict';

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

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home/views/index.html',
                controller: 'HomeController',
                controllerAs: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

HomeController.js

(function() {
    'use strict';

    angular
       .module('App')
       .controller('HomeController', HomeController);

    function HomeController(){
        var home = this;
    }
})();

首页的 index.html

<div>
   Example text
</div>

提前致谢

【问题讨论】：

也许您可以将代码中最重要的部分作为 sn-p 发布在这里，而不是引用外部链接？一旦链接失效，这篇文章就会过期。
@BryanOemar 感谢您的建议，我已经改变了。
我认为您不需要将代码包装在立即执行的函数中。您包含 ng-app 属性的事实意味着 Angular 将在需要时执行您的代码
这在 plunker 中正常工作（仅将主索引的名称更改为 plunker 友好的格式）。如果这在您的环境中不起作用，则说明您没有在此处显示某些错误。
如果我必须猜测，根据您到目前为止所描述的内容，以及我在示例 plunker 中所做的唯一更改，我想您的 @987654326 @ 路径无效。

标签： javascript html angularjs web

【解决方案1】：

您是否在控制台中看到错误？您可能会收到与找不到控制器有关的错误，因为'home/controllers/HomeController' 不是引用 HomeController 的正确方法。它应该改为：'HomeController'。 Angular 将完成遍历您的控制器并找到与该字符串匹配的控制器的工作。

这是一个更新的 app.js：

(function() {
    'use strict';

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

    app.config(function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home/views/index.html',
                controller: 'HomeController',
                controllerAs: 'home'
            })
            .otherwise({
                redirectTo: '/'
            });
    });
})();

此外，在 HomeController.js 中，您通过在名称后包含方括号来重新实例化模块“App”。相反，将其修改为更简洁：

(function() {
    'use strict';

    angular
       .module('App')
       .controller('HomeController', HomeController);

    function HomeController(){
        var home = this;
    }
})();

【讨论】：

我在控制台中没有看到任何错误，我进行了您建议的更改，但仍然没有看到任何内容。
角度和角度路径加载是否正确？
是的，感谢 Claies，我发现 templateUrl 无法正常工作。但是你的建议对我也很有帮助。谢谢。