MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

MVC in AngularJS

This article will explain angular Model, View and Controller and how the relation between these three angular components.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

Perhaps you ever heard that angular is MVVM, that’s true. But It’s also true to say that angular supports MVC style of application design. And here, We will talk about MVC in the context of angular application. Much of the time when you’re building application you will need:

  • Model to represent current state of your application
  • View to display the data
  • Controller that controls the relation between Models and Views.

Okay, let’s cover these three components in angular, one by one.

Model

A model in angular can be a primitive type such as string, number, boolean or a complex type such as object. There’s no special class, no special getter or setter method, in short model is just a plain javascript object. This has an advantage if you’re familiar with javascript, because I’m sure you’re also familiar with this type of model.

View

View is what the users see, in angular view is the Document Object Model (DOM), as a web developer, this fact will make you easier to understand angular view. To display the data from controller, you can put angular expression in your view. This expression binds data from model inside your controller. Since angular is two-way data binding the view will update automatically if there’s a model changes from your controller. You don’t need to write additional code manually to achieve this.

Controller

Speaking the concept of controller under MVC pattern, controller is the place where we put our application logic. In angular, controller is simply formed by javascript classes. In this controller we can also call other components to work with. And the most important to explain is, in this controller your model lives.

We have just covered what Model, View and Controller in angular are. Now, how do we actually create those in our code? Don’t worry, we’re going to do that now. But since we will define our model inside controller, we will create our controller first.

Controller creation

Listing 1: Creating first controller

function MyCtrl($scope) {
	// controller code here
}

We just created our first controller, as I mentioned before, controller is a javascript class. Okay, but wait a minute, what is that single argument with dollar sign? It’s called a scope. Each controller has its own scope. Scope is like a glue between controller and view, you need scope everytime you create a controller. This will be easier to grasp when we’re creating model.

Model creation

Model is just plain javascript object, it lives within controller. But this doesn’t mean that you can create model the exact same way you create a javascript variable. To make model available in the view, we need a scope ($scope) as explained previously. Consider following example:

Listing 2: Create some type of models

function MyCtrl($scope) {
	// model called ‘greeting’ which is a string
	$scope.greeting = “Hello, Angular is awesome!”;
	
	var users = [
{name: “John Doe”, point: 45 }, 
{name: “John Nash”, point: 85}, 
{name: “Johny”, point: 55}
];

	// model called ‘user’ which is an array of objects
	$scope.users = users;
}

In the above code, we create our first model called ‘greeting’ which is a string, we also create a model called ‘users’ which is an array of objects. Because we want the model available to be accessed by our view, we’re making each model as a property of $scope.

Putting it together into the view

Now that we have our controller set up and models defined, we want to display the data to the user. To do that we will create a view. Since view is the Document Object Model we write the view as if we were writing plain html with addition of expression. Consider the following

Listing 3: View

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Welcome to AngularJS</title>
</head>
<body>
	<div ng-controller=”MyCtrl”>
		<h1>{{greeting}}</h1>
		<ol>
			<li ng-repeat=”user in users”>{{user.name}} - {{user.point}}</li>
</ol>
	</div>


<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>
<script>
function MyCtrl($scope) {
	// model called ‘greeting’ which is a string
	$scope.greeting = “Hello, Angular is awesome!”;
	
	var users = [
{name: “John Doe”, point: 45 }, 
{name: “John Nash”, point: 85}, 
{name: “Johny”, point: 55}
];

	// model called ‘user’ which is an array of objects
	$scope.users = users;
}
</script>
</body>
</html>

The first thing we do in our view is calling ‘ng-app’ directive. In our example code we put ‘ng-app’ in html tag, this means we tell angular to handle the entire page as angular application. If you only want certain part of your page treated as angular application, not the entire page, you can put ‘ng-app’ directive somewhere in div element or other element instead of putting it on top of html tag. Keep in mind, ‘ng-app’ directive is always required in order angular to initialize your application automatically.

The next thing we do in our view is telling angular which controller to use. Remember that we have created a controller called ‘MyCtrl’ previously. So, using ng-controller directive we ask angular to use ’MyCtrl’ controller, like this <div ng-controller=”MyCtrl”></div>. Now begin from that div containing ng-controller directive until its closing div tag will have new scope of MyCtrl controller. We can communicate to the controller, like display data from model using expressions.

To display data from our model in controller, we put expression to our view. In the example code we have {{greeting}}, this is telling angular to display model called greeting from the corresponding controller. Remember when defining our model greeting we use $scope.greeting, and now when we want to display its value from the view, we don’t need to write like this {{$scope.greeting}}, this won’t work.

Displaying model as single data is fine, but how do we display model that is an array? Another model we have in our controller is ‘users’ which is an array of objects. To display each item in that array we won’t need to repeat writing expression for each items. We will use a built in angular directive, ‘ng-repeat’. So, you can see in the example code there’s something like this

Listing 4: Using ng-repeat directive to display an array of items from model

<ol>
<li ng-repeat=”user in users”>{{user.name}} - {{user.point}}</li>
</ol>

What it does is telling angular that each item in ‘users’ model assigned to user, and then display ‘user.name’ and ‘user.point’. Angular will copy the li element for each item in users. In other words, that single line of code will display each item from ‘users’ model as an ordered list element. Because we have three people in our ‘users’ model, that code will result:

  1. John Doe - 45
  2. John Nash - 85
  3. Johny - 55

We don’t need to repeat writing li element for each items, just call ‘ng-repeat’ directive and angular will repeat for us.

Expression at a glance

Working with view will deal a lot of expression, up to this point we have used several expression to display data from model. But, that’s not the only capability of an expression. Think expression as a javascript-like snippet, it can do some math calculation like {{ 3+2 }} will result 5. It also can display a string {{ “Hello” }}, there’s more you need to learn about expression in detail which is beyond the scope of this article, you can always open the angularjs documentation.

More appropriate way to create controller

Now we understand how to use controller to define model that contains our data. And we use $scope as a glue between controller and view. We have also created our simple view to display the data from controller, and use ng-repeat to display an array of items from model. But in real application development, that example of controller creation is rarely used. The more appropriate way to create controller is to attach it to an angular module.

Previously, we initialize our angular application using ng-app directive with no value. We now add a value ‘firstApp’ to ng-app directive. This tells angular to use module named ‘firstApp’. We define firstApp using ‘angular.module’ from our script. like this

Listing 5: Defining an angular module

var myApplication = angular.module(‘firstApp’, []);

The empty array in as second parameter can be filled with list of dependency we want to use in our module. In this example we leave it as an empty array since we won’t need any dependency.

Then, to create a controller we do it like this

Listing 6: Create controller appropriate way

// create controller
myApplication.controller(‘MyCtrl’, function($scope) {
	// model called ‘greeting’ which is a string
	$scope.greeting = “Hello, Angular is awesome!”;
	
	var users = [
{name: “John Doe”, point: 45 }, 
{name: “John Nash”, point: 85}, 
{name: “Johny”, point: 55}
];

	// model called ‘user’ which is an array of objects
	$scope.users = users;
});

So, we can now see the updated code of listing 3 as follows

Listing 7: Updated view code

<!DOCTYPE html>
<html ng-app=”firstApp”>
<head>
  <title>Welcome to AngularJS</title>
</head>
<body>
	<div ng-controller=”MyCtrl”>
		<h1>{{greeting}}</h1>
		<ol>
			<li ng-repeat=”user in users”>{{user.name}} - {{user.point}}</li>
</ol>
	</div>


<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>
<script>
// define an angular module
var myApplication = angular.module(‘firstApp’,[]);

// create controller
myApplication.controller(‘MyCtrl’, function($scope) {
	// model called ‘greeting’ which is a string
	$scope.greeting = “Hello, Angular is awesome!”;
	
	var users = [
{name: “John Doe”, point: 45 }, 
{name: “John Nash”, point: 85}, 
{name: “Johny”, point: 55}
];

	// model called ‘user’ which is an array of objects
	$scope.users = users;
});
</script>
</body>
</html>

Conclusion

When building angular application you will need some of Model, Controller and View, and these three components are related to each other in our angular application. Thanks for reading, if you have any question don’t hesitate to leave a comment!



A passionate and visionary web developer who falls in love with web technologies. Always excited to learn more, just like you.

What did you think of this post?
Services
Know how to keep MrBool Online
SUPPORT US
SUPPORT US
With your help, we can keep providing free content and helping you to be a better professional
support us
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login