Angular JS module not connecting to root module

Question

I went through the angular tutorial to better understand, and I ran into problems with connecting the second module to the root module. I added a template to home.template.html called "phone-list". When I change the module name to the root module, it displays a list. It does not work if I use a different name "phoneList" and create a module phoneList.module.js and then try to connect it to the root module named 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.'
        }
      ];
    }
  });

Answer 1

app.config.js myApp app.module, setter (angular.module('myApp', [...])), getter (angular.module('myApp')).

, , , , , , , .

- ui-router app.module.js getter app.config.js.

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

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