Subscribe via RSS Feed

AngularJS Features and How It works with MVVM

May 26, 2015 0 Comments

AngularJS is a powerful JavaScript framework to create rich web application. It provides options to write client side application in Model View Controller format. Application written in AngularJS is cross-browser compliant. It has capability to create Single Page Application in a very clean way and also provides reusable components. It is open source framework and used by thousands of developers around the world. Nike Air Max 2016 Goedkoop Large scale web applications can be made with Angular and it is easy to maintain.

Important features of AngularJS

  • Data-binding: It is the automatic synchronization of data between model and view. Cheap Nike Air Max Shoes UK Angular supports two-way data binding.
  • Routing: Router switches views and assign controller for a particular view.
  • Controller: These are JavaScript functions bound to a particular scope.
  • Templates: Templates are written with HTML that contains Angular-specific elements and attributes. Fjallraven Kanken Kids UK Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
  • Scope: Scope works as a glue between controller and view. These are objects that refer to the model.
  • Directives: Directives are markers on DOM elements (such as elements, attributes, css etc.), used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel, ngRoutes…).
  • Services: AngularJS services are singleton objects which are instantiated only once in the application.
  • Filters: Filters format the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.
  • Dependency Injection:Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested.
  • Model View Whatever: MVC is a design pattern for dividing an application into parts (Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The AngularJS team refers it humorously as Model View Whatever. There is many-to-one relationship between View and ViewModel means many View can be mapped to one ViewModel.

 

MVVM or Model-View-ViewModel

MVVM supports two-way data binding between view and View model. This enables automatic propagation of changes, within the state of view model to the View. The view model uses the observer pattern to notify changes in the view model to model.

  • Model : The Model defines what and how the data can be changed and manipulated. It actually refers to the controllers in AngularJS.
  • View : The View is responsible for displaying the data that is supplied by the controller as result. It represents UI components.
  • View Model : The View Model is responsible for exposing methods, commands, and other properties that helps to maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself.

MVVM Example

So far we have discussed AngularJS features and MVVM. Now let’s move to an example. We have taken an example that adds two numbers either or. The files are

  • index.html
  • view.html
  • script.js

index.html [javascript] <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Single Page Application using Angularjs</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script> <script src="https://code.angularjs.org/1.4.1/angular-route.min.js"></script> <script src="js/script.js"></script> </head> <body ng-app="myApp"> <div ng-controller="mainController"> <div ng-view> <!–This DIV loads templates depending upon route.–> </div> </div> </body> </html> [/javascript] view.html [javascript] <h3>Angular MVVM</h3> <div> <input type="text" ng-model="firstno" placeholder="First No." ng-change="calc()" /> </div> <br /> <div> <input type="text" ng-model="secondno" placeholder="Second No." ng-change="calc()" /> </div> <br /> <div> Sum of two numbers={{sum}} </div> [/javascript] script.js [javascript] var app=angular.module(‘myApp’,[‘ngRoute’]); app.config(function($routeProvider){ $routeProvider .when(‘/’,{ templateUrl: ‘view.html’, controller:’mainController’ }); }); app.controller(‘mainController’,function($scope,$route){ //Controller code for mainController $scope.calc=function(){ var num1=(parseInt($scope.firstno)/1)>0?parseInt($scope.firstno):0; var num2=(parseInt($scope.secondno)/1)>0?parseInt($scope.secondno):0; $scope.sum=num1+num2; }; }); [/javascript] In view.html a function is triggered on change of the textboxes or view’s state. The function or calc() is defined in the controller assigned to the view. In calc() data i.e. two numbers are travelling from view to model. goedkoop nike air max 2016 After that they are being processed and transferred from view model to view which is resulting in change of the view’s state. nike tn pas cher This process in the middle is conducted by view model that exposes methods, commands and triggers the events in the view itself. Reader can download the complete source code for Angular MVVM from here. If you find this article about JavaScript classes and Angular.js Service helpful, you can connect us in Google+ and Twitter.

Leave a Reply

You must be logged in to post a comment.