AngularJs Tutorial Explained in brief-AngularJs Examples and Sample Codes

AngularJs World

What is AngularJS?

AngularJs is a Frame work used to develop Dynamic Web Pages. The AngularJs library Reads in HTML that contain additional information of all tags. It obeys the custom attributes and it binds the input, output parts of the page model.

Why AngularJs?

§ AngularJs is used to organize your web application.

§ It is an open source web application on frame work development.

§ It makes the user to develop the web application easily.

§ It helps to Design your structure and test JAVA SCRIPT code easily.

ABOUT ANGULARJS

« AngularJs is an extension of HTML for web apps.

« It is futuristic frame work for web application development.

« It is the new & advanced concept behind standards of HTML, WEB COMPONENT and Model Driven View.

« It was Invented In 2009 by “MISKO HEVERY” and “ADAM ABRONS”.

« It is used for gaining attraction in industry.

« At present it is used by Vibrant [huge] Community of users.

How to use AngularJs?

i. Include AngularJs Library

ii. Create AngularJs Application

iii. Define Controller:

</div>

iv. Implementation of Controller

Function Ctrl ($scope) { $scope.message=”Hello. Enter your name plz”; }

Tags of AngularJs

Binding:

i. <span ng-bind="{expression}"></span>

Ex: - <span ng-bind="message"></span>

ii. <p> {{message}} </p>

Looping:

i. <ul>

<li ng-repeat="thing in awesome Things">{{thing}}</li>

</ul>

Include Template:

DATABINDING FRAME WORKS:

Class of frame work is called data binding frame works.

The whole purpose of Data Base Frame work is to help creating single web page applications.

It means they’re more general purpose but this is the main use for the screening of single page apps.

i) SINGLE PAGE APPLICATION

A single page application also known as interface of a single page in web application (or) web site that fits on a single web page with the goal providing a more fluid user experience akin to a desktop application.

ii) AJAX

Ajax is the most prominent technique currently being used in AJAX popular LIBRARIES like jQUERY.

iii) JQUERY

It is created to simplify client side scripting of html.

MODEL VIEW CONTROL:

Data Mining Frame works are based on a model view controller concept which is old concept in computer science and it’s really still relevant today, so this is main concept that there is a model which is dated.

Model View Controller can be explained as Software architectural pattern for implementing user interface it divides a given software application into three connected parts.

MODEL:

Model behind the thing that your ship that you are looking on the screen that is like the data behind the application but only the data it is number of behaviors is on prevention logic (or) layout it’s just the data.

VIEW:

View is an element that user sees it’s like graphical presentation up the model and then the user.

USER:

The user interact with the tings on the screen and all those interactions change the model through what called a controller.

CONTROLLER:

The controller is a set of functions, that you know just changing the model and may be they have some logic in the controller about how to translate the user interaction to change the model.

So I Love this Data Binding Framework.

PROVIDE SOLUTION FOR COMPARISONS TO BACKBONE.JS:

Routing: Handling updates to the URL has grain.

Templating: You can express your view in somewhat called a templating language. There are parts of the replaced with things from the model and Data Binding.

Data Binding: Data binding is really that the new part of these in web frame works and what that does it.

It maintains a Synchronization between model and the view the user interface.

THE TOP DATABASE FRAME WORKS ARE:

· ANGULARJS

· KNOCKOUT

· EMBER

· JS VIEW etc..,

Out of above Technologies AngularJs is found to be the best and user friendly Technology as of my research in various books, case studies and personal experience too.

CONTENTS:

1) PHILOSOPHY.

2) BOOTSTRAPPER.

3) NOTABLE DIRECTIVES.

4) TWO WAY DATABINDING.

5) CHROME PLUGIN.

6) LEGACY BROWSER SUPPORT.

7) DEVELOPMENT HISTORY.

PHILOSOPHY:

a) AngularJs is developed for the benefit that declarative programing should be used for binding user interface and write software components.

b) It follows Model View Control (MVC).

c) It extends tradition of HTML to better serve dynamic concepts through Two Way Data Binding.

BOOTSTRAPPER:

Three levels of the Angular Bootstrapper.

a) Creating new injector.

b) Compile service: - The compile service like JAVA, dotNET.

c) Link Phase: - Its helps attaches all the directive scope.

Notable Directives (or) Important Directives:

a) ng-app

Declares element as root element of the application allowing behavior to be modified over custom HTML tags.

b) ng-bind

Changes the text of element to the value of expression. <span ng-bind="name"></span> will display the value of ‘name’ inside the span. Any changes to ‘name’ are emulated (reflected) instantly in the DOM anywhere the variable is used.

c) ng-model

Akin (Similar) to ng-bind, but allows two-way data binding between the view and the scope.

d) ng-class

Allows class attributes to be loaded dynamically.

e) ng-controller

Specifies a JavaScript controller class that appraise (evaluates) HTML expressions.

f) ng-repeat

Instantiate an element once per item from collection.

g) ng-show & ng-hide

Conditionally show or hide elements, which depends on the value of a boolean expression. Show & hide is achieved by setting the Cascading Style Sheet (CSS) display style.

h) ng-switch

Conditionally instantiate one template from a group of choices, depending on the value of a selection expression.

i) ng-view

The base directive responsible for maintaining routes that resolve JSON before clarifying templates driven by specified controllers.

j) ng-if

Basic if statement directive which allow you to show the latter elements if the conditions are true. When the condition is false, the element is removed from DOM. When true, clone of compiled element is re-inserted again.

Chrome plugin

In July 2012, the Angular team built a plugin for the Google Chrome browser called Batarang, that improves the debugging experience for web applications built with Angular. The extension aims to allow for easy detection of performance bottlenecks and offers a GUI for debugging applications. The Chrome extension is not compatible with latest releases of Angular.

Legacy browser support

Versions 1.2 and later of AngularJS do not support Internet Explorer versions 6 or 7. Versions 1.3 and later of AngularJS drop support for Internet Explorer 8.

Development History:

First developed in 2009 MISKO HEVERY & ADAM ABRONS at Brat techLLC.
Software behind on Online JSON STORAGE SWRIVE.
This venture was located at the web domain “GETANGULAR.com”
ABRONS later left the project but HEVERY employee at Google continue to develop and maintain the library with the fellow google employees UGOR MINAR & VOJTA JINA.