Thursday 30 March 2017

Topic (Angular) 1 - Angular Introduction

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.


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


No comments:

Post a Comment