How to Implement a Simple AngularJS MVC Application

Published 12/12/2018 08:18 AM   |    Updated 05/16/2019 10:38 AM

AngularJS implements Model View Controller (MVC) by allowing the model to notify the controller and views when there’s a change in model state. This will be further explained through the creation of a simple application below.

The view we’ll 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 few interesting items that need further explanation.

  • The use of “nontraditional” HTML attributes (ng-app, ng-controller, ng-model, etc.). These attributes are decorators used by AngularJS to specify directive execution and data binding.
  • 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 text box’s value. That means as a user enters text into the text box, 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’ll notice they use the ng-click attribute. This attribute is used to tie the button to a click event, which will be defined in the controller.

  • 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 two items of specific interest in this code:

  1. The angular.module notation is used to initialize the AngularJS module. It also provides a way to inject your dependencies into the application. For this exercise, the important understanding is that this is the standard initialization code to declare an AngularJS application.
  2. The helloWorldApp.controller(“DefaultController”, function ($scope, FruitModel){… notation is used to instantiate the controller. It’s worth noting that scope and FruitModel are injected into the controller. 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.

The model in AngularJS is instantiated through the helloWorldApp.service(‘FruitModel’). The service implementation and interworking is beyond the scope of this article, but the important part in this code is to understand 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’ve discussed the code behind the application, we should take a look at the interaction of these components.

  • When a user clicks on the “Get Fruits!” button, the controller is signaled to send a command to the model to retrieve data requested.
  • The model receives the command and executes the retrieval of the data.
  • 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 article originally appeared on June 30, 2014.

Is this answer helpful?