Smarter ideas worth writing about.

How Do I Implement a Simple AngularJS MVC Application?

AngularJS implements MVC by allowing the model to notify the controller and views when there is a change in model state. This will be further explained through the creation of a simple application below. 

1) The view that we will use for this exercise will most likely look familiar to anyone who has experience with html.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My AngularJS Hello World</title>
    <script type="text/javascript" src="lib/angular.js"></script> 
    <script type="text/javascript" src="controllers/DefaultController.js"></script>
    <script type="text/javascript" src="models/FruitModel.js"></script>
</head>
<body ng-app="helloWorldApp">
    <div ng-controller="DefaultController">
     <div>
        <label>Enter text for button:</label><input type="text" ng-model="inputValue" />
        <button type="button" ng-click='getFruitsFromModel()'>{{inputValue}}</button>
        <button type="button" ng-click='clearFruits()'>Clear Results</button>
    </div>
    <div ng-show="fruits.length > 0">
        <h3>Fruits:</h3>
        <div ng-repeat="fruit in fruits">
        <span>{{fruit}}</span><br />
    </div>
</div>
    </div>
</body>
</html>

This view has a couple of interesting items that need further explanation. 

1) The use of “non-traditional” html attributes (ng-app, ng-controller, ng-model, etc.). These attributes are decorators used by AngularJS to specify directive execution and data binding. 

2) The {{inputValue}} notation. The text value of the button is bound to the “inputValue” model, which in this case is a string value. This value is updated from the textboxes value. This means that as a user enters text into the textbox the button’s text will change.

 

What introductory application would be complete without a couple of buttons to click? These buttons are defined in our view and you will notice that they use the ng-click attribute. This attribute is used to tie the button to a click event that will be defined in the controller.

2) The controller implementation is a little more interesting than the view because it contains significantly more AngularJS specific JavaScript.

var helloWorldApp = angular.module('helloWorldApp', []);

helloWorldApp.controller('DefaultController', function ($scope, FruitModel) {

    $scope.getFruitsFromModel = function () {
        $scope.fruits = FruitModel.getData();
    };

    $scope.clearFruits = function () {
        $scope.fruits = [];
    }
});

There are 2 items of specific interest in this code.

  1. The angular.module notation is used to initialize and AngularJS module. It also provides you with a way to inject your dependencies into the application (this will be covered in more detail in a later post). For this exercise, the important understanding is that this is thestandard initialization code to declare an AngularJS application.

  2. The helloWorldApp.controller(“DefaultController”, function 
     ($scope, FruitModel){ notation is used to instantiate the controller. It is worth noting that scope and FruitModel is injected into the controller (dependency injection will be covered in more detail later). The controller code provides the mechanism to handle the ng-click attribute assignment in the view. The getFruitsFromModel and clearFruits functions are executed when the appropriate button is clicked by the user.

3) The model in AngularJS is instantiated through the helloWorldApp.service(‘FruitModel’). The service implementation and interworking is beyond the scope of this post, but the important part in this code is to understand that this service functions as the implementation of the model.

helloWorldApp.service('FruitModel', function () {
    this.getData = function () {
        return ['Apple', 'Banana', 'Orange', 'Grapes', 'Tomato', 'Watermelon'];
    };
});

Now that we have discussed the code behind the application, we should take a look at the interaction of these components.

  1.  When a user clicks on the “Get Fruits!” button, the controller is signaled to send a command to the model to retrieve data requested

  2. The model receives the command and executes the retrieval of the data

  3. The final step is that the model notifies the controller and the view that its state has changed. This notification results in the fruits displaying in the view.

This post covers a very simple AngularJS MVC implementation. The next post of this series will cover routing in AngularJS. Routing is the mechanism used to specify controller-view relationships, and is critically important for more advanced MVC implementations.

Share:

About The Author

Principal Consultant I
Andy is a Principal consultant, in the Cardinal Raleigh office, who writes Angular JS applications that consume Microsoft ASP.Net Web Api and WCF webservices.