与ngRoute的模块依赖关系打破了角度渲染

时间:2016-02-10 10:17:50

标签: javascript angularjs mean-stack ngroute

我正在尝试在我的网站项目中使用Mean堆栈。我正在使用ngRoute进行路由,我想将bootstrap轮播添加到我的主页面。我试图将角度团队轮播组件放在这个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);

})();

如果我添加,[]或[' ngAnimate',' ui.bootstrap']或者myApp'的任何内容,没有任何效果,我得到了来自我的localhost的空白页面。什么可能导致这个问题?我该怎么办 ?谢谢。

2 个答案:

答案 0 :(得分:2)

var app = angular.module('myApp');意味着让我获得myApp模块。var app = angular.module('myApp', [listOfDependencies]);意味着使用所有列出的依赖项创建模块myApp。因此,如果您在app.jsmainController.js中放置方括号,则会覆盖之前创建的。最简单的解决方案是在ngAnimate中添加ui.bootstrapapp.js,如下所示: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']); < / p>

答案 1 :(得分:0)

为什么要创建两个不同的模块?甚至你在创建第二个模块时也没有注入第一个模块。

  

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