AngularJS-MVC

Tutorial 3: What is MVC Architecture in AngularJS ? | AngularJS MVC

In AngularJS by Hafiz Faraz15 Comments

In angular we organize things differently than regular JavaScript. One of the popular ways of organizing applications is MVC Architecture. MVC stands for Model View Controller. Lets look at What is MVC or Model View Controller Architecture in AngularJS. Before learning AngularJS MVC Architecture, you should have checked Tutorial 2: Basic App in AngularJS because it shows how to make basic app in AngularJS and structure folders for AngularJS to work correctly or you can click the following list to goto specific angularJS tutorial:

Model

Model is data it can be dynamic data which means you can get it from a database like MySQL and you can also get data from static JSON file.

Let’s create a model. Add following lines in a file named as index.html: (Add at bottom on index.html)

Code Explanation

$scope is an object, meal is variable, added to scope. Then in curly brackets that is JSON static data.

View

View is display of model that is your data. It uses double curly brackets and it is lot like using JavaScript template library (like mustache.js).

Let’s create a view, add these lines in index.html:

Code Explanation
View is getting data from meal variable which holds JSON data for breakfast.

Controller

Controller gives you control over model and view which means it controls how data is retrieved and displayed to end-user.

Wrap MODEL  in this controller function: (You should add MODEL inside this function which is shown above)

Code Explanation

Just a simple function around model code .

Now add a div around VIEW like this:

Code Explanation

A div that holds a controller directive. Note that “food” in ng-controller=”food” is same as function name.

Final code should look like this:

(I’ve changed function name in screenshot)
MVC Architecture in AngularJS

When you run it in browser you will get Orange juice, not actually :pOrange Juice AngularJS MVC Architecture
This is called AngularJS MVC Architecture.

If you find AngularJS MVC Article helpful please share it and comment below.
If you don’t know what is AngularJS and its features, you must check
Tutorial 1: Learning AngularJS | Getting Started
Tutorial 2: Basic App in AngularJS
Hope you like it. Please share my work.


Tutorial 2: Basic App in AngularJS Tutorial 4: Modules in AngularJS


  • Rabia Aftab

    Nice post .. Can u post code files

    • Hafiz Faraz Mukhtar

      its pretty simple.. code files are available for next tutorials. 🙂

  • meatlover

    Maybe a briefly explaination of MVC will help the other, who doesn’t know how it works.

    • Hafiz Faraz Mukhtar

      Ok I will update this article. Thanks

      • Shahzad Ashraf

        yes plz include some discription about this..thanks in advance

  • Muhammad Rehan

    Nice one for starters …!

    • Hafiz Faraz Mukhtar

      Thanks. Keep visiting and share it please.

  • Moiz Mohammad

    Can you please also update the code to support IE8? Thanks

    • Hafiz Faraz Mukhtar

      ok will update today

  • When you run it in browser you will get Orange juice, not actually. That mad me sad 🙁

  • Drew Skee

    ..Using the same syntax, it’s not recognizing the function and just shows “{{value}}” in the browser as it is in the code.

    • Drew Skee

      Library App

      {{books.educational}}

      function getBooks($scope) {

      $scope.books = {

      ‘educational’: ‘Best of Angular JS’,

      ‘cooking’: ‘How to prepare a roast’,

      ‘science’: ‘Artificial Intelligence’

      }

      }

      • Alban GAULTIER

        Be careful about the space between ‘ and :

  • sadiq m

    H tried thie but didn’t get please check..i’m begginer

    Welcome {{name}}

    {{meal.breakfast}}

    function controller($scope) {
    $scope.meal = {
    ‘breakfast’:’Orange Juice’,
    ‘Lunch’:’Fruit Salad’,
    ‘Dinner’:’Vegetable Rice’
    }
    }