Dec
26
2015
By abernal
They help us gets data into the html. The application behavior gets defined by controllers through functions and values
Sample
Within the file app.js
Within the file app.js
(function(){
var app = angular.module('store', []);
app.controller('StoreController', function(){
this.product = gem;
});
var gem = {
name : 'Piramyd',
price: 2.95,
description: 'This is a breif description',
}
})();
Within the file .html file
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
</body>
Other Sample
Within the .html file
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
</div>
</body>
</html>
Within the .js file
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();