Angularjs

AngularJS Features


The most important feature of Angular JS framework is to develop client side SPA(Single Page Application). The concept of SPA is whenever user navigating to a new page in single page application Angular JS prevents the entire page getting loaded instead, it loads only the related template thus updating the same page with a different view.

Single page applications can be developed by using <ng-view> directive and template features of Angular JS.We’ll discuss these in upcoming posts with more details.

Following are the Angular JS core features.Let’s discuss them one by one in detail.

Angular JS MVC Framework

Model View Controller (MVC) is a design pattern which splits up different aspects of Software Application Development.

MVC is one of the core features of Angular JS, where it separates the presentation logic from business logic and presentation state. Hence supports the creation and maintenance of elements of the web page independent of each other.

Angular JS MVC Framework

VIEW

The view is something that user can see and interact with it also called as presentation layer of MVC. For example, when user login into some “XYZ” website he needs to submit his login credentials through the view.

MODEL

Presentation state and data of an element are stored in a model.Model data is something that is defined in the controller. For example, user details like ‘username’ and ‘password’ are stored in a model.

CONTROLLER

The controller handles business logic and acts like a glue between VIEW and MODEL. Any changes in View are reflected in the Model and vice versa. Thus enforcing the two-way data binding.

Understanding MVC:

<!DOCTYPE html>
<html>
<head>
<title>My simple web page</title>
</head>
<body ng-app="myApp" ng-controller="myController" ng-style="bodyStyle">
<input type="text" ng-model="inputText" ng-style="textStyle" /><br><br>
<div>
 {{inputText}}
</div>
</body>
</html>
var app = angular.module("myApp", []);
app.controller("myController", ['$scope', function($scope) {
  $scope.inputText = "Hello my first controller!!!";
  $scope.bodyStyle = {    
    'text-align': 'center',
    'margin': '20px'
  };
  $scope.textStyle = {
    'color': 'red',
    'font-size': '50px',
    'font-style': 'italic'
  };

}]);

Try it!

Here we created simple input text boxdiv elements and controlling the div block content with input text box content i.e, div block content will be changed according to the content of input text box.

So, wondering how is it possible??? Yes, this can be done with Angular JS “two-way data binding“. Before proceeding further let’s understand some core concepts of Angular JS.

ng-app 

A directive used to initialize the angular application and usually applied on <html> or <body> elements.It is auto bootstrapped by the application.

ng-controller

A directive used to control views(content) of the web page.It should be registered with the angular application.We can have multiple controllers to control its corresponding views it promotes maintainability and debugging easy.

$scope

This is the Angular JS built-in service and all built in services in AngularJS must be prefixed with ‘$‘. This service is responsible for binding the View to Model and it is initialized whenever passed as an argument to the controller.

ng-model

A directive applied to input controls.The variable assigned to this attribute is used for binding with model data i.e, defined on $scope object.

Whenever the variable changes on $scope object it will be reflected on input control element and vice versa.This is called two-way data binding.

Now let’s examine our example

  • Angular application module is named as “myApp
  • Controller named “myController” is registered with “myApp” application through controller function which basically accepts two arguments first one is controllers name and the second one is callback function which is responsible for handling business logic.
  • inputText” is our ng-model variable that is defined on $scope object in the controller with “Hello controller” message.
  • {{}}‘ is the expression in Angular JS.Here we had given ng-model variable “inputText” to the expression hence it will be evaluated and displayed in div
  • Whenever the “inputText” variable’s value changes then div content will be changed automatically to the inputted value.

Conclusion: Input text box and div are view elements and inputText on $scope object is the model and these two are bonded using controller’s $scope object.