Tuesday, June 21, 2016

Controller Into AngularJS

1.2 Controllers

By using controller you can fetch data and display that data into model of AngularJS.

Controllers helps you out to get data on the Web Page.

Controllers is the thing where we can define our applications's behaviour by defining functions           and values.

To define Controller first you need to create the module for your AngularJS Web Application.

Example:
             
          Suppose you have the variable declared into app.js but outside to the controller and you                       want to access that variable to that controller

                var app=angular.module('GrocessaryShop',[])
app.controller('ShopConroller',function()
                {
                     this.product=shop_product;
});

var shop_product={
name="FaceWash",
price="100",
description="FaceWash",
}

Into Html <body> Tag
<body>
<div ng-controller="ShopConroller as shop">
<h1>{{shop.product.name}}</h1>
<h1>{{shop.product.price}}</h1>
<p>{{shop.product.description}}</p>
<div>
</body>

Exercise :

1) Add a controller named ShopConroller to our GrocessaryShop application.
2) Attach the ShopConroller to the <body> tag. Be sure to alias it as shop.
3) In app.js, we've added a shop_product object to represent one of the products in our                             GrocessaryShop. Assign it to the product property of ShopConroller so we can use them in                 the page.
4) Display the name of the product inside the <h1> tag.
5) Display the Price of the product inside the <h1> tag.

Feel free to comment below your experience with above approach and If you still find any problem  with above steps Let me know I would love to help you to resolve your  problem.

 If you want to take your Technological Knowledge to the Next Level and For More Technological information Stay tuned to  visionfortech.blogspot.com

Related Posts :


1)  Where we can use AngularJS and Difference Between angularjs and Jquery
2)  (Level 1.1) Directives,Modules into AngularJS
3)  (Level 1.2) Controller Into AngularJS
4)  (Level 1.3) In built Directives of AngularJS
5)  (Level 2.1) AngulerJs Filters and How to Create Custom Filters into AngularJs
6)  (Level 2.2) Tabs into Angular

No comments:

Post a Comment

Protected by Copyscape