AngularJS Introduction

AngularJS is another JavaScript framework for developing dynamic Web apps. As we know HTML's are getting used for creating static content and the frameworks like AngularJS, KnockoutJS, ember etc. are being used to make the developers job easy (e.g data binding, event handling are easier with these frameworks) and library like JQuery helps us in manipulating the DOM easily.

So let's talk little bit more about AngularJS.

AngularJS uses HTML as a template and decorate it with directives and expression and teaches the browser new syntax of handling it.

For Example:

  • Data binding, as in {{}}.
  • DOM control structures for repeating, showing and hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

 

Where we can use AngularJS?

AngularJS is build considering CRUD(Create, Read, Update and Delete) kind of application in mind, so AngularJS better suits for CRUD kind of Web Application and you know most of the web applications are CRUD applications.

 

How AngularJS helps in developing Web Application or What benifits you can get from AngularJS?

  •  It helps to decouple DOM manipulation from app logic. It is easier to manipulate DOM and handling events with help of directives and expression in AngularJS.
  • Basically it helps to keep UI and UI logic seperate and due to that testabilty of the code increased.
  • With AngularJS your client side code is completely seperate from the server side code, That means server side and client side code can go parllely.
  • Helps you to write reusable code.

 

Now let's see how AngularJS work with simple example?

app.js

'use strict';

var helloApp = angular.module('HelloWorlApp', []);
    helloApp.controller('helloWorldController', function helloController($scope){
        $scope.hello="Hello! You just made your first AngularJS page!";
     }
   );

 

index.html

<!doctype html>
<html lang="en" ng-app="HelloWorlApp">

<head>
  <meta charset="utf-8">
  <title>Your First AngularJS page</title>
   <script src="../lib/angular/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="helloWorldController">
    {{hello}}
</body> 

</html>

Below image describes how the AngularJS divides each part of the UI application (i.e. Template, Model and View).

 

Work flow of Application
AngularJS App Flow

Let's discuss directives being used in this simple example:

ng-app: This directive is used to bootstrap the application and placed near to the root element of the page (i.e. either in <body> or <html> tag). And the name "HelloWorlApp" can be seen in app.js file angular.module api.

var helloApp = angular.module('HelloWorlApp', []);

 ng-controller: This directive attach controller class to the view which helps in binding data and event handling of UI.

helloApp.controller('helloWorldController', function helloController($scope){
        $scope.hello="Hello! You just made your first AngularJS page!";
     }

Happy learning AngularJS. I will keep adding more article on AngularJS1.x and AngularJS2.

Add a comment