AngularJS

What is it?

AngularJS is a JavaScript framework for building MVC based application.
It is a library written in JavaScript.
It is a made for Single-Page-Application (SPA).

It 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:

Why AngularJS?

It supports MVC:

This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections.
So that each one could be managed more easily.

Data Model Binding:

We don't need to write special code to bind data to HTML controls.

Writing Less Code:

With AngularJS, lesser amount of code we need to write for DOM manipulation.

Hello World

Environment Setup

To work with AngularJS, we need to set-up environment for this HTML page.
Get the CDN or the .js file to make the link to the AngularJS code from https://angularjs.org/.

Copy that CDN for Internet link

Download AngularJS file

We have two ways to set the AngularJS file bind with the page.

Link CDN from Internet

Set the CDN link with the <script> tag.

From Local

Set the physical path of the angular.js file from Local Computer.

First Application

After linking with the AngularJS file with the HTML page, we must use ng-app directive, where we want to put AngularJS code in HTML.
Here we make an AngularJS application.
We can use the expression inside double-curly-braces ( {{ }} ).

AngularJS extends HTML with ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
The ng-bind directive binds application data to the HTML view.
Here is the Hello, World! program of the AngularJS.

AngularJS starts automatically when the web page has loaded.
The ng-app directive tells AngularJS that the <div> element is the "owner" of an AngularJS application.
The ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.

AngularJS Modules

AngularJS supports modular approach.
It is used to separate logics such as; application, controller, services etc.
We can keep the modules different .js file.
Here we will create 2 modules.

index.html

<html>

<html>

mainApp.js

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

controller.js

myApp.controller("studentController", function($scope) {
$scope.var = "alok";

} ) ;

HTML Page

Application Module

Controller Module

Application Module

It used to initialize an application with the controller(s).
We declare an application myApp module using angular.module( ) function.

Controller Module

It used to define the controller.
We declare a controller module using myApp.controller( ) function.
Here we've used application module using ng-app directive and controller using ng-controller directive.
We've imported myApp.js and c ontroller.js in the main HTML page.

Directives

AngularJS directives are used to extend HTML.
These are special attributes starting with ng- prefix.
AngularJS comes with the set of predefined directives.
Developers can create custom directives.
Here are some important AngularJS directives in below table.

Filters

It is used to modify or change data representation in AngularJS.
Also can be used to specify search criteria.
Can be used with expression.
Filters are used after a pipeline ' | '.
Here are some predefined filters in AngularJS.

Here is an example of filters in AngularJS.
We have 2 files, a filter.html and a filter.js file.
Below is the filter.js file.

Below is the filter.html file.

Here the html looks in a browser.
We can filter by entering the searching field.

uppercase

lowercase

no filter

currency

search filter

In a single table, we can make multiple search filters.
Here we made 3 input text field, where we bind all 3 variable with search and gave to filter parameter.

Form Validation

AngularJS improves form filling and validation.
We can use ng-click to handle AngularJS button and $dirty, $invalid, and $error to the validation.
AngularJS provides multiple events which can be associated with buttons.
Followings are supported events we can use in the <button> tag.

ng-click
ng-dbl-click
ng-mousedown
ng-mouseup
ng-mouseover
ng-mouseleave
ng-mousemove
ng-keyup
ng-keydown

Followings are used to track the error.

$dirty: States the value has been changed.
$invalid: States that value entered is invalid.
$error : State exact error.

Here is the example of a Form Validation application using AngularJS.
Some CSS is used to decorate the page, not shown in below picture.
Below picture shows the HTML page of below application.

The javascript file is given below.
Here we have a reset( ) function, where it clears the 3 text fields.

The form validation page looks like below.
Here two buttons for reset and submit.
The text fields are to be valid show the Submit button.

Includes

Using AngularJS, we can embed HTML pages within an HTML page using ng-include directive.
Here is the example of a 2 embedded HTML page within a page.

page1.html

page2.html

AJAX

AngularJS provides $https: control which works as a service to read data from the server.
The server makes a database call to get the desired records.
AngularJS needs data in JSON format.
Here is a example of AJAX using AngularJS.
We have 3 files:

data.txt (JSON data)
ajax.html
ajax.js

This below picture is the json object in a txt file.

Here is the ajax.html page.
It has a table getting the data from data.txt file through AJAX.

We used a $http service along with $scope service.
$http service makes a request to the server, and returns a response.
This service has several methods:

.delete()
.get()
.head()
.hsonp()
.patch()
.post()
.put()

$http.get() reads the JSON data from data.txt file. Here is the ajax.js file.

Below picture is the table got the data from JASON file using AJAX technic.

View / Page Routing

AngularJS supports Single Page Application via multiple views on a single page.
To do this AngularJS has provided ng-view and ng-template directives and $routeProvider services.
We need to add the angular-route.js file to work with these $routeProvider services.
JS application needs a dependency injection.

ng-view:

creates a place holder where a corresponding view (HTML or ng-template view) can be placed based on the configuration.

ng-template

used to create an HTML view using script tag.
It contains "id" attribute which is used by $routeProvider to map a view with a controller.

$routeProvider

is the key service which set the configuration of URLs, map them with the corresponding html page or ng-template, and attach a controller with the same.

This below picture is the main HTML page routing.html.
This page contains a container which will show either of 2 links; showProduct.html & showService.html.

$routeProvider.when defines a url "/addStudent" which then is mapped to "addStudent.htm".
"otherwise" is used to set the default view.
Here is the .js file; routing.js.

This is the result when we open the routing.html page.
Main html page contains 2 HTML page.

id changes

HTML content changes

showProduct.html

showService.html

Services

In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
Services are normally injected using dependency injection mechanism
AngularJS has about 30 built-in services.

$location: Return information about the location of the current web page
$http: To make a request to the server & uses AJAX.
$timeout: Angular's version of the window.setTimeoutfunction.
$interval: Angular's version of the window.setIntervalfunction.
$rout: Used to define routing imformation.
etc..

Custom Services

In AngularJS, we can make our own services.
Controllers & filters can call them as on requirement basis.
There are 2 steps to create custom service.

using factory method (optional)
using service method

Step 1: Using factory method (optional)

Using factory method, we first define a factory and then assign a method to it.

create factory method

Step 2: Using service method

Using factory method, we first define a factory and then assign a method to it.

create a service

Using factory method, we first define a factory and then assign a method to it.

no factory method

create a service

use that service on the controller

Step 3: Write the code in the editor.

Write the .js file, where we creates an app, factory method, service method, and use that service method in the controller.

create a service

create factory method

create application module

use that service

The HTML page contains the angular.min.js, customService.js file.
The button calls the square( ) function.

Here is the costumService.html page looks like in a browser.

Dependency Injection

It is a design pattern in which component are given their dependencies instead of hardcoding them within the component.
This helps in making components reusable, maintainable and testable.
It provides following core components for dependency injection.

value
factor
service
service
provider
constant

value( ):

It is a javascript object and it is used to pass values to the controller during config phase.

factory( ):

It creates a value on demand whenever a service or controller requires.
It uses a factory function to calculate and return the value.

Create a factory "MathService"

service( ):

service is a singleton javascript object containing a set of functions to perform certain tasks.
Services are defined using service() functions and then injected into controllers.

provider( ):

Provider is used by AngularJS internally to create services, factory etc.
Provider is a special factory method with a method get() which is used to return the value/service/factory.

constant

Constants are used to pass values at config phase.
Syntax: mainApp.constant("configParam", "constant value");

Custom Directives

It extends HTML functionality.
A custom directive simply replaces the element for which it is activated.
AngularJS provides support to create custom directives for following type of elements.

Element directives- Directive activates when a matching element is encountered.
Attribute- Directive activates when a matching attribute is encountered.
CSS- Directive activates when a matching css style is encountered.
Comment- Directive activates when a matching comment is encountered.

Here is the custom elements we can use.

The angularJS file contains some steps to create custom directives.
First we need to create the initiate a a custom directive.
Then mention the restrict & template link.

Internationalization

Internationalization (i18n) is the process of developing products in such a way that they can be localized for languages and cultures easily.
AngularJS supports inbuilt internationalization; three types of filters :

currency
date
& numbers.

To achive this features, we need to include the corresponding js according to the India locale of the country.
We need to get the Locale js file from AngularJS official site.
Download js file or use the link.

Download the Locale js file

To achive this features, we need to include the corresponding js according to the India locale of the country.
We need to get the Locale js file from AngularJS official site.
Download js file or use the link.

Locale .js file

Here is the locale file effect on the browser.

Default Locale (USA)

India Locale

after including locale .js file

birendra's

TECH BLOGGER

AngularJS

What is it?

AngularJS is a JavaScript framework for building MVC based application.

It is a library written in JavaScript.

It is a made for Single-Page-Application (SPA).

It 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:

Why AngularJS?

It supports MVC:

This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections.

So that each one could be managed more easily.

Data Model Binding:

We don't need to write special code to bind data to HTML controls.

Writing Less Code:

With AngularJS, lesser amount of code we need to write for DOM manipulation.

Hello World

Environment Setup

First Application

AngularJS Modules

Application Module

Controller Module

Directives

Filters

Form Validation

Includes

AJAX

View / Page Routing

Services

Custom Services

Dependency Injection

Custom Directives

Internationalization