Dec
26
2015
By abernal
Directive
Is a marker within the html that tells angular to run a given java script code. Basically we bind behavior between html and java script through directives.
Sample
Within the .html file
<!DOCTYPE html> <html> <body ng-controller="StoreController"> ... </body> </html>
within the java script code
function StoreController(){
alert("Hello Dude!");
}
ng-app
Its how we attach the Application module to the page
Sample
<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" ng-hide="store.product.soldOut">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>ng-controller
Attach a Controller function to the page
Sample
<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" ng-hide="store.product.soldOut">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>ng-show
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" ng-show="!store.product.soldOut">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>
Within the .js file
(function(){
var gem = { name: 'Azurite', price: 2.95, canPurchase: false, soldOut: true };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
ng-hide
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" ng-hide="store.product.soldOut">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>Within the .js file
(function(){
var gem = { name: 'Azurite', price: 2.95, canPurchase: false, soldOut: true };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
ng-repeat
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" ng-repeat="product in store.products">
<h3 >
{{store.product.name}}
<em class="pull-right">{{store.product.price}}</em>
</h3>
<button ng-show="store.product.canPurchase"> Add to Cart </button>
</div>
</body>
</html>
Within the .js file
(function(){
var gems = [
{ name: 'Pyramid', price: 2.95, canPurchase: false, soldOut: true },
{ name: 'Cube', price: 3, canPurchase: false, soldOut: true }
];
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.products = gems;
});
})();
ng-src
Useful to load images within the .html file
<body ng-controller="StoreController as store">
<ul class='list-group'>
<li class="list-group-item" ng-repeat="product in store.products" >
<h3>
{{product.name}}
<em class="pull-right"> {{ product.price | currency }} </em>
<img ng-src="{{product.images[0].full}}"/>
</h3>
</li>
</ul>
</body>
ng-init
Useful to initialize properties
<section ng-init="tab = 1"> <!-- Some html here --> </section>
ng-class
Useful to set a given class based upon a given expression
<li ng-class="{ active:tab === 3}">
<!-- Some html here -->
</li>
ng-include
Useful to insert templates
<h3 ng-include="'product-title.html'"></h3>
Note that we are using single quotes to refer product-title.html
Module
Piece of code that holds a particular functionality
Sample
Within a java script file, (app.js)
var app = angular.module('store', [ ]);Expressions
Are elements that allow us to insert dynamic values into the html. Reference
Sample
// Aritmetic operation
<p>
I am {{ 4 + 6 }}
</p>
// String operation
<p>
{{ "hello " + " brother !" }}
</p>