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.


> 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.


> 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".

Watch Video of this Content on Video Streaming