AngularJS - MVC Architecture

Model View Controller or MVC as it is popularly called, is a software design pattern for developing web applications. A Model View Controller pattern is made up of the following three parts −

·        Model − It is the lowest level of the pattern responsible for maintaining data.

·        View − It is responsible for displaying all or a portion of the data to the user.

·        Controller − It is a software Code that controls the interactions between the Model and View.

The Model

The model is responsible for managing application data. It responds to the request from view and to the instructions from controller to update itself.

The View

A presentation of data in a particular format, triggered by the controller's decision to present the data. They are script-based template systems such as JSP, ASP, PHP and very easy to integrate with AJAX technology.

The Controller

The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it, and then performs business operations that modify the state of the data model.

AngularJS is a MVC based framework. In the coming chapters, we will see how AngularJS uses MVC methodology.

AngularJS - First Application

Before we start with creating actual HelloWorld application using AngularJS, let us see what are the actual parts of a AngularJS application. An AngularJS application consists of following three important parts −

·        ng-app − This directive defines and links an AngularJS application to HTML.

·        ng-model − This directive binds the values of AngularJS application data to HTML input controls.

·        ng-bind − This directive binds the AngularJS Application data to HTML tags.

Steps to create AngularJS Application

Step 1 − Load framework

Being a pure JavaScript framework, It can be added using <Script> tag.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

</script>

Step 2 − Define AngularJS Application using ng-app directive

<div ng-app = "">

   ...

</div>

Step 3 − Define a model name using ng-model directive

<p>Enter your Name: <input type = "text" ng-model = "name"></p>

Step 4 − Bind the value of above model defined using ng-bind directive.

<p>Hello <span ng-bind = "name"></span>!</p>

Steps to run AngularJS Application

Use above mentioned three steps in an HTML page.

testAngularJS.htm

<html>

   <head>

      <title>AngularJS First Application</title>

   </head>

   <body>

      <h1>Sample Application</h1>

      <div ng-app = "">

         <p>Enter your Name: <input type = "text" ng-model = "name"></p>

         <p>Hello <span ng-bind = "name"></span>!</p>

      </div>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>

</html>

Output

Open textAngularJS.htm in a web browser. Enter your name and see the result.

How AngularJS integrates with HTML

·        ng-app directive indicates the start of AngularJS application.

·        ng-model directive then creates a model variable named "name" which can be used with the html page and within the div having ng-app directive.

·        ng-bind then uses the name model to be displayed in the html span tag whenever user input something in the text box.

·        Closing</div> tag indicates the end of AngularJS application.

AngularJS - Directives

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives −

·        ng-app − This directive starts an AngularJS Application.

·        ng-init − This directive initializes application data.

·        ng-model − This directive defines the model that is variable to be used in AngularJS.

·        ng-repeat − This directive repeats html elements for each item in a collection.

ng-app directive

ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In following example, we've defined a default AngularJS application using ng-app attribute of a div element.

<div ng-app = "">

   ...

</div>

ng-init directive

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application. In following example, we'll initialize an array of countries. We're using JSON syntax to define array of countries.

<div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]">

   ...

</div>

ng-model directive

ng-model directive defines the model/variable to be used in AngularJS Application. In following example, we've defined a model named "name".

<div ng-app = "">

   ...

   <p>Enter your Name: <input type = "text" ng-model = "name"></p>

</div>

ng-repeat directive

ng-repeat directive repeats html elements for each item in a collection. In following example, we've iterated over array of countries.

<div ng-app = "">

   ...

   <p>List of Countries with locale:</p>

   <ol>

      <li ng-repeat = "country in countries">

         {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

      </li>

   </ol>

</div>

Example

Following example will showcase all the above mentioned directives.

testAngularJS.htm

<html>

   <head>

      <title>AngularJS Directives</title>

   </head>

   <body>

      <h1>Sample Application</h1>

      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 

         <p>Enter your Name: <input type = "text" ng-model = "name"></p>

         <p>Hello <span ng-bind = "name"></span>!</p>

         <p>List of Countries with locale:</p>

         <ol>

            <li ng-repeat = "country in countries">

               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}

            </li>

         </ol>

      </div>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>

</html>

Output

Open textAngularJS.htm in a web browser. Enter your name and see the result.

AngularJS - Expressions

Expressions are used to bind application data to html. Expressions are written inside double braces like {{ expression}}. Expressions behaves in same way as ng-bind directives. AngularJS application expressions are pure javascript expressions and outputs the data where they are used.

Using numbers

<p>Expense on Books : {{cost * quantity}} Rs</p>

Using strings

<p>Hello {{student.firstname + " " + student.lastname}}!</p>

Using object

<p>Roll No: {{student.rollno}}</p>

Using array

<p>Marks(Math): {{marks[3]}}</p>

Example

Following example will showcase all the above mentioned expressions.

testAngularJS.htm

<html>

   <head>

      <title>AngularJS Expressions</title>

   </head>

   <body>

      <h1>Sample Application</h1>

      <div ng-app = "" ng-init = "quantity = 1;cost = 30; student = {firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]">

         <p>Hello {{student.firstname + " " + student.lastname}}!</p>

         <p>Expense on Books : {{cost * quantity}} Rs</p>

         <p>Roll No: {{student.rollno}}</p>

         <p>Marks(Math): {{marks[3]}}</p>

      </div>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>

</html>

Output

Open textAngularJS.htm in a web browser. See the result.