AngularJS Modules
Modules define applications. All application controllers should
belong to a module.
Modules make your application more readable, and keep the
global namespace clean.
AngularJS Module Example
In this example, "myApp.js" contains an application module definition, "myCtrl.js"
contains a controller:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Controllers Pollute the Global Namespace
All examples in this tutorial, have used global values (global variables or
global functions).
Global values should be avoided in applications. They can easily be overwritten or destroyed by other scripts.
AngularJS modules can solve (or reduce) this problem.
A Controller Without a Module
The application does not have a name, and the controller function is global:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app=""
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function
myCtrl($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
}
</script>
</body>
</html>
A Controller With a Module
The application has a name
(ng-app="myApp"), and the controller is a property of the
module:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<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>
</body>
</html>
When to Load the Library?
 |
In all our examples, the AngularJS library is loaded in the <head> section. |
A common advise for HTML applications, is to place all scripts at the very bottom of the <body> element.
But, in many AngularJS examples, you will see the library in the
<head> element.
This is because
calls to angular.module can only be compiled after the library has been loaded.
Another solution is to load the AngularJS library in the <body> element,
but before your own AngularJS scripts:
AngularJS Example
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>
AngularJS Application Files
Now that you know what modules are, and how they work, it is time to build
your application file.
Your application should have at least one module file, and one controller
file for each controller.
First create a module file "myApp.js":
var app = angular.module("myApp", []);
|
The [] parameter in the module definition can be used to define dependent
modules. |
Then create the controller file(s). In this case "myCtrl.js":
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
Finally, edit your HTML page:
AngularJS Example
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp"
ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
Color Picker
