【问题标题】：module dependency with ngRoute breaks angular renderingngRoute 的模块依赖关系破坏了角度渲染
【发布时间】：2016-02-10 10:17:50
【问题描述】：

我正在尝试在我的网站项目中使用平均堆栈。我正在使用 ngRoute 进行路由，我想将引导轮播添加到我的主页。我试图从这个page 中放置角度团队轮播组件。

当我尝试实现这一点时，我意识到一旦我尝试将模块依赖项（即 var app = angular.module('myApp', []) ）添加到我的控制器，角度中断（没有任何错误）并且页面中没有任何内容。如果我删除，一切正常。我认为这与路由有关？

项目结构；

-myApp
    -node_modules
    package.json
    server.js
    -public
        -controllers
        -lib
        -views
        app.js
        index.html

app.js ;

(function(){

  var app = angular.module('filmSevmem', ['ngRoute']);

  app.config(function($routeProvider){
    $routeProvider
      .when('/main', {
        templateUrl: 'views/main.html',
        controller: 'MainController'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutController'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactController'
      })
      .otherwise({redirectTo:'/main'});
  });

})();

MainController.js;

(function(){

  var app = angular.module('myApp');

  var MainController = function ($scope, $http) {

  ....... // codes from carousel
  .......


  app.controller('MainController', MainController);

})();

如果我在 'myApp' 右侧添加、 [] 或 ['ngAnimate', 'ui.bootstrap'] 或任何内容，则没有任何效果，我会从本地主机获得空白页面。什么会导致这个问题？我该怎么办？谢谢。

【问题讨论】：

你能在 plunkr 上提供工作样本吗？

标签： javascript angularjs mean-stack ngroute

【解决方案1】：

var app = angular.module('myApp'); 表示为我获取模块 myApp。var app = angular.module('myApp', [listOfDependencies]); 表示使用所有列出的依赖项创建模块 myApp。所以如果你把方括号放在app.js 和mainController.js 中，那么你会覆盖之前创建的。最简单的解决方案是在您的app.js 中添加ngAnimate 和ui.bootstrap，如下所示：var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);

如果您不想在根模块中包含所有依赖项，则可以创建子模块，例如 var controllers = angular.module('myApp.controllers', ['ngAnimate'])，并将其包含在您的 app.js 中，例如 var app = angular.module('myApp', ['myApp.controllers']);

【讨论】：

我不知道它会覆盖 myApp.那么如何获得 ng.animate 和 ui.bootstrap 呢？
只需将它们包含在 app.js 中，例如： var app = angular.module('filmSevmem', ['ngRoute', 'ngAnimate', 'ui.bootstrap']);并且不要在 mainController.js 中放置括号
是的，它有效。感谢您的帮助。我现在了解如何将模块添加到我现有的项目中。谢谢。
为我节省了数小时的故障排除时间！

【解决方案2】：

为什么要创建两个不同的模块？即使您在创建第二个模块时也没有注入第一个模块。

除非您使用单个模块对所有内容进行编码或将一个模块注入另一个模块，否则您的应用程序不可能正常工作！

【讨论】：