Angular JS

UNIT - III

Angular JS Introduction and its General Features – Core

Features of Angular JS – Angular JS(MVC) Architecture.

INTRODUCTION:
 AngularJS is an open-source web application framework.
 AngularJS is a very powerful JavaScript library.
 It is used in Single Page Application (SPA) projects.
 AngularJS is open source, completely free, and used by thousands
of developers around the world.
 AngularJS (commonly known as “Angular.js” or “AngularJS
1.X“) is a JavaScript-driven open-source front-end web application
methodology majorly maintained by Google as well as a community
of people and enterprises to tackle many of the challenges faced in
developing one-page applications.
 It was originally developed in 2009 by Misko Hevery and
Adam Abrons.
 It is now maintained by Google. Its latest version is 1.2.21.
 AngularJS is a structural framework for dynamic web applications.

General Features
The general features of AngularJS are as follows −

 AngularJS is a efficient framework that can create Rich Internet

Applications (RIA).

 AngularJS provides developers an options to write client side

applications using JavaScript in a clean Model View Controller
(MVC) way.

 Applications written in AngularJS are cross-browser compliant.

AngularJS automatically handles JavaScript code suitable for each
browser.

 AngularJS is open source, completely free, and used by thousands

of developers around the world. It is licensed under the Apache
license version 2.0.

Overall, AngularJS is a framework to build large scale, high-performance,

and easy to-maintain web applications.
Core Features
The core features of AngularJS are as follows −

 Data-binding − It is the automatic synchronization of data

between model and view components.

 Scope − These are objects that refer to the model. They act as a
glue between controller and view.

 Controller − These are JavaScript functions bound to a particular

scope.

 Services − AngularJS comes with several built-in services such as

$http to make a XMLHttpRequests. These are singleton objects
which are instantiated only once in app.

 Filters − These select a subset of items from an array and returns

a new array.

 Directives − Directives are markers on DOM elements such as

elements, attributes, css, and more. These can be used to create
custom HTML tags that serve as new, custom widgets. AngularJS
has built-in directives such as ngBind, ngModel, etc.

 Templates − These are the rendered view with information from

the controller and model. These can be a single file (such as
index.html) or multiple views in one page using partials.

 Routing − It is concept of switching views.

 Model View Whatever − MVW is a design pattern for dividing an

application into different parts called Model, View, and Controller,
each with distinct responsibilities. AngularJS does not implement
MVC in the traditional sense, but rather something closer to MVVM
(Model-View-ViewModel). The Angular JS team refers it humorously
as Model View Whatever.

 Deep Linking − Deep linking allows to encode the state of

application in the URL so that it can be bookmarked. The
application can then be restored from the URL to the same state.

 Dependency Injection − AngularJS has a built-in dependency

injection subsystem that helps the developer to create,
understand, and test the applications easily.
 AngularJS - MVC Architecture

Model View Controller or MVC as it is popularly called, is a software

design pattern for developing web applications. A Model View Controller
pattern is made up of the following three parts −

 Model − It is the lowest level of the pattern responsible for

maintaining data.

 View − It is responsible for displaying all or a portion of the data to

the user.

 Controller − It is a software Code that controls the interactions

between the Model and View.

MVC is popular because it isolates the application logic from the user
interface layer and supports separation of concerns. The controller
receives all requests for the application and then works with the model to
prepare any data needed by the view. The view then uses the data
prepared by the controller to generate a final presentable response. The
MVC abstraction can be graphically represented as follows.
(a) The Model
The model is responsible for managing application data. It responds to
the request from view and to the instructions from controller to update
itself.

(b) The View

A presentation of data in a particular format, triggered by the controller's
decision to present the data. They are script-based template systems
such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

(c) The Controller

The controller 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.
 UNIT - IV

Angular JS Advantages and Disadvantages – Angular JS IDE –

Creating Angular JS Application.

(1) Angular JS Advantages:

 Help in creating single page application in a clean and effective way.
 It helps in data binding that gives rich and solid feedbacks.
 Testing unit is testable.
 Enable reusable components.
 Controllers and purely done on the basis of JAVA script that does
the business processing.

Angular JS Disadvantages:

 JAVA being a plan, application written is not safe.

 This is not degradable. If the user of your application disables
JavaScript, then nothing would be visible, except the basic page.

(2) AngularJS Development Environment

We need the following tools to setup a development environment for
AngularJS:

1. AngularJS Library
2. Editor/IDE
3. Browser
4. Web server

AngularJS Library
To download AngularJS library, go to angularjs.org -> click download
button, which will open the following popup.

Select the required version from the popup and click on download button
in the popup.

CDN: You can include AngularJS library from CDN url

- https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js
Editor
AngularJS is eventually HTML and JavaScript code. So you can install any
good editor/IDE as per your choice.

The following editors are recommended:

 Sublime Text
 Aptana Studio 3
 Ultra Edit
 Eclipse
 Visual Studio

Online Editor
You can also use the following online editors for learning purpose.

 plnkr.co
 jsbin.com

We are using our own online code editor for all the AngularJS examples in
these tutorials.

Web server
Use any web server such as IIS, apache etc., locally for development
purpose.

Browser
You can install any browser of your choice as AngularJS supports cross-
browser compatibility. However, it is recommended to use Google
Chrome while developing an application.
 (3) First AngularJS Application
Let's create a simple AngularJS web application step by step and
understand the basic building blocks of AngularJS.

1. First, create an HTML document with <head> and <body> elements,

as show below.

Example: HTML Template

<!DOCTYPE html>

<html>
<head>

</head>
<body>

</body>
</html>
2. Include angular.js file in the head section (you have learned how to
download angular library in the previous section). You can take a
reference from the CDN also.

Example: Include AngularJS Library

<!DOCTYPE html>
<html>
<head>
<title>First AngularJS Application</title>
<script src= "~/Scripts/angular.js"></script>
</head>
<body>

</body>
</html>
3. Here, we will be creating a simple multiplier application which will
multiply two numbers and display the result. User will enter two numbers
in two separate textboxes and the result will be displayed immediately, as
shown below.

Fir
st AngularJS Application

The following is the HTML code with AngularJS for the above multiplier
example.
Example: First AngularJS Application
<!DOCTYPE html>

<html>
<head>
<title>First AngularJS Application</title>
<script src= "~/Scripts/angular.js"></script>
</head>
<body ng-app >
<h1>First AngularJS Application</h1>

Enter Numbers to Multiply:

<input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" />
= <span>{{Num1 * Num2}}</span>
</body>
</html>

The above example is looks like HTML code with some strange attributes
and braces such as ng-app, ng-model, and {{ }}. These built-in
attributes in AngularJS are called directives.

The following figure illustrates the AngularJS building blocks in the above
example.
 Template
In AngularJS, a template is HTML with additional markups. AngularJS
compiles templates and renders the resultant HTML.

Directive
Directives are markers (attributes) on a DOM element that tell AngularJS
to attach a specific behavior to that DOM element or even transform the
DOM element and its children.

Most of the directives in AngularJS are starting with ng. It stands for

Angular. We have applied ng-app and ng-model directive in the above
example.

ng-app: The ng-app directive is a starting point. If AngularJS framework

finds ng-app directive anywhere in the HTML document then it bootstraps
(initializes) itself and compiles the HTML template.

ng-model: The ng-model directive binds HTML element to a property on

the $scopeobject.

In the above example, we have included ng-model directive to both the

textboxes with different names Num1 and Num2. AngularJS framework
will create two properties called Num1 and Num2 in the scope and will
assign a value that we type into textboxes.

Expression
An expression is like JavaScript code which is usually wrapped inside
double curly braces such as {{ expression }}. AngularJS framework
evaluates the expression and produces a result. In the above example, {{
Num1 * Num2}} will simply display the product of Num1 and Num2.

The following table lists all the important concepts in AngularJS.

Concept Description

Template HTML with additional markup

Directives Extends the HTML with custom attributes and elements

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

Scope A context where the model is stored so that controllers, directives and expressions can access it

Expressions Executes JavaScript code inside brackets {{ }}.

 Concept Description

Compiler Parses the template and instantiates directives and expressions

Filter Formats the value of an expression for display to the user

View what the user sees (the DOM)

Data Binding Sync data between the model and the view

Controller Maintains the application data and business logic

Module a container for different parts of an app including controllers, services, filters, directives which configure
the Injector

Service Reusable business logic, independent of views

Dependency Creates and wires objects and functions

Injection

Injector Dependency injection container