Beginner’s Angular JS Introduction Guide

It is simple Beginner’s Angular JS Introduction Guide .In Beginner’s Angular JS Introduction Guide blog I would like to give brief angular js introduction and how to work in it.

Beginner’s Angular JS Introduction Guide

Angular js is javascript framework that is used to build single page application with MVC. It is developed by google.Application build in angular js provide direct output without refreshing the page.

Download Angular Js

Angular js is open source.You can download it from their site. I provide link below to download it from their site.
Download Angular js
Important Points.
1.It can be added to HTML page with script tag.
2.Its totally free and open source.
3.Therefore,to work with angular js basic knowledgwe of HTML,CSS and javascript is required.
4.It is easy to learn and use like javascript.
5.Its expression is written in {{ }} brackets.

Angular js is Javascript Framework

It is javascript framework and its library written in js file.

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

To work in angular js two steps are required:

  • Firstly,add its reference to angular script.
  • Secondly,add ng-app directive somewhere in HTML

Directives in Angular js

ng-app directive defines angular js application.
ng-model binds the value of HTML control to application data.
ng-bind binds application data to HTML view.

Benefit of angularjs

  1. Two way binding i.e change to model update view and vice-versa.
  2. Testing
  3. Dependancy injection
  4. Model view controller(MVC)
  5. Directives
  6. Filters
  7. scopes

Examples:

Beginner's Angular JS Introduction Guide
Beginner's Angular JS Introduction Guide


What is Module

In angularjs module defines an application.So, defines module in separate js file and name them as per the module.js file.Controller always belongs to module.Module is a container for different part of apllication i.e. controller,directive,filter etc.
Detailes example of module and how to create module is shown below:

How to create module:

It can be created using method called angular.module().
Beginner's Angular JS Introduction Guide module

How to add controller to module

Controller can be added by using ng-controller directives.

Beginner's Angular JS Introduction Guide
Beginner's Angular JS Introduction Guide

Modules and controller in file

In this example we put module and controller file in .js file.
Beginner's Angular JS Introduction Guide


Scope

The scope is binds the HTML and Javascript part i.e view and controller.Hence,scope is a javascript object that is available for both view and controller.
When use a controller in an angular js,then you pass the $scope arguement as an object.Hence,scope is an javascript object with both properties and value.

Beginner’s Angular JS Introduction Guide
Beginner’s Angular JS Introduction Guide


Filters

Filters used to transformation or modification of data.It can be used with expression and directives.
To apply filter use the pipe(|) character.
For eg.- {{expression |filtername:parameter}}
Filters can do 3 different things:Sorting,Format and filter data.
Following filters used in data transformation:

    1. Currency Filter-Format the number into currency format.

EXAMPLE:
Beginner’s Angular JS Introduction Guide
Beginner’s Angular JS Introduction Guide

  • Lowercase -format the string into lower case.Similarly,Uppercase filter is apply.

EXAMPLE:

Beginner’s Angular JS Introduction Guide
Beginner’s Angular JS Introduction Guide

  • OrderBy:

To sort the data in angualr use OrderBy filter.You can set data in ascending or descending order by using following examples.
You can set reverse TRUE/+ and FALSE/- to sort the data in ascending and descending order respectively.
Let’s see eg:-
Syntax:

{{orderBy_expression |orderBy:expression :reverse}}

Example

  • Filter

Filter selects an subset of items from an array.If you want to search particualr item from an list you can use filter Filter.
Syntax:

{{filter expression | filter:expression }}

Example


Services in AngularJS

A service in angularjs is simply an object that provide an some sort of services.It has about 30 in-built services.Following services use in angularjs :-

  • $location
  • $interval
  • $timeout
  1. $location service
  2. It provide the information about Url of current webpage :
    Example:

  3. $timeout service
  4. It runs a function after a specified number of timeperiod.
    Example:

  5. $interval service

It runs a function after every specified milliseconds as shown in example below:


Routing in Angularjs

If you want to route your application to different page then use ng-route module.
If want to navigate to different pages in your application but also want application to be SPA i.e no page reloading.Then, use ng-route module.
Example