ngRoute的模塊依賴性破壞了角度渲染

Question

我正在嘗試在我的網站項目中使用均值堆棧。 我正在使用ngRoute進行路由，並且想在我的主頁上添加引導輪播。 我正在嘗試從此頁面放置角度團隊輪播組件。

當我嘗試實現此功能時，我意識到，我嘗試將模塊依賴項（即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']或其他內容，則無濟於事，並且我從本地主機獲得了空頁面。 什么會導致此問題？ 我該怎么辦 ？ 謝謝。

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

---

如果您不想在根模塊中擁有所有依賴項，則可以制作子模塊，例如var controllers = angular.module('myApp.controllers', ['ngAnimate']) ，並將其包含在app.js var app = angular.module('myApp', ['myApp.controllers']);

Answer 2

為什么要創建兩個不同的模塊？ 甚至在創建第二個模塊時也不會注入第一個模塊。

除非您使用單個模塊對所有代碼進行編碼或將一個模塊注入另一個模塊，否則您的應用程序絕不會起作用。