Module / Controller

Module

Module and controller works together with an AngularJS app.  A module is a CONTAINER for different parts (modules) of an application and an application controller. In fact, controllers are always part of a module.

In the previous two sections (Directives and Expressions) no programming was done. When using module and a controller, you have to program these functionality.

Built-in module

A module is created using the Angular function: angular.module.

<script>
var app = angular.module("myApp",[]); 
</script>

<div ng-app="myApp">...</div>

Up until now, all of the demos use ng-app="" because they did not use a module. Now that we are creating a module, it will take the first argument of that module. So, now you need to specify it in the ng-app as ng-app="myApp"

The “myApp” value refers to the HTML element that the application is using. After you create a module, then you can add directives, filters, and more to the application.
Below is an example where a module is used with a controller defined in it.

<script>
// AngularJS module ------------------------------
var app = angular.module('myApp',[]);
// AngularJS controller --------------------------
app.controller('myCtrl', function($scope) {
$scope.firstName= "Cornelius";
$scope.lastName= "Chopin";
});
</script>

<p>Enter your first and last name:</p>
<div ng-app="myApp"  ng-controller="myCtrl">
  <p>First Name: <input type="text" ng-model="firstName"></p>
  <p>Last Name: <input type="text" ng-model="lastName"></p>
  <p>Full Name: {{firstName + " " + lastName}}</p>
</div>

CODE EXPLANATION:

Module Demo

For a complete list of BUILT-IN DIRECTIVES, goto: AngularJS directive reference.

User-defined directives

Besides the built-in AngularJS directives, you can use the module to add your own directives using the .directive function. To invoke the new directive, you need to create an HTML element with the same element name as the new directive and the argument must use camel case (e.g., myCustomDirective). However, when you invoke it, you must use dashes (-) separated name (e.g., my-custom-directive). The following code will return: Hello, World!.

Notice that directive is used instead of controller to create a user defined directive. Also note the used of the keyword return and template. 

<body ng-app="myApp">

<script>
var app = angular.module("myApp",[]);
app.directive("myCustomDirective",function() {
return {template: "<h1>Hello, World!</h1>"};
});
</script>

<my-custom-directive></my-custom-directive>
</body>
Module: User-Defined Directive Demo

You can invoke a directive by using the following and get the same result:

You can also restrict a directive to be invoked by a particular method by adding a restrict property with a value of:

Modify the existing code with the following highligthed content.

<body ng-app="myApp">

<script>
var app = angular.module("myApp",[]);
app.directive("myCustomDirective",function() {
return {restrict: "A", template: "<h1>Hello, World!</h1>"};
});
</script>

<my-custom-directive></my-custom-directive>
<div my-custom-directive></div>
</body>

NOTES:

Module: User-Defined Restrict Directive Demo

In AngularJS, it is common practice to put the module and the controllers in separate JavaScript files. This is especially true of large applications. Simply copy the code in between the <script>Code</script> tags for the module and the controller separately and paste them in external JavaScript files and then link them to your app via <script> tags with src attributes. In the example below, the module and controllers are reference from external JavaScript files.

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
 {{firstName + " " + lastName}}
</div>

Below are the two scripts for the code above:

myApp.js:

var app = angular.module("myApp",[]);

myCtrl.js:

app.controller("myCtrl", function($scope) {
$scope.firstName = "Cornelius";
$scope.lastName = "Chopin";
});

NOTE: JavaScript global functions should be avoided because they can be easily overwritten by other scripts. AngularJS reduces this problem by keeping all functions local to the module.

Module: External Files Demo

In this example, just the controller is made into an external script file. The following file is save as myFamily.js:

angular.module('myApp', []).controller('familyCtrl', function($scope) {
$scope.familyMembers = [
{firstName:'Cornelius', lastName:'Chopin'},
{firstName:'Sheila', lastName:'Chopin'},
{firstName:'Joshua', lastName:'Chopin'},
{firstName:'Josiah', lastName:'Chopin'}
];
});
Then, the application is created and reference that file:



<script src="myFamily.js"></script>

<div ng-app="myApp" ng-controller="familyCtrl">
  <h1>My Family Members:</h1>
  <ul>
    <li ng-repeat="x in familyMembers">
      {{ x.firstName + ' ' + x.lastName }}
    </li>
  </ul>
</div>
Module: External Files Demo 2

Validation

The ng-model directive can also be used to provide type validation for the application data (e.g., number, email, required.). If no ng-model is written, AngularJS will create one for you. The following example will validate the e-mail address that is being entered by checking for the present of an "@" and a period (.). 

<div ng-app="">
<p>Enter your e-mail address:</p>
<form name = "myForm">
  <label id = "myEmail">Email:</label>
  <input for = "myEmail" type = "email" name = "myEmail" ng-model = "text"><br/>
  <span style = "color:red" ng-show = "myForm.myEmail.$error.email">Not a valid email address</span>
</form>
</div>

NOTE: If the ng-show attribute is true, the span element content will be shown.

Module: Validation Demo

Application Status

The ng-model can also be used to provide application status (e.g., invalid, dirty, untouched, error). The code below will validate the input field and return three status:

<form ng-app="" name="myForm"  ng-init="myText = 'example@myemail.com'">
  <p>Edit the e-mail address to change its status.</p>
  <label for ="myEmail">Email:</label>
  <input id= "myEmail" type="email"  name="myEmail" ng-model="myText" required>

  <p><strong>Valid:</strong> {{myForm.myEmail.$valid}}: If true, the value meets all  criteria).</p>
  <p><strong>Dirty:</strong> {{myForm.myEmail.$dirty}}: If true, the value has been  changed).</p>
  <p><strong>Touched:</strong> {{myForm.myEmail.$touched}}: If true, the field has been in  focus).</p>
</form>
Module: Application Status Demo

CSS Classes

The ng-model directive can add or remove CSS classes for HTML form elements, depending on their status:

In the example below, the text field will add/remove classes bases on its status. Note: A text field with the "required" attribute is not valid when it is empty:

<style>
input.ng-invalid {background-color: lightblue;}
</style>

<form ng-app="" name="myForm">
	<p>Enter your name:<input name="myName" ng-model="myText" required></p>
</form>

Module: CSS Classes Demo

Controller

An AngularJS application data is “controlled” by controllers. It is simply created from a JavaScript object’s constructor.

Many languages support the methodology of Model, View, and Controller or MVC. Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view to focus on the model data.  The view will reflect any changes in the controller due to data-binding.

In the example below, when you click the button the message changes.

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.message = "Hello, World!";
$scope.changeMessage = function() {$scope.message = "GoodBye, World!";}
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="changeMessage()">Click Button</button>
  <h1>{{message}}</h1>
</div>

Module: Module and Controller Demo

AngularJS controllers are regular JavaScript objects created by a standard JavaScript object contructor that are used to control the data of an AngularJS application. The controller is defined in the application using the ng-controller directive.

See example in Built-In Module above for the code.

Module and Controller Demo 2

Controller Methods

In the previous example, the first and last name was concatenated (stringed together) in the tag itself. In this example, a method (a function of an object) will be created to perform this task upfront. Open the previous example above and add the following highlighted code:

<script>
// AngularJS module ------------------------------
var app = angular.module('myApp',[]);
// AngularJS controller --------------------------
app.controller('myCtrl', function($scope) {
$scope.firstName = "Cornelius";
$scope.lastName = "Chopin";
$scope.fullName = function(){return $scope.firstName + " " + $scope.lastName};
});
</script>

<p>Enter your first and last name:</p>
<div ng-app="myApp" ng-controller="myCtrl">
  <p>First Name: <input type="text" ng-model="firstName"></p>
  <p>Last Name: <input type="text" ng-model="lastName"></p>
  <p>Full Name with properties: {{firstName + " " + lastName}}</p>
  <p>Full Name with method: {{fullName()}}</p>
</div>