Angular Js – Introduction

Angular Js – Introduction

Angular Js is very popular JavaScript Framework. We can say it a futuristic web standard for web development. It is developed and supported by Google and has a huge vibrant community of users. Angular is in class of frameworks that are called Data Bindings Frameworks. These data bindings frameworks are used to develop SPA or Single Page Applications.

A single page app  do not reload the page and fetches data using AJAX. It is a single HTML page that loads and as user navigates through the page only the URL after “#” is changed. Like if we have a page http://example.com/index.html#about then clicking on contact link will load http://example.com/index.html#contact. See the change in URL after #.

Angular Js is based on MVC or Model View Controller design pattern.

Model is the data behind the app.

View is the graphical representation of the model that user sees.

Controller are set of functions that change the model. They have the logic that says how to change the use interactions to change in the model.

 

These frameworks provide three main solutions

1. Routing  – Updating the part of pages on changes in URL

2. Templating –  Replacement of coding of UI and DOM manipulations  declarative binding of data to HTML templates.

3. Data Bindings – Maintains the synchronization between the Model and the View.

to understand AngularJs we start with a simple example.

Angular Js Hello World exmple
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>


Demo:

you can see the live demo on JsFiddle here : http://jsfiddle.net/regular/mh7pkgvp/

ng-app

First of all in beginning of our HTML page we have added  ‘ng-app’ . This is called ‘directive’ in  Angular JS.

By using this directive we are telling angular JS to be active on this portion of page in this case the whole HTML document.

If we want to enable Angular JS on a specific part of the page such as some DIV tag then we will add this tag in the DIV tag.

In this example  when user will type inside text box, the text will be automatically typed in front of Hello {{name}}

 ng-model and Two Way Data Binding

In angular js we have defined text box’s attribute as  “ng-model”  as ng-model = “text” and below text box we have defined a {{name}} placeholder.

Now Angular will bind state of text box with {{name}}.  Whatever text  we will type inside textbox it or change the value of text box will be reflected inside {{name}}.  This is called Two Way Data Binding . In same way if value of model is changed then Angular JS will change value of text box.  Two way data binding is a great feature of Angular JS.  We will explore this in detail in future articles.

Using ng-show and ng-hide

Let us add an attribute ng-show inside <h1> HTML element like ng-show="sometext"

Live demo can be seen  on Js Fiddle http://jsfiddle.net/regular/f63Lkaye/

In above demo you can see that text Hello will not appear till we type something inside text box and this is due the the attribute that we added inside <h1> tag as ng-show.

The ng-show directive shows or hides an HTML element depending upon the boolean value of ng-show. We can use ng-hide similarly but with opposite functionality.

This is power of Angular JS that with out any programming we have a dynamic application.

AngularJS Filters

Angular JS filter can added to an expression with a pipe sign and a filter. Using filter we can change data on the fly.  Filters can transform data to a new data type and format the data. during this process. Angular Js filter syntax is

{{ expression | filter }}

We can use more than one filter in an expression by chaining them like:

{{ expression | filter1 | filter2 }}

Beside default filters we can create custom filters.

Uppercase and Lowercase filters

You can see the live demo below

 

Code on Js Fiddle is on this link: http://jsfiddle.net/regular/rjhynogk/

Similarly other filter are Date, number and so on.

we can use date filter as follows

Date:

{{ date_expression | date[:format] }}

This will format the date to a string based on requested format.

Number:

{{ number_expression | number[:fractionSize] }}

This filter will format the input  number as string.

Summary:

There are lot more topics to  discuss in Angular JS, This was  a basic introduction to Angular Js, which is a very power full JavaScript Framework.

We have seen basic attributes like ng-app, ng-show etc and the filters like lowercase, uppercase ans so on. In next articles we will explore Angular JS in more detail and will dive into the complex topics of Model, Views, Controllers and $scope. So stay tuned for the next articles.

I hope you would like this series and get new skills and knowledge.