Angular Js for Beginners

Angular Js for Beginners

Angular JS is a

. AngularJS extends HTML attributes with

and binds data to HTML with

. It can be added to an HTML page with a <script> tag .

AngularJS Development Environment: –

We need the following tools to set up a development environment for Angular JS:

Angular JS Library Editor/IDE Web server Browser

Angular JS Library:

Angular JS is a library written in JavaScript. It can be added to web page with a <script> tag. Ex-

<

script

src

=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”><

/script

>

Editor/IDE:

You can use any good editor as per your choice.

Ex- Sublime Text, Eclipse, Notepad++, Visual Studio etc.

You can also use any online editor.

Web Server:

Use any web server such as IIS, apache etc.

Browser:

As Angular JS supports cross-browser compatibility then you can use any browser as your choice.

Basic building blocks of AngularJS:

We will learn the following things in Angular JS:

Directives Expressions Data binding Module Model Filters Controllers $scope object Directives:

Directives are attributes on a DOM element. It gives the specific behaviour to that DOM element. Directives are extended HTML attributes with the

. Some of the directives have been described below-

ng-app:-

This is the root element of the AngularJS application. This directive initializes an AngularJS application

You can only have one ng-app directive in your HTML document. If more than one ng-app directive appears, the first appearance will be used.

Syntax- <element

ng-app

=

“

Modulename

“

> Content here…. </element>

ng-init:-

This directive evaluates the given expression and initializes any application data.

Syntax- <element

ng-init

=”

expression/initialize application data

“

“

> Content here…. </element>

ng-controller:-

This directives takes the data from the view , process the data and then sends the data to the view.

Syntax- <element

ng-controller

=”

expression

“

> Content here…. </element>

ng-model:-

This directive binds the HTML controls (input, textarea etc ) to application data.

Syntax- <element

ng-model

=”

application data

“

“

> Content here…. </element>

ng-repeat:-

This directive repeats a HTML element. When we want to repeat a same task, we use this directive.

Example:-

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”” ng-init=”num1=10; num2=5; names=[‘Sayantani’,’Avishek’,’Abhijit’] “>

<p>My first expression: {{ num1 + num2 }}</p>

Enter Numbers to addition:

<input type=”text” ng-model=”num1″ /> + <input type=”text” ng-model=”num2″ />

= <span>{{ num1+ num2}}</span>

<p>Looping with ng-repeat:</p>

<ul>

<li ng-repeat=”x in names”>

{{ x }}

</li>

</ul>

</div>

</body>

</html>

Expressions:

AngularJs Expressions is used to bind application data to an Html. It can be written within

braces {{expression}}. It can be used inside a directive like

Ex-

<!DOCTYPE html>

<html>

<head>

<title>AngularJS Expressions</title>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

</head>

<body>

<h1> AngularJS Expressions </h1>

<div ng-app = “” ng-init = “quantity = 2; price = 30; student = {firstname:’Riya’,lastname:’dutta’,rollno:34};marks = [80,90,70,40,60]”>

<p>Hello {{student.firstname + ” ” + student.lastname}}!</p>

<p>Expense on Books : Rs. <span ng-bind =” price * quantity “></span> </p>

<p>Roll No: {{student.rollno}}</p>

<p>Marks(English): {{marks[4]}}</p>

</div>

</body>

</html>

Output:

AngularJS Expressions

Hello Riya dutta!

Expense on Books : 60 Rs

Roll No: 34

Marks(English): 60

Data binding:-

Data binding

in Angular JS is to synchronize between view and model. Angular JS supports two-way data binding menas when data in the model changes then the view is updated and vice versa.

Ex-

<!DOCTYPE html>

<html>

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js”></script>

<body>

<div ng-app=”myfirstApp” ng-controller=”myfisrtCtrl”>

Name: <input ng-model=”firstname”>

<h1>{{firstname}}</h1>

</div>

<script>

var app = angular.module(‘myfirstApp’, []);

app.controller(‘ myfisrtCtrl ‘, function($scope) {

$scope.firstname = “Sayantani”;

});

</script>

<p>Change the name inside the input field, and the model data will change automatically</p>

</body>

</html>

Module:-

Module is a container of different parts of your app- controllers, services, filters, directives, etc. Module is created by angular js function angular.module

var

app = angular.module(

“myApp”

, []);

parameter refers to an HTML element in which the application will run.

[] This array is the list of modules

myApp

depends on. Without the [] parameter, you are not creating a new module, but retrieving an existing one.

Models:-

The data shown to the user in the view and with which the user interacts.

Filters:-

Filters are used to modify the data. They can be clubbed in expression or directives using pipe (|) character. The following list shows the commonly used filters.

Uppercase- Converts a text to uppercase text. Ex.

Enter first name:<input type = “text” ng-model = “student.firstName”>

Enter last name: <input type = “text” ng-model = “student.lastName”>

Name in Upper Case: {{student.fullName() | uppercase}}

Lowercase- Converts a text to lowercase text. Ex.

Enter first name:<input type = “text” ng-model = “student.firstName”>

Enter last name: <input type = “text” ng-model = “student.lastName”>

Name in Lower Case: {{student.fullName() | lowercase}}

Currency- formats text in a currency format. Ex.

Enter fees: <input type = “text” ng-model = “student.fees”>

fees: {{student.fees | currency}}

Filter- To display only required subjects, we use subjectName as filter. Ex.

Enter subject: <input type = “text” ng-model = “subjectName”>

Subject:

<ul>

<li ng-repeat = “subject in student.subjects | filter: subjectName”>

{{ subject.name + ‘, marks:’ + subject.marks }}

</li>

</ul>

Order by – To order subjects by marks, we use orderBy marks. Ex.

Subject:

<ul>

<li ng-repeat = “subject in student.subjects | orderBy:’marks'”>

{{ subject.name + ‘, marks:’ + subject.marks }}

</li>

</ul>

Controllers :-

AngularJS application mainly relies on controllers to control the flow of data in the application. In AngularJS, a Controller is defined by a JavaScript constructor function that is used to augment the AngularJS Scope. Ex

<div ng-app = “” ng-controller = “studentController”>

…

</div>

<script>

function studentController($scope) {

$scope.student = {

firstName: “Rima”,

lastName: “Sen”,

fullName: function() {

var studentObject;

studentObject = $scope.student;

return studentObject.firstName + ” ” + studentObject.lastName;

}

};

}

</script>

Scope is a JavaScript object that connects controller with views. Scope contains model data. In controllers, model data is accessed via $scope object. Ex.

<script>

var mainApp = angular.module(“mainApp”, []);

mainApp.controller(“shapeController”, function($scope) {

$scope.message = “In shape controller”;

$scope.type = “Shape”;

});

</script>

With Angular, we declaratively define our events on our HTML elements, but wire up the code in the controller. This separation makes our application much easier to maintain.

Hope, my blog is helpful to the beginners who are trying to know about AngularJS.