Angular JS Tutorial – MVC and MVVM Design Templates

Angular JS is one of the fastest growing javascript frameworks. And that’s not surprising – we can use MVC and MVVM design patterns which are essential for building modern websites today. This framework allows us to use features like data binding, controller, deep link, form validation, server communication, directives, localization, etc. 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 model defines objects in an application in one of three roles: Model, View, or Controller. The model not only defines the roles that objects play in the web application, it defines how objects communicate with each other. Each of the three types of objects is separated from the others by abstract borders with objects of the other types across these borders. In short: the Model is a datum, the View represents this datum, the Controller is the link between the Model and the View.

MVVM – Model-View-Model View

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 does not know the view, the view knows the presenter – the presenter in MVVM is used to represent an abstract view of the user interface. A passive view means that the view has no knowledge of the model. In the MVVM design model, the view is active and contains behaviors, events, and data binding information. Note that the view in MVVM is not responsible for handling state information – the view is instead synchronized with the view model. The ViewModel in MVVM is responsible for separating presentations and exposes methods and commands to manage the state of a view and manipulate the model.

From theory to practice

In order to better understand the material, many people prefer to study practical tasks alongside theory. I will do it too.
I also want to note that Angular JS is often used in conjunction with the Bootstrap framework. The reason is that the native Angular JS directives are based on Bootstrap markup and CSS. Therefore, no dependency on jQuery or Bootstrap JavaScript is required. At the same time, we can easily create the html markup for our pages using Bootstrap.

Angular JS installation

To use Angular JS in our web application, we need to download it first (angular.min.js (v1.5.0)). Next, we’ll just hook up this library in our code:


Angular JS initialization

ngApp The directive is used to declare a root of our Angular application. It can be placed in any HTML tag inside the BODY tag, in case we only need part of our page that is considered an Angular app. But usually we declare it in the HTML tag:

This initialization is called – automatic initialization.
Once the page loads, Angular searches 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 processing the ngApp directive as the root of the compilation.
In addition to automatic initialization, there is also manual initialization (in case you need to have more control over the initialization process). Here is an example of manual initialization:

10 + 5 = {{exampleSum}}

We recommend that you link all the javascript libraries at the end of the page, this decreases the page loading time, because the HTML loading is not blocked by the loading of the javascript files.
Now after initialization we can write a more complex example:

  AngularJS Example 1 | Script Tutorials


Concatenation: {{'Hello' + 'World '+'!'}}

Math actions: {{10 + 5 - 7}}


  • {{i}}

Name: = {{name}}

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 loops. The ng-repeat="... in ..." the attribute is an angular repeater directive. The repeater tells Angular to do something for each item on the list. Finally, there is a basic data binding example: Data binding in Angular apps is the automatic synchronization of data between model and view components. In our example, it will repeat all the text you entered.

In the next tutorial, we’ll continue to explore Angular JS.

Source link

Abdul J. Gaspar

Leave a Reply

Your email address will not be published.