Skip to content

AngularJS Architectural concepts




Over the past few years the Model View Controller (MVC) design pattern, and many other variants based around the same central theme i.e. Model View Presenter (MVP) , Model View View Model (MVVM) etc. have become very popular, as developers grapple with trying to ensure their code is as testable, scalable, robust and defect free, while at the same time trying to be as productive as possible.

In a nutshell the model represents the knowledge that the view is responsible for presenting, while the controller mediates the relationship between model and view. However, these concepts are a little bit abstract, and this pattern may have different implementations depending on the language, platform, and purpose of the application.

AngularJS kind of introduces a new software development pattern Model-View-Whatever (MVW). Regardless of the name, the most important benefit is that the framework provides a clear separation of the concerns between the application
layers, providing modularity, flexibility, and testability.

In terms of concepts, a typical AngularJS application consists primarily of a view, model, and controller, but there are other important components, such as services, directives, and filters.

Considering AngularJS from a MVC perspective, may help to explain some of the concepts behind the framework

Model

The model is a simple Plain-Old-JavaScript-Object (POJO). It looks very clear and easy to understand, bringing simplicity to the development by not requiring any special syntax to be created.

View

The view, which commonly referred to as the template, is entirely written in HTML, which provides a great opportunity for web designers and JavaScript developers to side by side. It also takes advantage of the directives mechanism, which is a type of extension of the HTML vocabulary that brings the ability to perform programming language tasks such as iterating over an array or even evaluating an expression conditionally.

Controller

The controller typically contains all the business logic implementation used by the view. A word of caution here though as the application grows, it becomes really important to perform some refactoring activities, such as moving
the code from the controller to other components (for example, services) in order to keep the cohesion high.




The connection between the view and the controller is done by a shared object called scope. It is located between them and is used to exchange information related to the model.

Setting up the framework

It is really easy to set up an application to make use of the AngularJS framework.  The first thing required is to import the angular.js script to our HTML File.  Then we create the application module by calling the module function from Angular's API with its name and dependencies.

The following code snippet displays setting up an inductory simple page for a a simple To Do List  applicaiton .  In this first iteration we should be able to add and view a simple list of  tasks. The task information will include basic details i.e. Summary, Due Date and indicator if a task is complete.  Initially this is a trivial example but we will expand further on implementation  as the tutorial takes shape.  Full source code for the Tutorial can be downloaded from the GitHub Repository

<!DOCTYPE html>
<html lang="en" ng-app="todolist">
<head>
    <meta charset="UTF-8">
    <title>Geek I Am - To Do List</title>
    <!-- Import the angular JS from Google CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
        //Create a Geek Module
        var todolist = angular.module("todolist", []);

        //Register the geek controller to the geeks module
        todolist.controller("todoCtrl", function($scope){
            $scope.tasks=[
                {summary: 'Write Angular Tutorial', due: "19/05/16", done:"true"},
                {summary: 'Write Code for Tutorial', due: "25/05/16", done:"false"} ,
                {summary: 'Commit code to Github', due:"29/05/16", done:"false"}
            ];

            // Bind the add function to the scope
            $scope.add = function(task){
                $scope.tasks.push(angular.copy(task));
                delete $scope.task;
            };
        });

    </script>
</head>
<body>
<body ng-controller="todoCtrl">
<h1> To Do List</h1>
<table>
    <thead>
    <tr><th>Summary</th><th>Due Date</th><th>Done</th></tr>
    </thead>
    <tbody>
    <tr ng-repeat="task in tasks">
        <td>{{task.summary}}</td>
        <td>{{task.due}}</td>
        <td>{{task.done}}</td>

    </tr>

    </tbody>
</table>
<input type=text" ng-model="task.summary" />
<input type=text" ng-model="task.due" />
<input type=text" ng-model="task.done" />

<button ng-click="add(task)">Add</button>
</body>
</html>
[ebs_thumbnail target="_self" alt="To o List Screen Shot" src="https://garywoodfine.com/wp-content/uploads/2016/05/ToDoList.png"]





As you will notice the output of this code is not entirely aesthetically pleasing but it is functional and required very minimal amount of code. There is actually alot going on in that simple code sample and it helps to illustrate a number of key AngularJS features. i.e. Directives, Controllers, Scopes, expressions and models , which I will provide detailed explanations of in later tutorials.

The ngController directive is used to bind the todoCtrl controller to the view, the ngRepeat directive iterates over the Geeks Array. We used an expression i.e. {{task.summary}} to display the name of a geek.  In order to add a new geek to the list, we applied the ngModel directive, which creates a new object called geek with a 3 properties, passing it as a parameter of add function, called through the ngClcik directive.

To improve the loading pages performance I used the minified and obfuscated version of the Angular JS script from the Google Content Delivery Network (CDN)

As you will notice this is still a very simple application and there is still alot more we will need to do to make it completely functional.  Probably one of the most important issue to eager amongst you would've noticed is that we do not handle the Data types correctly i.e. Dates and Boolean values, which is a good reason why you should check out the next tutorial in this series.  AngularJS Data Handling

Gary Woodfine
Latest posts by Gary Woodfine (see all)
Tags: