Angular JS Tutorial – MVC and MVVM Design Patterns
In the first part of a series on Angular JS tutorials, the author walks through some design patterns.
Join the DZone community and get the full member experience.
Join For FreeAngular JS is one of the fastest growing javascript framework. And it is not surprising – we may use MVC and MVVM design patterns that are essential to build modern websites at the present time. This framework let's us use such features as data binding, controller, deep linking, form validation, communication with server, directives, localization and so on. Today I decided to start a new series of articles on Angular JS. This is our first lesson.
MVC and MVVM Design Patterns With Angular JS
MVC – Model-View-Controller
The Model-View-Controller design pattern defines objects in an application in one of three roles: Model, View, or Controller. The pattern defines not only the roles objects play in the web application, it defines the way objects communicate with each other. Each of the three types of objects is separated from the others by abstract boundaries with objects of the other types across those boundaries. In short: the Model is data, the View represents this data, the Controller is link between the Model and View.
MVVM – Model-View-View Model
MVVM is a refinement of the MVC design and the ViewModel in MVVM is used for the simplification of Presentation Separation. In the MVVM, the logic is stored in the presenter and the View is completely isolated from the Model. While the presenter isn’t aware of the View, the View is aware of the presenter – the presenter in MVVM is used to represent an abstract view of the user interface. A passive view means that the View doesn’t have any knowledge of the Model. In the MVVM design pattern, the View is active and contains behaviors, events and data binding information. Note that the view in MVVM is not responsible for managing the state information – the view is rather synchronized with the View Model. The ViewModel in MVVM is responsible for presentation separation and exposes methods and commands to manage the state of a view and manipulate the Model.
From Theory to Practice
In order to more easily understand the material, many people prefer to study practical tasks in parallel with the theory. I will do this too.
I also want to note that Angular JS is often used in conjunction with the Bootstrap framework. The reason is that native Angular JS directives are based on Bootstrap’s markup and CSS. As a result no dependency on jQuery or Bootstrap’s JavaScript is required. At the same time, we can easily create the html markup for our pages using the Bootstrap.
Angular JS Installation
In order to use the Angular JS in our web application, first we need to download it (angular.min.js (v1.5.0)). Next, we’ll just connect this library in our code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
or
<script src="js/angular.min.js"></script>
Angular JS Initialization
ngApp directive is used to declare a root of our angular application. It can be placed in any HTML tag within the BODY tag, in case if we need only a part of our page be considered as Angular-application. But usually we declare it in HTML tag:
<html ng-app>
This initialization is called – automatic initialization.
After the page is loaded, Angular looks for the ngApp directive (which indicates the root of your application). If the ngApp directive is found then Angular will: load the module associated with the directive, create the application injector and compile the DOM treating the ngApp directive as the root of the compilation.
In addition to automatic initialization, there is also manual initialization (in case if you need to have more control over the initialization process). Below is example of manual initialization:
<!doctype html>
<html>
<body>
<div ng-controller="ExampleController">
10 + 5 = {{exampleSum}}
</div>
<script src="js/angular.min.js"></script>
<script>
angular.module('exampleApplication', [])
.controller('ExampleController', ['$scope', function ($scope) {
$scope.exampleSum = 10 + 5;
}]);
angular.element(document).ready(function() {
angular.bootstrap(document, ['exampleApplication']);
});
</script>
</body>
</html>
We recommend that you link all javascript libraries in the end of the page, it decreases page load time, because HTML loading is not blocked by loading of the javascript files.
Now, after the initialization, we can write more complex example:
<!doctype html>
<html lang="en" ng-app>
<head>
<title>AngularJS Example 1 | Script Tutorials</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>AngularJS Example 1</h1>
</div>
<p class="lead">Concatenation: {{'Hello' + 'World '+'!'}}</p>
<p class="lead">Math actions: {{10 + 5 - 7}}</p>
<p class="lead">List:</p>
<ul>
<li ng-repeat="i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">{{i}}</li>
</ul>
<p class="lead">Name: <input ng-model="name" type="text"/> = {{name}}</p>
</div>
<script src="js/angular.min.js"></script>
</body>
</html>
In this example, we have demonstrated the basic uses of constants and variables. As you can see, we can use basic actions like concatenation and math actions. All Angular expressions are usually wrapped between double-curlies. The ng-repeat="... in ..." attribute is Angular repeater directive. The repeater tells Angular to do something for each element of the list. Lastly, there is example of basic data binding: data-binding in Angular apps is the automatic synchronization of data between the model and view components. In our example, it will repeat all the text you entered.
In the next tutorial we will continue to explore of Angular JS.
Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments