AngularJS 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 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 AngularJS. This is our first lesson.
MVC and MVVM design patterns with AngularJS
MVC – Model-View-Controller
The Model-View-Controller design pattern defines objects in an application 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 refinement of the MVC design and the ViewModel in MVVM is used for 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 easier understand the material, many people prefer to study practical tasks in parallel with the theory. We will do also.
I also want to note that AngularJS is often used in conjunction with Bootstrap framework. The reason is that native AngularJS 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.
AngularJS installation
In order to use the AngularJS 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
AngularJS initialization
ngApp directive is used to declare a root of our angular application. It can be placed in any HTML tag of BODY, 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 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 to link all javascript libraries in the end of 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
titleAngularJS 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"
h1AngularJS 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 by 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 AngularJS.
Live Demo
[sociallocker]
download in package
[/sociallocker]
