AngularJS Modules

An AngularJS module defines an application and serves as a container for its various components. It acts as a repository for the application’s controllers, with all controllers being associated with a module.

Creating a Module

A module is created using the AngularJS function angular.module.

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

</script>

The “myApp” parameter designates an HTML element where the application will operate. You can now add controllers, directives, filters, and additional components to your AngularJS application.

Adding a Controller

Include a controller in your application and reference it using the ng-controller directive.

Example

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

<script>

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

app.controller(“myCtrl”, function($scope) {
$scope.firstName = “John”;
$scope.lastName = “Doe”;
});

</script>

Adding a Directive

AngularJS provides a collection of built-in directives that you can utilize to enhance your application’s functionality.

Additionally, you can use the module to create and incorporate your own directives into your applications.

Example

<div ng-app=”myApp” code7-test-directive></div>

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

app.directive(“code7TestDirective”, function() {
  return {
    template : “I was made in a directive constructor!”
  };
});
</script>