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

Question

I'm trying to make an AngularJS application but I don't understand why it doesn't route correctly, I followed some guides but haven´t made it work yet. 我正在尝试制作AngularJS应用程序，但我不明白为什么它无法正确路由，我遵循了一些指南，但尚未使其正常工作。

Here is the code: 这是代码：

index.html 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 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 HomeController.js

(function() {
    'use strict';

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

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

home's index.html 家的index.html

<div>
   Example text
</div>

Thanks in advance 提前致谢

Answer 1

Are you seeing errors in the console? 您是否在控制台中看到错误？ You're probably getting an error relating to the controller not being found, as 'home/controllers/HomeController' is not a proper way to reference HomeController. 您可能会遇到与找不到控制器有关的错误，因为'home/controllers/HomeController'不是引用HomeController的正确方法。 It should instead read: 'HomeController' . 它应该改为： 'HomeController' 。 Angular will do the work to traverse your controllers and find one that matches that string. Angular将完成遍历您的控制器并找到与该字符串匹配的工作。

Here's an updated app.js: 这是更新的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: '/'
            });
    });
})();

Additionally, in HomeController.js, you are re-instantiating the module 'App' by including the brackets after the name. 此外，在HomeController.js中，您可以通过在名称后面加上方括号来重新实例化模块“ App”。 Instead, modify it to more succinctly read: 而是将其修改为更简洁地阅读：

(function() {
    'use strict';

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

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

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

问题描述

1 个解决方案

解决方案1
2 2015-11-24 22:42:51

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

问题描述

1 个解决方案

解决方案1 2 2015-11-24 22:42:51

解决方案1
2 2015-11-24 22:42:51