Question

我正在尝试制作一个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>

提前致谢

Answer 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;
    }
})();

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

1 个答案: