Learn AngularJS Series Part One - Introduction

Upendra Pratap Shahi
May 22, 2017
24.8k
0
3
Article

AngularJS is a JavaScript framework (actually a written JavaScript library) and it can be added to an HTML page with a <script> tag. Angular JS is perfect for Single Page Application(SPA), and version 1.0 was released in 2012 by Miško Hevery. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

What you should already know before learning AngularJS:

HTML
CSS
JavaScript(Master of web programming)

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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, tit's time to play with the concept:

I have created a page with MyFirstPageInAngular.html and added reference of AngularJS library and some HTML:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input your name in below text box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter your name here"></p>
<h1>Hello {{name}}!</h1>
</div>
</body>
</html>

Output

Angular JS Directives

What are Angular JS directives?

We can say, if it extends HTML with new attributes it is called Directives.

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

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

The ng-app directive also tells Angular JS that the <div> element is the "owner" of the Angular JS application.

Just like this:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='Upendra'">
<p>My name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>

Output

Now turn to check on UI

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

Just like

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div data-ng-app="" data-ng-init="firstName='Upendra'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
</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 it's time to play with concept:

I have created a page for this,

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 10 + 3 }}</p>
</div>
</body>
</html>

Output

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

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 10 + 3 }}</p>
</div>
</body>
</html>

Output

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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="bgCol='lightgreen'">
<input style="background-color:{{bgCol}}" ng-model="bgCol" value="{{bgCol}}">
</div>
</body>
</html>

Output

Angular JS Numbers

Angular JS numbers are just like JavaScript numbers.

We have created a page for this to help you understand.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=3;cost=10">
<p>Total in INR: {{ quantity * cost }}</p>
</div>
</body>
</html>

Output

We can also achieve the above using ng-bind.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="quantity=3;cost=10">
<p>Total in INR: {{ quantity * cost }}</p>
<p>Total in INR using ng-bind: <span ng-bind="quantity * cost"></span></p>
</div>
</body>
</html>