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:

HTML
CSS
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>

Output:

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>

Output:

Now turn to check on UI:

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>

Output:

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 }}