Search within TutorialsPark

AngularJS : Application Anatomy

Learn about the basic components of an AngularJS Application

AngularJS : Anatomy of an AngularJS Application

Prior to Building our first AngularJS application, you should know about the basic components of an AngularJS.

1. Model : The Model is the logical structure of the data in the application.It is not to be confused with database, and instead it should be seen as the structure of code that represents the data.

2. View : A view is the code structure which represent the User Interface, User Interface constitutes every thing the user can see, buttons, dialog boxes, modals, menu etc.A given application can have multiple views, and each view represents some section of the model.

3. Controller : A Controller is an intermediary between the view and model, it acts the logic or brain of the application.

4. Scope : A Scope can be defined as context in between the model and function. The task of a controller is to set these models and functions in the scope.

5. Directives : It teaches new properties to HTML syntax. It essentially HTML elements with custom elements and attributes.

6. Expression : AngularJS expression are denoted using symbol {{}} in a HTML document. Expressions are used to access scope models and functions.

We will learn more about these components in great detail with their application in further chapters.

AngularJS : Why Use MVC?

The Main Advantage of using MVC architecture is that you can add a new format for the application without much effort.

You can begin with a new standard HTML based view and later on add a new view supporting some other format, eg some mobile format.For non MCV based architecture application, such a transition would be a disaster.

MVC provides what we call Seperation of Concerns ,it implies that no view is exclusively attached to a model, the view and model are two seperate components can be swapped in and out with other replacements.

The user benefits from this model greatly, as the applications are far less prone to bugs and hence easily maintainable. Thus the applications remains stable and future version updates won't cause a break down.

AngularJS : MVC architecture application in AngularJS

Lets us familiarize ourself on how Model, View and Controller actually manifest themselves in a AngularJS Code.

In the code snippet below, the variable countries is an array of some country name, you may even have them sourced from a database, but for the ease of understanding we are using a hard coded one.

In the given context the called array can be called a model, now the view is how the data from the model is presented to the user, also called as view template.

Syntax: MVC Model and View

The above HTML and JavaScript code, have no dependency on each other, and clearly have a seperation of concern.We will use a controller to act an intermediary between the two.

In the final code, the data from the model to property demoCountries using the $scope object. The $scope object is supplied to the controller function using the AngularJS Framework

The expression demoCountries.length has same effect as {{$scope.demoCountries.length}}

Example: AngularJS MVC Example

Give it a TRY! » Note: The change made to the model are reflected automatically, without any DOM manipulations.

In the demo the directive ngRepeat is used to repeat the instance of the element upon which it is declared.We will learn more in detail in further chapters.

Demo: Angular JS show Names of Countries

Give it a TRY! »