Programming Concepts Help: Learning AngularJS Part 2: Model View Controller

Here is Previous Part of this series:

Learning AngularJS Part 1: Introduction to AngularJS

So here we are with the second part of the series learning AngularJs guide for beginners. If you have not read the first Article I strongly recommend you to see the first article of the series Introduction to AngularJS

In this article we are going to see Models Views and Controllers and will see model part of the application also called View Model or $scope in details. It is a really important part of AngularJs.

View Controller and Scope

Views

The AngularJS application has a View which is the part rendered in a browser, it is the way to show the data to users. View uses the directives, filters and data-bindings. But to make view simple and easy to maintainable we do not put all of our code into these View. Separating code from views also make it easy to write tests for the business logic.

Controller

We put all of our logic to container called controller in Angular. The Controller controls and prepare the data into the form so it can be rendered at the View. So Controller actually transforms the bunch of data into the representational form and also take from view and set into the Model after validating it. The controller is responsible for communicating the server code to fetches the data from a server using Ajax calls and send the data to back-end server from Views.

Scope / View Model

The most important part of the architecture is $scope or Model or View Model. It is the actual link between Controllers and Views. There can be a controller which we can bind to two or more views. Like controller for a registration form can have a different view for desktop and another view for mobile. In real Controller has no information about the Views and similarly View is independent of logic implemented or data present in the Controller. $scope acts as the communication tunnel between the Views and Controller.

First Code Example

We will try to implement a simple demo, so it becomes more easier to understand the concept of View Controller and scope. In this simple example we list down the Users. You will definitely find very easy to implement it.

Here is the code of View:

<div ng-controller="MyFirstController">
    <h2>List of User</h2>
    <ul>
        <li ng-repeat="user in Users">
            {{user.firstName}} {{user.lastName}} live in {{user.city}}
        </li>
    </ul>
</div>

Here we are using some AngularJS directives we will see these directives in later articles. Just to make it understand we are telling view that you expect data from this controller using ng-controller directive. It is not necessary to declare a controller here we can set it at run-time with routing.

Now here is the controller:

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

function MyFirstController($scope) {
    $scope.Users = [
        {firstName: 'Nico',lastName:'braga', city:'Karachi' },
        {firstName: 'Bob',lastName:'Rita', city:'Lahore' },
        {firstName: 'John',lastName:'Smith', city:'New York' },
    ];
}

Here is demo fiddle, you can change and practice over it.

Here we initialize an angular module application myApp and then added a controller to it. This controller contains a list of users. Then we access the controller and show the list of user in HTML View.

So this was the architecture use in Angular, It is really easy to maintain and much cleaner than ordinary dynamic application code. In next article I will try to cover directives filters and data bindings. Please provide your valuable feedback by comments and let me know if any particular topic you want to see in this series. Don't forget to share it with your friends.

Here is Next Part of this series: