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

AngularJS - Why the application is not routing?

本文关键字：路由 应用程序 为什么 AngularJS-      更新时间：2023-09-26

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

主页索引.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;
    }
})();
相关文章：