Sunday, November 22, 2015

Introduction of AngulerJS (Tutorial - 1),meaning of MVW,

      

Introduction of AngularJS

  Recently I started learning AngularJS,And it was very difficult for me to find out some good elaborated documents or article or we can say tutorials for beginner on AngularJS.I have referred so many articles and watched tutorials so i decided to step by step help for beginners like me.so that they get complete required heelp from one single channel.Since AngularJS is very rich Framework so I decided to write some posts that will help beginners who want to learn or work on SPA(Single Page Application) using AngularJS.I am Assuming that people who reading this post are aware of some basic concepts of HTML and JAVASCRIPT/JQuery.So lets start with a short but detailed AngularJS post where you will be able to quickly understand the power of AngularJS in the world of web.

         You may heard about MVC/MVVM/MVW(Model View Whatever) or even you may even worked with that in some other Programming language.So MVW is not a concept specific to AngularJS but rather an approach to program architecture which is implemented in variety of programming languages and environments. It depends on the architect to architect that how he wants the architecture of the software and AngularJS provides facilty to design application in Model View and Whatever you want to have.  There are so many topics to cover which we will be looking into one by one in other tutorials, but still I will try to make you familiar with atleast some of the Basic terminologies that I have used here in this part of tutorial.

Difference between MVC and MVW
For MVC, We have Model-View-Controller

if you have anything else other than Controller, that is referred as MVW (sometimes written as MV*)
one of the example is MVW would be MVVM where ViewModel (VM) is used instead of Controller. This was used in WPF and Knockout.js (javascript library)
  
Views
View in an application actually is a part which is rendered in a browser through which user can interact or see whatever data has been requested. In an AngularJS application view is composed of directives, filters and data-bindings. But to make view simple and maintainable we do not put all of our code into the View. This helps us to separate code from view and also makes it easy to write tests for the business logic.

Controller

Controller holds all of our application logic in AngularJS. The Controller controls and prepares the data into the form so that it can be rendered at the View. Functionally what controller actually does is, it collects all of data into the representational form and also takes from view and set into the Model after validating it. The controller is responsible for communicating the server code to fetch the data from a server using Ajax requests and send the data to back-end server from Views.

Model / View Model

The most important and head part of the MVW architecture is Model or View Model . Model is a term which is introduced in AngularJS and we will discuss more on this in other tutorials Model is the bridge standing between Controllers and Views . There can be a controller which we can bind to two or more views. Lets suppose we have a controller assigned for a registration of users, for thispurpose you can have a different view for desktop and another view for mobile.

 Why AngularJS.....?

 There are a lot many front-end frameworks available in the web world like Backbone, Knockout, Ember, Spline etc. and all of them have some pros and cons. But as the tutorial is all about AngularJS so the question arises that Why AngularJS ? So here is the answer to all your question.

  • AngularJS allows you to write basic flow end-to-end testing, unit-testing, ui mocks.

  • You can validate forms and input fields before submitting it without writing a single line of code. 

  • Allows you to control complete dom structure show/hide, changing everything with AngularJS properties.

  • You can create a template and reuse it in application multiple times. 

  • You can bind data to any element in two ways, where two-way actually means changing data will automatically change element and changing element will change the data.

  •  You can directly call the code-behind code in your html.

2 comments:

  1. Honestly..it's a very nice post, soberly written and articulated in such a manner that even a non IT professional or student can understand this..well done keep the spark ablazed...God bless

    ReplyDelete
  2. Thanks for your valuable Feedback....!!!

    ReplyDelete

Protected by Copyscape