U turn to angular js

Pals,

Its time to switch to trendy framework which have tons of scope in the market which brightens your future. Its not only me, you should also take “U” turn and drive to Angularjs – A google JS framework.

Angularrrrrrrrrrrr, we are coming for you 😉

AngularJS is perfect for SPAs (Single Page Applications)

Before you study AngularJS, you should have a basic understanding of:

  • HTML
  • CSS
  • JavaScript

 

AngularJS History

AngularJS is quite new. Version 1.0 was released in 2012.

Miško Hevery, a Google employee, started to work on AngularJS in 2009.

The idea turned out very good, and the project is now officially backed by Google, with a full time development team.

AngularJS Introduction

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

How to append this framework to my project

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src=“//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js”></script>
(or)
download kit from here and give the path.

AngularJS Extends HTML

AngularJS extends HTML with ng-directives. All ng-something called directives

The ng-app directive defines an AngularJS application.

The ng-model directive binds element values (like the value of an input field) to the application.

The ng-bind directive binds application data to the HTML view.

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.

The ng-init directive initialize AngularJS application variables.

<div ng-app=“” ng-init=“firstName=’John'”>

<p>The name is <span ng-bind=“firstName”></span></p>

</div>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_directives

Note:

HTML5 allows extended (home made) attributes, starting with data-.
AngularJS attributes start with ng-, but you can use data-ng-, to make your page HTML5 valid.

Now do edit the above code like below..

<div data-ng-app=“” data-ng-init=“firstName=’John'”>

<p>The name is <span data-ng-bind=“firstName”></span></p>

</div>

Output is same.

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions binds data to HTML the same way as the ng-bind directive.

AngularJS will “output” data exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example {{ 5 + 5 }} or {{ firstName + ” ” + lastName }}

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_intro_expression

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

<div ng-app=“” ng-init=“quantity=1;cost=5”>

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_expressions

Same example using ng-bind:

<div ng-app=“” ng-init=“quantity=1;cost=5”>

<p>Total in dollar: <span ng-bind=“quantity * cost”></span></p>

</div>

AngularJS Strings

AngularJS strings are like JavaScript strings:

<div ng-app=“” ng-init=“firstName=’John’;lastName=’Doe'”>

<p>The name is {{ firstName + ” ” + lastName }}</p>

</div>

AngularJS Objects

AngularJS objects are like JavaScript objects:

<div ng-app=“” ng-init=“person={firstName:’John’,lastName:’Doe’}”>

<p>The name is {{ person.lastName }}</p>

</div>

AngularJS Arrays

AngularJS arrays are like JavaScript arrays:

<div ng-app=“” ng-init=“points=[1,15,19,2,40]”>

<p>The points are {{ points[2] }}</p>

</div>

Data Binding

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.

{{ firstName }} is synchronized with ng-model=”firstName”.

In the next example two text fields are synchronized with two ng-model directives:

<div ng-app=“” ng-init=“quantity=1;price=5”>

Quantity: <input type=“number” ng-model=“quantity”>
Costs:    <input type=“number” ng-model=“price”>

Total in dollar: {{ quantity * price }}

</div>

Eg: http://www.w3schools.com/angular/tryit.asp?filename=try_ng_binding

Repeating HTML Elements

The ng-repeat directive repeats an HTML element:

<div ng-app=“” ng-init=“names=[‘Jani’,’Hege’,’Kai’]”>
<ul>
<li ng-repeat=“x in names”>
{{ x }}
</li>
</ul>
<div>

The ng-repeat directive used on an array of objects:

<div ng-app=“” ng-init=“names=[
{name:’Jani’,country:’Norway’},
{name:’Hege’,country:’Sweden’},
{name:’Kai’,country:’Denmark’}]”
>

<ul>
<li ng-repeat=“x in names”>
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>

</div>

Notes:

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

Later you will learn how ng-app can have a value (like ng-app=”myModule”), to connect code modules.

The ng-init directive defines initial values for an AngularJS application.

Normally, you will not use ng-init. You will use a controller or module instead.

You will learn more about controllers and modules later.

The ng-model directive binds HTML elements to application data.

The ng-model directive can also:

  • Provide type validation for application data (number, email, required).
  • Provide status for application data (invalid, dirty, touched, error).
  • Provide CSS classes for HTML elements.
  • Bind HTML elements to HTML forms.

The ng-repeat directive clones HTML elements once for each item in a collection (in an array).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s