decomposing objects in angular

Question

im fairly new to angular. im trying to understand why this doesnt work:

error recieved is:

Uncaught Error: [$injector:modulerr] Failed to instantiate module phonecatApp due to: Error: [$injector:modulerr] Failed to instantiate module phoneList due to: TypeError: Cannot read property 'controller' of undefined

angular.
module('phoneList').
component(name, component);

var name = 'phoneList';
var component = {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http', function PhoneListController($http) {
        var self = this;
        self.orderProp = 'age';

        $http.get('phones/phones.json').then(function(response) {
            self.phones = response.data;
        });
    }]
};

how can i fix this ?

i know i can do this but i prefer decomposing the object as above. please advise

    angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http', function PhoneListController($http) {
      var self = this;
      self.orderProp = 'age';

      $http.get('phones/phones.json').then(function(response) {
        self.phones = response.data;
      });
    }]
  });

João Otero · Accepted Answer · 2017-10-25 03:26:13Z

1

Have you tried to define the name and component vars before using them in .component(name, component) ? Like:

var name = 'phoneList';
var component = {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: ['$http', function PhoneListController($http) {
        var self = this;
        self.orderProp = 'age';

        $http.get('phones/phones.json').then(function(response) {
            self.phones = response.data;
        });
    }]
};

angular.
module('phoneList').
component(name, component);

answered Oct 25, 2017 at 3:26

João Otero

1,0381 gold badge18 silver badges33 bronze badges

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

1 Comment

João Otero Over a year ago

sure bro! I'm glad I was of help

angularstar-ter · Accepted Answer · 2017-10-25 02:31:52Z

-1

this is the index.html. i already have app.module.js defining this

'use strict';

// Define the `phonecatApp` module
angular.module('phonecatApp', [
  'ngRoute',
  'phoneDetail',
  'phoneList'
]);


<!doctype html>
<html lang="en" ng-app="phonecatApp">
  <head>
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="app.css" />
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="app.module.js"></script>
    <script src="app.config.js"></script>
    <script src="phone-list/phone-list.module.js"></script>
    <script src="phone-list/phone-list.component.js"></script>
    <script src="phone-detail/phone-detail.module.js"></script>
    <script src="phone-detail/phone-detail.component.js"></script>
  </head>
  <body>

    <div ng-view></div>

  </body>
</html>

this is not the issue. my example is straight from the angularjs tutorial with the above only difference of separating the component object from the component itself.

answered Oct 25, 2017 at 2:31

angularstar-ter

194 bronze badges

1 Comment

Claies Over a year ago

This isn't an answer to the question. Don't use the answer block to make comments or add additional details to your question, edit the question instead.

Collectives™ on Stack Overflow

decomposing objects in angular

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related