AngularJS Modules Controllers Guide from Basic to Advanced
A module is created by using the AngularJS function angular.module
div ng-app="myApp".../div
script
var app = angular.module("myApp", []);
/script
The "myApp" parameter refers to an HTML element in which the application will run.
Now you can add controllers, directives, filters, and more, to your AngularJS application.
Adding a Controller
Add a controller to your application, and refer to the controller with 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
Try it Yourself »
You will learn more about controllers later in this tutorial.
Adding a Directive
AngularJS has a set of built-in directives which you can use to add functionality to your application.
For a full reference, visit our AngularJS directive reference.
In addition you can use the module to add your own directives to your applications:
Example
div ng-app="myApp" w3-test-directive/div
script
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
};
});
/script
Try it Yourself »
You will learn more about directives later in this tutorial.
Modules and Controllers in Files
It is common in AngularJS applications to put the module and the controllers in JavaScript files.
In this example, "myApp.js" contains an application module definition, while "myCtrl.js" contains the controller:
Example
!DOCTYPE html
html
script src="https://ajax.googleapis.com/ajax/libs..."/script
body
div ng-app="myApp" ng-controller="myCtrl"
{{ firstName + " " + lastName }}
/div
script src="myApp.js"/script
script src="myCtrl.js"/script
/body
/html
Try it Yourself »
myApp.js
var app = angular.module("myApp", []);
The [] parameter in the module definition can be used to define dependent modules.
Without the [] parameter, you are not creating a new module, but retrieving an existing one.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});