Singsys

Introduction to Angular JS and Reasons for web developers to use Angular JS

Jan 22nd, 2014 3 minutes read

Angular JS

Angular JS is the new JavaScript framework introduced by Google with the aim of making front end development task easier for web developers. AngularJS is a client-side MVC/MVVM framework built in JavaScript, bringing the  helping hand in the world of HTML5. It lets web developers to build maintainable and modern web applications. Developed in 2009 by Miško Hevery and Adam Abrons (Google employees), Angular JS is best fitted for one page web apps.

 

 

It is open source under the MIT license and is entirely the client side framework. AngularJS helps you structure and test your JavaScript code very easily. To get started with angular JS, you need to put few attributes to HTML scripts. These are:

 

1. Add the ng-app directive to the <html> tag:

<html lang=”en” ng-app>

 

 

2. Add the Angular <script> tag to the end of <head> tag:

<script src=”lib/angular/angular.js”></script>
3. Add regular HTML:

<body ng-controller=”UsersListCtrl”>

<h1>Top users</h1>

<ul>

<li ng-repeat=”users in users”>

{{user.name}}

</li>

</ul>

</body>

</html>

 

AngularJS directives are reached through HTML attributes and expressions are evaluated with double-bracket notation.

 

Features of Angular JS:

 

1) Directives
Directives are one of the most compelling and dominant feature of Angular JS. Directives allow us to extend HTML and let you specify how your page should be structured for the data available in a given scope. Angular JS has several directives to help you build excellent web applications. Some of them are –

 

a) ngShow: It uses an expression which returns a boolean to find if the element should be displayed or not.

 

b)  ng-app: This directive tells Angular where it gets to act. A simple code, <html ng-app> is all it needed to define a page as an Angular application.

 

c)  ng-bind: changes the text of an element to the value of an expression.

The code <span ng:bind=”user”></span> will display the value of ‘user’ inside the span.

 

d)  ng-controller: specifies the JavaScript class for the given action. Remember controllers are usually kept in external .js files.

 

e)  ng-repeat: It allows you the create the new set of elements in DOM and creates the very clean loop structures in your page.
<ul>
<li ng-repeat=”users in users”>
{{users.description}}
</li>
</ul>

 

The above code will loop through each user in the collection list.

 

2) Expressions

 

To allow the web developers to easily create web applications Angular JS provides certain expressions and it lets you execute that expressions within your HTML page. Example –

 

<div>2+2 = {{2+2}}</div>

 

3) Data Binding is the most powerful feature of Angular JS. It provides the two way data binding out of the box.  It handles the synchronization between the DOM and the model, and vice versa.

 

Related Posts...

CSSTechnologiesWeb Design

Sep 26th, 2024

Jul 16th, 2024

Jul 11th, 2024