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


提前致谢

最佳答案

您是否在控制台中看到错误?您可能会遇到与找不到控制器有关的错误,因为'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;
    }
})();

关于javascript - AngularJS-为什么应用程序没有路由?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33904948/

10-09 18:11