Angular Js for Beginners
Angular Js for Beginners
Angular JS is a JavaScript framework. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions. 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:
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 ng-bind.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”, []); 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.
