technomark.in
Hot News

$(this) Selector And Children / Find In jQuery

Detect An Undefined Object Property In JavaScript

Rotate And Save Video Using VLC Media Player

Capitalize The First Letter Of String In JavaScript

Convert Any Files To Any Format Using VLC Media Player

Asp.Net AngularJS WCF IIS
DataBase Jquery Bikes Random
HomeContact Us Watch Our YouTube Channel ..........Blog Spot..........

Technomark.in

How To Logout From All Devices In Skype

Technomark.in

How To Embed Google Map In Your Code

Technomark.in

How To Install IIS (Internet Information Services) On Windows

Technomark.in

Enable Directory Browsing In IIS

View All


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.

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

Watch Video of this Content on Video Streaming

Post Your Comment

Name *


Email *


Comment * Please provide all three fields for posting Comment




Technomark.in

Book Train Tickets on IRCTC Quickly During Tatkal Period

Technomark.in

Before You Copy Any Image From Internet

View All

Privacy StatementDisclaimerSitemap