Internship: Topic (Angular) 1 - Angular Introduction

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

Internship