javascript - ngRoute 的模块依赖性破坏了 Angular 渲染

Question

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

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

项目结构；

-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']或任何内容，则没有任何作用，并且我从本地主机获得空页面。什么会导致这个问题？我应该怎么办 ？谢谢。

Answer 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']);

<小时/>

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