CODEWITHSUNDEEP
javascriptangularjs
Victor
Victor

Reputation: 87

Angular JS Module Not Connecting to Root Module

I was going through the angular tutorial to get a better understanding and I'm running into issues connecting my second module to the root module. I added a template to the home.template.html called "phone-list". When I change the module name to the root module it displays the list. It does not work if I use a different name "phoneList" and create a module phoneList.module.js and then try to connect that to the root module called app.module.js

My Code: https://plnkr.co/edit/42GDb6nhr4zB3EAcd0od?p=preview

ROOT MODULE -
angular.module('myApp', [
  // ...which depends on the `phoneList` module
  'phoneList'
]);

PHONELIST MODULE -
angular.module('phoneList', []);


PHONELIST COMPONENT-
angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController() {
      this.phones = [
        {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.'
        }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.'
        }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.'
        }
      ];
    }
  });

Upvotes: 4

Views: 46

Answers (1)

Claies
Claies

Reputation: 22323

Your app.config.js is re-registering your myApp module and overwriting the app.module values, because it is using the setter syntax (angular.module('myApp', [...])) rather than the getter syntax (angular.module('myApp')).

Note that the order of file load is important here, and only the first file that loads a particular module should set the module, all other files that load the module should get only.

The easiest way to solve this is to move the ui-router dependency to the app.module.js file and use the getter method in the app.config.js instead.

app.module.js:

'use strict';


angular.module('myApp', ['ui.router',
  // ...which depends on the `phoneList` module
  'phoneList'
]);

app.config.js:

angular.module('myApp')
  .config(function($stateProvider) {
    $stateProvider
      .state('home', {
        url: '/home',
        templateUrl: 'home.template.html'
      })
      .state('about', {
        url: '/about',
        templateUrl: 'about.template.html'
      });
  });

Working Sample: https://plnkr.co/edit/tCA2ov0Vux2AxTSqNAEY?p=preview

Upvotes: 2

Related Questions