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".
Watch Video of this Content on Video Streaming