Modules And Controllers In AngularJS




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.




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.




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.




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

Modules and Controllers In AngularJS With Example, What Is Modules In AngularJS, What Is Controllers In AngularJS, Register Controller In Module In AngularJS, AngularJS, JavaScript

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.

Modules and Controllers In AngularJS With Example, What Is Modules In AngularJS, What Is Controllers In AngularJS, Register Controller In Module In AngularJS, AngularJS, JavaScript

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.

Modules and Controllers In AngularJS With Example, What Is Modules In AngularJS, What Is Controllers In AngularJS, Register Controller In Module In AngularJS, AngularJS, JavaScript

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