Lets Learn AngularJS 3 - Modules and Controllers


A module is a container for different parts of the application. Think of it as a main() method of your application.

How to create a Module

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

myModule -> Specifies the name of the module [] -> specifies the dependencies of the module, i.e. a module can be dependent on other modules


We can think controller as a JavaScript function and it’s job is to build a Model for the view to display.

How to create a Controller

var myController = function ($scope) {
    $scope.message = "AngularJS is Awesome!";

With this function, we are assigning the message to the $scope object.

How to register a controller with the module

JavaScript File

// Creating the module
var myApp = angular.module("myModule", []);

// Creating the controller
var myController = function ($scope) {
    $scope.message = "Angular is AWESOME!";

// Registering the controller
myApp.controller("myController", myController);

JavaScript File 2

Rather than creating the controller variable and registering it to a module, we can directly create it at the registering part.

myApp.controller("myController", function ($scope) {
    $scope.message = "AngularJS is AWESOME!";


Now let’s include the controller and the model into our html (view) file.

<!doctype html>
  <script src="angular.js"></script>
  <script src="NAMEOFTHEJSFILE.js"></script>
<body ng-app="myModule">
  <div ng-controller="myController">
       {{ message }}