AngularJS: Starting with controller – display the maths times table

In the previous post AngularJS Example 2 – Create and display the maths times tables using ng-repeat we learnt to use the basics and ng-repeat directive to display the repeating html template. And now we introduce the controller in AngularJS application. Simply controller is the one of the part of the MVC(Model – View – Controller) technique for the web development.

Lets start with the simple HTML for displaying the maths times table for digit 1.

<div>
	<p>1 * 1 = 1</p>
	<p>1 * 2 = 2</p>
	<p>1 * 3 = 3</p>
	<p>1 * 4 = 4</p>
	<p>1 * 5 = 5</p>
	<p>1 * 6 = 6</p>
	<p>1 * 7 = 7</p>
	<p>1 * 8 = 8</p>
	<p>1 * 9 = 9</p>
	<p>1 * 10 = 10</p>
</div>

The above html is just for the number One and if you need to display the maths times table for up to number 10 then you can imagine the how long HTML content is required.
In the previous example you learnt how can we display times table up to the number 10.

In this example we will discuss that the same thing how can we do with the example of the AngularJS controller.

firstly, we declare the AngularJS application name by using the ng-app directive. See below.

ng-app directive in the Ang

Then go to the controller that will be based on the MVC pattern. A controller can be a separate .js file as well as a part of the web page just using the script tag. On here I am writing the controller code on the same page.

 var app = angular.module('myexamples', []);
    app.controller('myController', function($scope) {
      $scope.digits = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
      $scope.times = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
    });

From the above, in the first line we are creating a module. The module is just as container for the different parts of your app. There are several advantages to the using the module.
– It is easy to understand the declarative process.
– You can package code as reusable modules.
– If you are using the multiple modules on the web page then modules can be loaded in any order because modules delay execution. For it you can use the angular.injector method such as:

var injector = angular.injector(['ng', 'myexamples'])

You can specify a module to be used as the root module for the application that will be loaded at the time of the Bootstrapping( commonly known as initialization in application.) of AngularJS Application.

When we use the single module, the ng-app directive is the best choice to initializing the app, don’t need to use the angular.injector.

display times tables using controller angularjs

The next line we create the controller. Controller is a function which takes $scope as parameter. We are creating the controller with the name ‘myController’.

Now listen carefully: First we declare the scope of the angular application by using the ng-app directive. Then in the view (HTML) we set the scope for the controller(Just like as inheritance) by using the declaration ng-controller=”myController” . The next thing is Model-View Data Binding, in the example body tag has the ng-controller=”myController”. Now any element inside this body tag can bind to arrays(digits and times, see the controller) of controller.

Combine all the above code, the full code of the webpage looks like:

<!DOCTYPE html>
<html ng-app="myexamples">
<head>
  <meta charset="utf-8" />
  <title>AngularJS: Starting with controller</title>
  <script  src="angularjs/1.0.8/angular.min.js"></script>
  <style>
    .tab {float: left; margin-right: 5px;
	border: 1px solid #f2f2f2;padding: 5px;}
  </style>
  <script>
    var app = angular.module('myexamples', []);
    app.controller('myController', function($scope) {
      $scope.digits = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
      $scope.times = [1, 2, 3, 4, 5, 6, 7, 8, 9,10];
    });
  </script>
</head>
 
<body ng-controller="myController">
  <div ng-repeat="x in digits" class="tab">
    <p ng-repeat="y in times">
     {{x}} * {{y}} = {{x*y}}
    </p>
  </div>
</body>
</html>