Scribd
Upload
234 views

Angular JS PDF

Angular JS is an open source JavaScript framework developed by Google for building web applications. It allows developers to extend HTML with new attributes called directives to build reusable components. Angular JS uses MVC architecture with models representing the data, views for displaying the data, and controllers for managing the communication between models and views. Angular JS expressions can be written inside HTML using double curly braces or directives like ng-bind to display dynamic data. Controllers are JavaScript functions that are used to manage the models and expose them to views through $scope properties.

Uploaded by

Rahul Gudla
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
234 views

Angular JS PDF

Angular JS is an open source JavaScript framework developed by Google for building web applications. It allows developers to extend HTML with new attributes called directives to build reusable components. Angular JS uses MVC architecture with models representing the data, views for displaying the data, and controllers for managing the communication between models and views. Angular JS expressions can be written inside HTML using double curly braces or directives like ng-bind to display dynamic data. Controllers are JavaScript functions that are used to manage the models and expose them to views through $scope properties.

Uploaded by

Rahul Gudla
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 11

Angular JS

Introduction:

 Angular JS is an open source JavaScript framework by Google to build web applications.

 It can be freely used, changed and shared by anyone.

 AngularJS is perfect for Single Page Applications (SPAs).

 AngularJS is easy to learn.

 Before you study AngularJS, you should have a basic understanding of:

o HTML

o CSS

o JavaScript

 AngularJS version 1.0 was released in 2012.

 Miško Hevery, a Google employee, started to work with AngularJS in 2009.

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

 AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

 AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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

</script>

Angular JS Architecture

MVC stands for Model View Controller. It is a software design pattern for developing web applications.

It is very popular because it isolates the application logic from the user interface layer and supports

separation of concerns.

The MVC pattern is made up of the following three parts:


Model: It is responsible for managing application data. It responds to the requests from view and

to the instructions from controller to update itself.

View: It is responsible for displaying all data or only a portion of data to the users. It also specifies

the data in a particular format triggered by the controller's decision to present the data.

Controller: It is responsible to control the relation between models and views. It responds to user input

and performs interactions on the data model objects. The controller receives input, validates it, and

then performs business operations that modify the state of the data model.

The MVC pattern, in a nutshell, is this:


1. The model represents the data, and does nothing else. The model does NOT depend on the controller or the
view.
2. The view displays the model data, and sends user actions (e.g. button clicks) to the controller. The view can:
o be independent of both the model and the controller; or
o actually be the controller, and therefore depend on the model.
3. The controller provides model data to the view, and interprets user actions such as button clicks. The controller
depends on the view and the model. In some cases, the controller and the view are the same object.

Let's take an address book application as an example. The model is a list of person objects, the view is a GUI window that
displays the list of people, and the controller handles actions such as "Delete person", "Add person", "Email person", etc.

Angular JS Expressions
 AngularJS expressions can be written inside double braces: {{ expression }}.

 AngularJS expressions can also be written inside a directive: ng-bind="expression".

 AngularJS will resolve the expression, and return the result exactly where the expression is written.

 AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

“ng-app” tells AngularJS that this is the root element of the AngularJS application.

If you remove the ng-app directive, HTML will display the expression as it is, without solving it:

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">
//Angular-code
</element>

Module name is optional, specifies the name of a module to load with the application
<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}} //view
</div><script>
var app = angular.module('myApp', []); //application module used to initialize an application with controller(s)
//controller defined in next line
app.controller('myCtrl', function($scope) {
$scope.firstName = "Srikanth"; //model
$scope.lastName = "Reddy"; //model
});
</script></body></html>

The AngularJS application is defined by  ng-app="myApp". The application runs inside the <div>.
The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller. Here it is application controller
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope object.
In AngularJS, $scope is the application object (the owner of application variables and functions).
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directive(s) bind the input fields to the controller propertie(s) (firstName and lastName).
The first argument in module refers to an HTML element in which the application will run
The second argument in module is an array generally contains dependent modules. Without the [] parameter, you are not
creating a new module, but retrieving an existing one.
It is recommended that you load the AngularJS library either in the <head> or at the start of the <body>. This is because
calls to angular.module can only be compiled after the library has been loaded.

Examples for expressions


1)
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">


<p>Total in dollar: {{ quantity * cost }}</p>
</div>

</body>
</html>
2) same example using ng-bind
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">


<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

</body>
</html>
3)
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The full name is: {{ firstName + " " + lastName }}</p>


</div>
</body>
</html>
4) angular objects are like javascript objects
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
</body>
</html>
5) angular js arrays

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>
Or by using bind
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>
6)

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>

AngularJS Expressions vs. JavaScript Expressions


Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.

Angular Directives
AngularJS lets you extend HTML with new attributes called Directives.
There is a set of built-in directive in AngularJS which offers functionality to your applications. You can also define your
own directives.
Directives are special attributes starting with ng- prefix. Following are the most common directives:
o ng-app: This directive starts an AngularJS Application.

o ng-init: This directive initializes application data.

o ng-model: This directive defines the model that is variable to be used in AngularJS.

o ng-repeat: This directive repeats html elements for each item in a collection.

Other directives to work out are


ng-bind, ng-change, ng-blur, ng-checked, ng-class, ng-click, ng-dblclick, ng-focus, ng-init, ng-keypress, ng-keydown, ng-
keyup, ng-style, ng-value, ng-form, ng-mousedown, ng-mouseover, ng-mouseup, ng-mouseleave, ng-mousemove, ng-
mouseenter, ng-repeat

AngularJS Controllers

AngularJS controllers control the data of AngularJS applications.


AngularJS controllers are regular JavaScript Objects containing attributes/properties and functions
A controller is defined using ng-controller directive.
Each controller accepts $scope as a parameter which refers to the application/module that controller is to control.
When you make a controller in AngularJS, you pass the $scope object as an argument. When adding properties to
the $scope object in the controller, the view (HTML) gets access to these properties. In the view, you do not use the
prefix $scope, you just refer to a propertyname, like {{carname}}.
If we consider an AngularJS application to consist of:

 View, which is the HTML.

 Model, which is the data available for the current view.

 Controller, which is the JavaScript function that makes/changes/removes/controls the data.


Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<input ng-model="name">

<h1>My name is {{name}}</h1>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Srikanth Reddy";
});
</script>

<p>When you change the name in the input field, the changes will affect the model, and it will also affect the name
property in the controller.</p>

</body>
</html>
AngularJS Modules

An AngularJS module defines an application. The module is a container for the different parts of an application.
The module is a container for the application controllers. Controllers always belong to a module.
A module is used as a Main() method
The angular object's module() method is used to create a module.
It is also called AngularJS function angular.module
<div ng-app="myApp">...</div>  

<script>  

var app = angular.module("myApp", []);   

</script>  

Here, "myApp" specifies an HTML element in which the application will run.
Now we can add controllers, directives, filters, and more to AngularJS application.

Adding a controller to module


If you want to add a controller to your application and refer to the controller with the ng-controller directive.
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">

{{ firstName + " " + lastName }}

</div>
<script>

var app = angular.module("myApp", []);


app.controller("myCtrl", function($scope) {
$scope.firstName = "Srikanth";
$scope.lastName = "Reddy";
});

</script>
</body>
</html>

Angular Filters
AngularJS Filters
Filter Description
currency Format a number to a currency format.
Ex: Syntax: {{ number | currency : symbol : fractionsize }}
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="costCtrl">
<p>Price = {{ price | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.price = 9.99;
});
</script>
<p>The currency filter formats a number to a currency format.</p>
</body>
</html>

date Format a date to a specified format.


The date filter formats a date to a specified format. The date can be a date object, milliseconds, or a datetime string like
"2016-01-05T09:05:05.035Z". By default, the format is "MMM d, y" (Jan 5, 2016).
Syntax: {{ date | date : format(optional) : timezone(optional) }}
<!DOCTYPE html>
<html>
<script src="../../ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Date = {{ "2016-01-05T09:05:05.035Z" | date }}</p>
</div>
<p>The date can be a date object, milliseconds, or, like in this example, a datetime string.</p>
</body></html>

<body><div ng-app="myApp" ng-controller="datCtrl">


<p>Date = {{ today | date : "'today is ' MMMM d, y" }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>Escape text by using single quotes.</p>
</body>
<body>
<div ng-app="myApp" ng-controller="datCtrl">
<p>Date = {{ today | date : "dd.MM.y" }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('datCtrl', function($scope) {
$scope.today = new Date();
});
</script>
<p>You can write the date in many different formats.</p>
</body>
All the formats can be obtained from
https://www.w3schools.com/angular/ng_filter_date.asp

filter Select a subset of items from an array.


filter can only be used on arrays, and it returns an array containing only the matching items.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul> <li ng-repeat="x in names | filter : 'a'">
{{ x }}
</li> </ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>This example displays only the names containing the letter "i".</p>
</body>
</html>

By setting the ng-model directive on an input field, we can use the value of the input field as an expression in a filter.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul> <li ng-repeat="x in names | filter:test">
{{ x }}
</li> </ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
<p>The list will only consists of names matching the filter.</p></body>
</html>

limitTo Limits an array, or a string, into a specified number of elements/characters.


Syntax: {{ object | limitTo : limit : begin }}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="sizeCtrl">
<ul>
<li ng-repeat="x in cars | limitTo : 3">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sizeCtrl', function($scope) {
$scope.cars = ["Audi", "BMW", "Dodge", "Fiat", "Ford", "Volvo"];
});
</script>
<p>Only the first three items of the array are displayed.</p>
</body>
</html>

lowercase Format a string to lower case.

Number Format a number to a string.


The number filter formats a number to a string.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="nCtrl">
<h1>{{prize | number}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
$scope.prize = 1000000;
});
</script>
<p>The prize is written as a string, but formatted as a number.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="nCtrl">
<h1>{{weight | number : 3}} kg</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('nCtrl', function($scope) {
$scope.weight = 9999;
});
</script>
<p>The weight is written with three decimals.</p>
</body>
</html>

OrderBy Orders an array by an expression.


The orderBy filter allows us to sort an array.
By default, strings are sorted alphabetically, and numbers are sorted numerically.
Syntax: {{ array | orderBy : expression : reverse(true|false) }}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="orderCtrl">
<ul>
<li ng-repeat="x in customers | orderBy : 'name'">

{{x.name + ", " + x.city}}


</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('orderCtrl', function($scope) {
$scope.customers = [
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"}
];
});
</script>
<p>The array items are sorted by "city".</p>
</body>
</html>

Uppercase Format a string to upper case.


Syntax: {{ string | uppercase}}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="caseCtrl">
<h1>{{txt | uppercase}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('caseCtrl', function($scope) {
$scope.txt = "Hello World!";
});
</script>
<p>The text is written in uppercase letters.</p>
</body>
</html>
Advantage of AngularJS
There are a lot of JavaScript frameworks for building web applications. So, it is a genuine question, why to use Angular
JS.
Following are the advantages of AngularJS over other JavaScript frameworks:
o Dependency Injection: Dependency Injection specifies a design pattern in which components are given their
dependencies instead of hard coding them within the component.
o Two way data binding: AngularJS creates a two way data-binding between the select element and the
orderProp model. orderProp is then used as the input for the orderBy filter.
o Testing: Angular JS is designed in a way that we can test right from the start. So, it is very easy to test any of
its components through unit testing and end-to-end testing.
o Model View Controller: In Angular JS, it is very easy to develop application in a clean MVC way. You just have
to split your application code into MVC components i.e. Model, View and the Controller.
o Directives, filters, modules, routes etc.

You might also like