decomposing objects in angular

0
votes

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;
      });
    }]
  });
2
angularjs

2 Answers

1
votes

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

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.