How to learn Angular JS in easy way series 1

Tags

, ,

AngularJS is a JavaScript framework, well written JavaScript library, it can be added to an HTML page with a tag. Angular JS is perfect for Single Page Application(SPA), Angular JS version 1.0 is released in 2012. Miško Hevery working in Google and started working in 2009 and gave a release in 2012 . AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

What should you already know before learning the AngularJS:

  1. HTML
  2. CSS
  3. JavaScript(Master of web programming)

We can add Angular reference in our page just like below:

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

AngularJS extends HTML with ng-directives(Backbone of AngularJS). The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, text area) to application data. The ng-bind directive binds application data to the HTML view.

Now, this time have to play with concept:

I have created a page with MyFirstPageInAngular.html and added reference of Angular JS library and some HTML just like:

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

Input your name in below text box:

Name :

Hello {{name}}!

</body>

</html>

image

Output:

image

Angular JS Directives:

What are Angular JS directives?

We can say, extends HTML with new attribute is called Directives.

Angular JS has a set of built-in directives which offers functionality to your applications, Angular JS also lets you define your own directives to use in your applications.

As you have already seen and understand Angular JS directives are HTML tag having ng prefix, ng-init directives initializes Angular JS application variable.

The ng-app directive also tells Angular JS that the

element is the “owner” of the Angular JS application.

Just like:

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

My name is

</body>

</html>

image

Output:

Now turn to check on UI:

image

You can use data-ng- instead of ng-, you want to make your page is HTML valid.

Just like:

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

The name is

</body>

</html>

image

Output:

image

Angular JS Expressions:

Angular JS binds data to HTML using Expressions.

Angular JS expressions can be written in double braces just like : {{ expression }}, we can also write this inside a directive : ng-bind=”expression”.

Angular JS will resolve the expression, and return the result exactly where the expression is written and we can expose this on UI as we want.

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

Example: {{ 10 + 3 }}

or {{ firstName + ” ” + lastName }}

or {{ surName + ” ” + firstName }}

Now time to play with concept:

I have created a page for this:

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

My first expression: {{ 10 + 3 }}

</body>

</html>

image

Output:

image

If you remove the ng-app directive or forgot to use, HTML will display the expression as it is, without solving it. See below example:

HTML:

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

My first expression: {{ 10 + 3 }}

</body>

</html>

image

Output:

image

You can write expressions wherever you want, Angular JS will simply resolve the expression and return the result.

Example: Let Angular JS change the value of CSS properties.

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

</body>

</html>

image

Output:

image

Angular JS Numbers:

Angular JS numbers just like JavaScript numbers.

We have created a page for this to understand.

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

Total in INR: {{ quantity * cost }}

</body>

</html>

image

Output:

image

We can also achieved above using ng-bind.

<!DOCTYPE html>

<html>

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js

<body>

Total in INR: {{ quantity * cost }}

Total in INR using ng-bind:

</body>

</html>

image

Output:

image

Now, it’s your turn and practice with above information and let us glad if you have put your comments and suggestion in article.

In next series we will learn many new things and play with Angular JS.

Thanks for reading and supporting me.

Advertisements