Angular js

“What is AngularJS?”
As defined on Wikipedia:AngularJS is an open-source JavaScript framework, maintained by
Google, which assists with running single-page applications. Its goal is to augment browser-
based applications with Model–View–Controller (MVC) capability, in an effort to make both
development and testing easier.
“Why is it Called AngularJS?”
Angular means having angles or sharp corners. HTML uses angle brackets. Hence, the name!

“Why AngularJS?”
There are other Javascript frameworks like JQuery, Mootools, Dojo and Backbone.
However to choose AngularJS based on our complex web application like adding
new rows into table dynamically with copy and cut functionality with AJAX features
and also the below mentioned factors were deciding in the choice of the framework.

When NotTo Use AngularJS
AngularJS was designed with data-driven apps in mind.
AngularJS an excellent choice if your app interacts with a lot of RESTful web services.
But if your app needs heavy DOM manipulations where model data is not the
focus, instead you might choose library like jQuery, DOJO.
If you want to develop a web application, basically a game or involves heavy graphics
manipulation, AngularJS is not a good choice.
In short, AngularJS is best if your UI is datadriven.

Two Way Data Binding
Classical Template Angular Templates
What is One-Way Data Binding?
In Common every HTML attribute specific to AngularJS is called directive and has a specific
role in an AngularJS application. Here HTML page is a template and since it is not a final
version and perhaps it rendered by web browser.
The ng-app directive marks the DOM element that contains the AngularJS application.
In the below code we have initialized 2 variables through ng-init directive.
A data binding can be specified in two different ways:
with curly braces: {{expression}}
with the ng-bind directive: ng-bind= “varName”

What isTwo-Way Data Binding?
In the below example , the we have a 2-Way Data Binding, when a model variable is
bound to a HTML element that can both change and display the value of the variable.
Here ng-model directive to bind a model variable to the HTML element that can not only
display its value, but also change it.

AngularJS Expression
Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as
{{expression}}
Angular Expressions vs. JavaScript Expressions
Angular expressions are like JavaScript expressions with the following differences:
Context: JavaScript expressions are evaluated against the global window. In Angular,
expressions are evaluated against a scope
Forgiving: In JavaScript, trying to evaluate undefined properties generates ReferenceError or
TypeError. In Angular, expression evaluation is forgiving to undefined and null.
No Control Flow Statements: you cannot use the following in an Angular expression:
conditionals, loops, or exceptions.
Filters: You can use filters within expressions to format data before displaying it.

Directives & Filters
What are Directives & Filters?
Directives
At a high level directives are markers on DOM element which tells HTML compiler to attach a specified
behavior to that DOM element or even transform the DOM element and its children.
Angular comes with a set of these directives built-in, like ngBind, ngModel, ngRepeat and ngView.
Filters
A filter formats the value of an expression for display to the user.They can be used in view templates,
controllers or services.
AngularJS provides some in-built filters like for search, lowercase, uppercase, orderby and groupby.
Below given an example: – Simple table with ng-repeat directive and search filter.

MVM
AngularJs is MVW
MVW ModelView Whatever?
AngularJS is an MVW framework (Model-View-Whatever) where Whatever means
Whatever Works for You. The reason is that AngularJS can be used both as Model-View-
Controller (MVC) and Model-View-View-Model (MVVM) framework. But what’s important
to us is that we can build solid web apps with great structure and design with minimum
effort.
To Understand more on it here the blog : http://addyosmani.com/blog/understanding-
mvvm-a-guide-for-javascript-developers/

MVC – ModelView Controller
MVC application structure was introduced in the 1970s as part of Smalltalk and now it
became one of the popular Design Pattern.
The core idea behind MVC is that we have clear separation in our code between managing
its data (model), the application logic (controller), and presenting the data to the user
(view).
Let we see that how this design pattern plays an important role in AngularJs.
In Angular applications,

Controller
A controller is a JavaScript function
• contains data
• specifies the behavior
• should contain only the business logic needed for a single view.

Scope
Scopes are a core fundamental of any Angular app. Scopes serve as the glue between the controller
and the view.
•Scope is an object that refers to the application model.
•Scopes are arranged in hierarchical structure which mimic the DOM structure of the application
•Scopes are the source of truth for the application state

Dependency Injection & AJAX Support
Dependency Injection
AngularJS comes with a built-in dependency injection mechanism. Dependency Injection (DI) is a
software design pattern that deals with how components get hold of their dependencies. We can
divide our application into multiple different types of components which AngularJS can inject into
each other. Modularizing our application makes it easier to reuse and configure the components in our
application.
Let us see how we can inject the custom directive into the controller
Directive for IE 8 Select Option Issue

Dependency Injection & AJAX Support
Note: Below I have given how to inject and to use in our presentation layer
Include in your Controller and Presentation Layer

Scope
As we saw a Scope is glue between Model andView.
Essentially, a scope is nothing but a plain old JavaScript object, and that is just a container
for key/value pairs, as follows:
var myObject={name:'AngularJS', creator:'Misko'}
A scope—like other objects—can have properties and functions attached to it.
The only difference is that we don't usually construct a scope object manually.
Rather, AngularJS automatically creates and injects one for us.
In our example, we attached properties to the scope inside the controller:

Every AngularJS application has at least one scope called $rootScope.
$rootScope is the parent of all scopes
All the properties attached to $rootScope are implicitly available to scope 1.
Similarly, scope 2 has access to all the properties attached to scope 1.
Every JavaScript constructor function has a property called prototype which points to an
object.
When you access a property on an object (someObject.someProperty) JavaScript searches for
the property in that object. If it's found, it is returned. If not, then JavaScript starts searching
for the property in the object's prototype.
The prototype property is nothing but another object.
<div ng-app>
<div ng-controller="OuterController">

<div ng-controller="InnerController">

</div>
</div>
</div>

function Bike(color,company){
this.color=color;
this.company=company;
}
Bike.prototype.year=2012; // Bike is a functional object, so it has the `prototype` property
var bike=new Bike ('red',‘Bajaj');
console.log(bike.color); // prints color from bike
console.log(bike.year); // prints year from Bike.prototype
console.log(bike.hasOwnProperty('year')); //returns false

Writing a Primitive to an Object
Our object bike does not have a property year, but Bike.prototype does. When you
try to read bike.year you get the value from bike.prototype. But you can also attach
the property year to bike, like this:
bike.year=2000 //sets property 'year' on bike
console.log(bike.year); // returns 'year' property from bike and NOT from bike.prototype
console.log(bike.hasOwnProperty('year')); //returns true as Bike has 'year' property
Now,When you attach a new property to an object the property is attached to it and not
the prototype. Subsequently when you access the property, JavaScript no longer
consults the prototype because the property is found right there in the object itself.

Writing a ReferenceType to an Object
Let's attach an object called data to Bike.prototype:
Bike.prototype.data={}; //set it to empty object
Now have a look at the following code:
bike.data.engine='rear'; //This does not create a new property called 'data' on bike object
console.log(bike.data.engine); //returns 'rear' and it comes from Bike.prototype
console.log(bike.hasOwnProperty('data')); // false, as bike doesn't have own property
'data‘
Bike.prototype.hasOwnProperty('data'); // 'data' property is created in prototype.

Objects Can Extend Objects
Objects can extend other objects in JavaScript, and this is the key to understanding
AngularJS scope inheritance. Have a look at the following snippet:
var honda=Object.create(bike);
console.log(Object.getPrototypeOf(honda)); //Bike {}
Object.create() creates a new object whose internal prototype property points
to the object specified as the first argument to the function. As a result the honda
object's prototype now points to bike object.Therefore, honda has all the properties
defined in the bike instance.
This a quick overview of prototypal inheritance

Prototypal Inheritance in AngularJS Scopes
The $rootScope object has a function called $new() that's used to create child
scopes. Let's consider the previous example where we nested two controllers and
had one $rootScope.The code is repeated below:
<div ng-app>
<div ng-controller="OuterController">

<div ng-controller="InnerController">

</div>
</div>
</div>

The below diagram, taken from the AngularJS GitHub page, depicts how scopes
inherit each other.

Angular js

More Related Content

What's hot

What's hot (20)

Similar to Angular js

Similar to Angular js (20)

Recently uploaded

Recently uploaded (20)

Angular js