角度路线问题 - 路线未执行

时间:2014-08-20 16:52:46

标签: javascript angularjs angularjs-routing

我一直在关注Scott Allen的一系列教程。我试图模仿他所做的事情我相信但是我的角度路线并没有被执行。

我有一个名为main.html的视图和一个名为index.html的shell /布局视图。在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的代码没有传回页面。

角度路线的使用方式是否有可能改变?

此处还有我的插件链接:http://plnkr.co/edit/Ew73QexRoDZlrvPG2UA1?p=preview

2 个答案:

答案 0 :(得分:3)

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

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中创建的模块作为参数传递给其他文件中的所有自执行函数。

答案 1 :(得分:1)

修正了plunker。您曾经再次呼叫angular.module并作为设定者而不是将其用作吸气剂。

编辑: 我迟到了一分钟=)你可以使用Vikram Babu的答案并完全删除包装封口。如果您需要使用闭包,只需使用var app = angular.module("githubViewer");而不是var app = angular.module("githubViewer", []);,以免覆盖模块定义。