module dependency with ngRoute breaks angular rendering

Question

I am trying to use Mean stack in my website project. I am using ngRoute for routing and I want to add bootstrap carousel to my main page. I am trying to put angular team carousel component from this page.

While I am trying to implement this, I realize as soon as I try to add module dependency ( which is var app = angular.module('myApp', []) ) to my controller , angular breaks (without any error) and nothing appear in page. If I delete, everything is working normal. I assume this is related with routing ?

Project Structure;

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

})();

If I add , [] or ['ngAnimate', 'ui.bootstrap'] or anything to right of 'myApp', nothing work and I get empty page from my localhost. What can cause this problem ? What should I do ? Thank you.

can you provide working sample on plunkr?

Grundy
– Grundy

2016-02-10 10:21:32 +00:00
Commented Feb 10, 2016 at 10:21 — Grundy
– Grundy, Commented Feb 10, 2016 at 10:21

dendimiiii · Accepted Answer · 2016-02-10 10:41:07Z

2

var app = angular.module('myApp'); means get me the module myApp.var app = angular.module('myApp', [listOfDependencies]); means create the module myApp with all of the listed dependencies. So if you put square brackets in app.js AND in mainController.js, then you overwrite the previously created. The simplest solution would be to add ngAnimate and ui.bootstrap in your app.js like this: var app = angular.module('myApp', ['ngRoute','ngAnimate','ui.bootstrap']);

If you don't want to have all your dependencies in your root module, you can make submodules like var controllers = angular.module('myApp.controllers', ['ngAnimate']), and include this in your app.js like var app = angular.module('myApp', ['myApp.controllers']);

edited Feb 10, 2016 at 10:41

answered Feb 10, 2016 at 10:22

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alper Silistre Over a year ago

I didn't know that its overwrite myApp. So how can I get ng.animate and ui.bootstrap ?

dendimiiii Over a year ago

just include them in app.js like: var app = angular.module('filmSevmem', ['ngRoute', 'ngAnimate', 'ui.bootstrap']); And dont put brackets in mainController.js

Alper Silistre Over a year ago

Yes it works. Thank you for your help. I understand now how to add modules to my existing project. Thanks.

Omar Over a year ago

saved me hours of trouble shooting!

vamshi krishna kurella · Accepted Answer · 2016-02-10 10:26:57Z

0

Why you are creating two different modules? And even you are not injecting the first module while creating the second.

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

answered Feb 10, 2016 at 10:26

vamshi krishna kurella

3321 silver badge10 bronze badges

Collectives™ on Stack Overflow

module dependency with ngRoute breaks angular rendering

app.js ;

MainController.js;

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.js ;

MainController.js;

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related