Tuesday, August 9, 2016

Angular.JS notes

Notes

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.
AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.




A Directive is a marker on a HTML tag that tells Angular to run or reference some JavaScript code.
Controllers are where we define our app’s behavior by defining functions and values.
Modules – where our application components live
Expressions – how values get displayed within the page

AngularJS Example

index.html
<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <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 ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<h2> ${{product.price}}</h2>
<p> {{product.description}}</p>
<button ng-show="product.canPurchase">Add to Cart</button>
</div>
</body>
</html>

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

app.controller('StoreController', function() {
// store data in the controller
this.products = gems;
});

var gems = [
{ name: 'Azurite', price: 2.95, description: 'Dobar za prodaju....', canPurchase : true },
{ name: 'Bloodstone', price: 5.95, description: 'Ne mozes kupiti', canPurchase : false },
{ name: 'Zircon', price: 3.95, description: 'ZZZZZZ', canPurchase : true }
];

})();

Ref


No comments:

Post a Comment