Modules And Controllers In AngularJS

Create Modules In AngularJS (Step 1)

Module is a container for different parts of your application. Different Parts means controllers, services, filters, directives, etc. Modules can be considered as the Main Method that wires different parts. Modules declaratively specify how an application should be bootstrapped. First of all Create a javascript file on your solution. Now on javascript file, create a Module as follows.

var firstApp = angular.module("ModuleName", [ ]);


We can use module method of angular object for creating new Module. There are mainly two parameters. First is the Name of the New Module. Second is the array of modules on which this new module (ModuleName) depends on. Here we place it as an empty array.


Create Controllers In AngularJS (Step 2)

In angular, Controller is a javascript constructor function. Controller binds the model with data for showing the end result in the view. Its same as MVC architecture. First of all, create a javascript constructor function and assing it to a variable as shown below.



Here $scope is an angular object that is passed to this controller function automatically. The model will be attached to this $scope object. The model attached $scope object will be available on the View. Inside Controller function the model object will be filled with data. In the above example, we are attaching $scope.dataholder with "This is my first App". This dataholder property will be available in the View.


Register Controller In Module In AngularJS (Step 3)

Here we have already created the Module and the Controller. Now we have to register the Controller within the Module. For that we use controller object in the Module. Here firstApp is the module name.

firstApp.controller("ControllerName", ControllerFunction)


In the above example, first parameter is the name of the Controller. Second parameter is the Controller function. Here the Controller function is firstController. By this way we can Register a Controller In Module In AngularJS.


Register Module And Controller On HTML Page In AngularJS (Step 4)

Drag the javacript file on to the HTML page. Now register the Module Name to the ng-app directive on the HTML page.



Now the angular application will be bootstraped with this Module. Within that module we have registered our controller ControllerName. Now next step is to register the Controller on ng-controller directive. Target where we have to display the output of the controller on view. Suppose on body we are showing the result on a div as shown below.



The $scope object of Controller function will be available within that particular div. The $scope object have a property named dataholder with its data. For displaying the dataholder value on View use double curly brackets.



When you run the Application, the browser will show "This is my first App".