AngularJS Modules, Controllers and Scope
Real AngularJS apps keep their data and logic in controllers, which belong to a module.
Modules
A module is a container for the parts of an app: controllers, services, filters and directives. Create one with angular.module:
Example
var app = angular.module("schoolApp", []);- The first argument is the module name
- The second argument is a list of other modules it depends on (empty here)
Then give the name to ng-app:
Example
<body ng-app="schoolApp">angular.module("schoolApp", []) creates a module. angular.module("schoolApp") without the array gets an existing one. Mixing these up is a common bug in old projects: creating the module twice wipes out everything registered before.
Controllers and $scope
A controller is a JavaScript function that sets up data and functions for part of the page. It receives $scope, the object that connects the controller to the HTML.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="schoolApp">
<div ng-controller="StudentController">
<h2>{{ student.name }}</h2>
<p>Class: {{ student.className }}</p>
<p>Average: {{ average() }}</p>
</div>
<script>
var app = angular.module("schoolApp", []);
app.controller("StudentController", function ($scope) {
$scope.student = {
name: "Ayesha Siddiqui",
className: "Grade 9",
marks: [82, 74, 91]
};
$scope.average = function () {
var sum = 0;
$scope.student.marks.forEach(function (m) { sum += m; });
return (sum / $scope.student.marks.length).toFixed(1);
};
});
</script>
</body>
</html>Ayesha Siddiqui Class: Grade 9 Average: 82.3
Anything you put on $scope can be used in the HTML inside the ng-controller element.
Changing Data from a Function
Example
app.controller("CounterController", function ($scope) {
$scope.visitors = 0;
$scope.addVisitor = function () {
$scope.visitors++;
};
});Example
<div ng-controller="CounterController">
<p>Visitors today: {{ visitors }}</p>
<button ng-click="addVisitor()">New visitor</button>
</div>When the function changes $scope.visitors, AngularJS updates the page automatically.
Controller As Syntax
Many later AngularJS projects use controller as instead of $scope. Data is put on this, and the HTML uses a name for the controller:
Example
app.controller("ShopController", function () {
var vm = this;
vm.shop = "Tariq Road Shoes";
vm.items = 24;
});Example
<div ng-controller="ShopController as shopCtrl">
<p>{{ shopCtrl.shop }} has {{ shopCtrl.items }} items in stock.</p>
</div>Tariq Road Shoes has 24 items in stock.
vm stands for "view model". This style makes it clear which controller a value comes from, especially with nested controllers.
Minification-Safe Code
When JavaScript files are minified, parameter names like $scope get shortened, which breaks AngularJS. Old projects protect against this with the array syntax:
Example
app.controller("StudentController", ["$scope", "$http", function ($scope, $http) {
// ...
}]);The strings in the array tell AngularJS what to inject, even after minification.
Scope Inheritance
A controller inside another can read its parent's scope values. Every app also has one $rootScope at the top.
| Scope | Where values are visible |
|---|---|
$rootScope | Everywhere in the app |
A controller's $scope | In that controller's element and its children |
A child scope (from ng-if, ng-repeat) | Inside that element only |
A classic bug: ng-model="name" inside ng-if writes to the child scope, so the parent never sees the change. Use a dot in models (ng-model="form.name") or controller as syntax to avoid it.
Exercise
Exercise
What does $scope do in an AngularJS controller?