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.


1. Download Angular 
2. Download CSS


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(){

this will bind the html with Angular Javascript.


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 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