Getting Started
Angular is a another way from javascript to make use of html to be more readible an reduce response time between client and server side. This will create a dynamic and at the same time a responsive website application. Angular JS act as behind curtain to implement data that being load from server side without refreshing the whole page.
What basically happen ?
1. When user click on link this will create new HTTP request.
2. Server side will response in JSON data .
3. Client Side will update the browser using the response from server side.
Example . In index.html
and in our javascript app.js
this will bind the html with Angular Javascript.
What basically happen ?
1. When user click on link this will create new HTTP request.
2. Server side will response in JSON data .
3. Client Side will update the browser using the response from server side.
Requirement
1. Download Angular
2. Download CSS
Directives
A directive is a marker on HTML tag that tells AngularJS to run or reference the javascript.Example . In index.html
<html> <body ng-controller="ExampleController"> .... </body> </html>
and in our javascript app.js
function ExampleController(){ alert('Hello!'); }
this will bind the html with Angular Javascript.
Module
Creating our first module which we can write in app.js file.
var app = angular.module ('store, []);
To include our module inside our html we can use ng-app syntax and apply it in <html> tag. Like this :
<html ng-app = "store">
Expressions
Expressions allow developer to display dynamic value into your html . The concept <? php echo ?> will be replace double curly bracket {{ }} .
Numerical Operations example :
<p> I am {{ 4 + 6 }} years old </p>
This will produce a result : I am 10 years old
String Operations example :
<p> {{ "Hello my name is " + "yourname"}} </p>
This will produce a result : Hello my name is yourname