ngRoute 的模块依赖中断 angular 渲染

Question

我正在尝试在我的网站项目中使用 Mean stack。我正在使用 ngRoute 进行路由，我想将 bootstrap 轮播添加到我的主页。我正在尝试从这个 page 中放置 angular 团队轮播组件。

虽然我正在尝试实现这一点，但我一尝试添加模块依赖项（即 var app = angular.module('myApp', []) ) 到我的控制器，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);

})();

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

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

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

By no chance your application is gonna work until and unless you code everything using single module or inject one module in another!

ngRoute 的模块依赖中断 angular 渲染

module dependency with ngRoute breaks angular rendering

javascript

angularjs

mean-stack

ngroute

app.js;

MainController.js;