javascript - Angular 路由问题 - 路由未执行

Question

我一直在学习 Scott Allen 的一组教程。我一直在努力模仿他所做的一切，但我相信我的 Angular 路线并没有被执行。

我有一个名为 main.html 的 View 和一个名为 index.html 的外壳/布局 View 。在 index.html 中，我在 body 标签中有 ng-view 并且在名为 app.js 的脚本文件中有一个路由，如下所示:

(function(){

  var app = angular.module("githubViewer", ["ngRoute"]);

  app.config(function($routeProvider){
    $routeProvider
        .when("/main", {
          templateUrl: "main.html",
          controller: "MainController"
        })
        .when("/user/:username", {
          templateUrl: "user.html",
          controller: "UserController"
        })
        .otherwise({redirectTo:"/main"});
  });

}());

这是 index.html 的脚本导入

 <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>

我知道路由没有被命中的方式是因为 main.html 的代码没有被传递回页面。

angular-route 的使用方式是否发生了变化？

这里还有一个指向我的 plunk 的链接:http://plnkr.co/edit/Ew73QexRoDZlrvPG2UA1?p=preview

Answer 1

您正在多次创建相同的 Angular 模块。多次创建相同的 Angular 模块会失败。因此，创建一次 Angular 模块并在其他地方使用它，如下所示

var app = angular.module('FirstModule');  // app.js
app.controller // controller.js
app.factory  // service.js
app.directive  // directives.js

这是更新后的 plunkr。

http://plnkr.co/edit/qWHkzj9v6nGhhb7MjDDf?p=preview

我已将以下自执行函数更改为正常函数，因为它们创建闭包并且在 app.js 中创建的模块在其他文件中不可用。

(function(){

}());

否则，您可以将在 app.js 中创建的模块作为参数传递给其他文件中的所有自执行函数。