[AngularJS]: Introduction

Module / Controller Initialization

var app = angular.module(‘store’, []);
<html ng-app=”store”> … </html>

this way the html inside the body tag will be treated as a part of angular application
{{ expression }} – this will be evaluated using the javascript

 

(function(){
var app = angular.module(‘store’, []);
app.controller(‘StoreController’, function(){
this.product = gem;
}); 

var gem = {
name: ‘Product name’,
price: 2.95,
description: ‘ …. ‘,
canPurchase: false,
soldOut: true
};
})();

 

<html ng-app="store">
<body ng-controller="StoreController as store">
<div ng-hide="store.product.soldOut">
<h1>{{ store.product.name }}</h1>
<div>{{ store.product.price }}</div>
<div>{{ store.product.description }}</div>
<button ng-show="store.product.canPurchase">Add to Cart</button>
</div>
</body>
</html>

 

Majd Arbash

...

Leave a Reply