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 :
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
Comments
Post a Comment