CODEWITHSUNDEEP
javascriptangularjs
Narasingha Padhi
Narasingha Padhi

Reputation: 25

Angular: adding property in ng-controller

In app.js, i have added a gem object to represent one of the products in our gemStore. How can i assign it to the product property of StoreController.

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope){

  });
})();

Upvotes: 0

Views: 460

Answers (4)

Arno_Geismar
Arno_Geismar

Reputation: 2330

You are better of using a gem factory:

angular.module('gemStore', []).
factory('GemFactory', [ function() {
   var gem = { name: 'Azurite', price: 2.95 };
   return gem;
   };
 ]);

angular.module('gemStore',[]).controller("StoreController",function($scope, GemFactory){
      $scope.product = GemFactory();
  });

This way you can just dependency inject it into any controller that requires your precious beautiful gems. plus you will have a gem factory which is bound to make you filthy rich in no time.

Upvotes: 3

Mistalis
Mistalis

Reputation: 18309

You should maybe create it on the controller scope:

(function() {
  var app = angular.module('gemStore', []);

  app.controller("StoreController",function($scope) {
       $scope.gem = { name: 'Azurite', price: 2.95 };
  });
})();

It can now be displayed in your page with:

<div>Name: {{gem.name}}, Price: {{gem.price}}</div>

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events. - Angular documentation

Upvotes: 2

Lee Brindley
Lee Brindley

Reputation: 6512

Assign the gem property to the scope object. 

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope){
      $scope.product = gem;
  });
})();

You would then output the properties of 'product' in StoreController's template.

<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>

You could put the gem in a service also so it's not just sat there in the closure.

(function(){

  var app = angular.module('gemStore', []);
  app.controller("StoreController",function($scope, GemSvc){
      $scope.product = GemSvc.getGem();
  });

  app.service("GemSvc",function(){
      var gem = { name: 'Azurite', price: 2.95 };

      this.getGem = function () {
          return gem;
      };
  });
})();

Then in your template, i've used the ng-controller method here as you did not state how you hook up your templates to controllers.

<div ng-controller="StoreController">
    {{product.name}}
    {{product.price}}
</div>

Upvotes: 2

Rakesh Chand
Rakesh Chand

Reputation: 3113

Create a constant service in your app.js
You can put it into a real service also and access it
Example for constant service
Like following

(function(){
  var gem = { name: 'Azurite', price: 2.95 };
  var app = angular.module('gemStore', []).constant('GEM', {
    name: 'Azurite', 
    price: 2.95 
  });
  app.controller("StoreController",function($scope, GEM){
      $scope.product.name = GEM.name;
      $scope.product.price = GEM.price;
      //if you don't want to create a constant service then 
      //user directly like
      //$scope.product = gem;
  });
})();


<div>
    {{product.name}}
</div>
<div>
    {{product.price}}
</div>

Upvotes: 1

Related Questions