TrinityTuts

Introduction to Angular JS

Last updated on July 31st, 2016 at 11:13 am

Angular JS is new JavaScript library. Angular extends HTML with new attributes and makes it more responsive and efficient to user actions. It is mainly used for single page web application.

Official Website: angularjs.org

In this post and some upcoming post i am going to cover some basic and important topics of Angular JS to help you to create your web application more User Friendly and Fast. Now in this post i explain some basics of Angular and show some example to help you understand.

Some features of Angular JS i like

Angular JS is very easy to implement in your project. You need to add angular script in your HTML code like this

<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	// Your Stuff
</body>
</html>

Angular JS extends HTML with ng-directives. Here are some common directives which we use in our app

First Example:

<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="">
		<p>Name: <input type="text" ng-model="name"></p>
		<h2 ng-bind="name"></h2>
	</div>
</body>
</html>

In above code i create my first app. ng-app (defines once in whole app), after that i add ng-model in input field to get user inserted data as per definition, ng-bind is used to get data from model and set in html.

{{ expression }} : is also used to bind data in html as shown bellow example. You also perform

<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="">
		<p>Name: <input type="text" ng-model="name"></p>
		<h2>{{name}}</h2>
	</div>
</body>
</html>

Variable in Angular JS

ng-init: is used to declare variable, init automatically initialize variable as shown in below example

<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="">
		<div ng-init="myVar = 2"> {{ myVar }} </div>
	</div>
</body>
</html>

If you want to add another variable in you need to add semi colum(;) and continue

<div ng-app="">
	<div ng-init="myVar1=2;myVar2=5"> {{ myVar1+myVar2 }} </div>
</div>

Angular JS Object

Angular also support object like javascript

<div ng-app="" ng-init="person={name:'Aneh Thakur'}">
	<p>The name is {{ person.name }}</p>
</div>

Angular Array

Array are very easy to declare in Angular, it as same as in javascript or jQuery

<div ng-app="" ng-init="person=['Aneh', 'thakur']">
	<p>The name is {{ person[0] }}</p>
</div>

Example:

<html>
<head>
<title>Angular JS</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="">
		Value 1: <input type="number" ng-model="num1">
		Value 2:    <input type="number" ng-model="num2">
		Total in dollar: {{ num1 * num2 }}
	</div>
</body>
</html>

Angular JS Repeat

Angular ng-repeat is used to create dynamic data eg. dynamically genarate list, order list etc.

<html>
<head>
<title>Angular JS Controller</title>
<!-- Add your angular here //-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
	<div ng-app="" ng-init="lists=['first','second','third']">
	  <ul>
		<li ng-repeat="list in lists">
		  {{ list }}
		</li>
	  </ul>
	</div>
</body>
</html>

I continue post my new post about Angular JS, stay tune to learn.

🙂