Angular modules and controllers

creating modules in angularjs
creating controllers in angularjs

In this video we will discuss
1. What is a module in angular
2. How to create a module
3. What is a controller in angular
4. How to create a controller
5. How to register a controller with the module
6. How to use the module that we created to bootstrap the angular application

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

What is a module in AngularJS
A module is a container for different parts of your application i.e controllers, services, directives, filters, etc. In this video we will also discuss controllers. We will discuss services, filters and directives in a later video.

Why is a module required
You can think of a module as a Main() method in other types of applications. For example, a Dot Net console application has a Main() method which is the entry point into the application and it wires together the different parts of the application.

Modules are the angular application's equivalent of the Main() method. Modules declaratively specify how the angular application should be bootstrapped.

There are several benefits of the modular approach. It may be difficult to comprehend all those benefits right now, so we will defere the discussion of the benefits to a later video.

How to create a module
Creating a module in angular is staright forward. Use the angular object's module() method to create a module. The angular object is provided by angular script. The following example, creates a module.

The first parameter specifies the name of the module.
The second parameter specifies the dependencies for this module

A module can depend on other modules. We will discuss an example of module dependencies in a later video. Right now, the module that we are creating is not dependent on any other external modules, so I am passing an empty array as the value for the second parameter.

What is a controller in angular
In angular a controller is a JavaScript function. The job of the controller is to build a model for the view to display. The model is the data. In a real world application, the controller may call into a service to retrieve data from the database.

How to create a controller in angular
Simple, create a JavaScript constructor function

var myController = function ($scope) {
}

What is $scope
$scope is an angular object that is passed to the controller function by the angular framework. We attach the model to the $scope object, which will then be available in the view. With in the view, we use the databinding expression to retrieve the data from the scope object and display it.

How to register the controller with the module
Use module object's controller function to register the controller with the module

Here is the complete code

//Create the module

//Create the controller
var myController = function ($scope) {
}

// Register the controller with the module

The above code can also be written as shown below.

//Create the module

// Creating the controller and registering with the module all done in one line.
});

How to use the module that we created to bootstrap the angular application
Associate the module name with ng-app directive
ng-app="myModule"

Similarly associate the controller using ng-controller directive
ng-controller="myController"

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

[deremangesh]

Best online teacher.
Videos are very expressive and understood every bit of the topic.
Learning various topics with the help of Venkat's video are very easy
Thanks Alot.

[TheNanoWeb]

First time I can hope now I can learn Angular.... Great and to the point video... This what when teacher have full command on what he/she teach... Thank a lot

[barthutto]

Dear Venkat,
Please include in this AngularJS tutorial video series videos that show how to properly consume and interface with a REST API over http, including GET PUT POST and DELETE. I've searched many videos, and they are all confusing and don't detail best practices. I love your teaching style and I think everyone would benefit if you could include this in your AngularJS series. Please kind sir! :)

[basheerahmed]

I've watched almost all of the tuts of SQL series and Angular one is just out of the box... Thanks

[victorkh]

The most human friendly intro to Angula up to now for a newbie like myself. Big Thanks!

[pushprajsingh]

I cannot thank u enough.Im just a beginner but still u made it easy..crisp..and precise.Take a bow!👍

[kaverit]

Everyone can easily learn technology with your easiest way of teaching. GREAT..

[on-the-slopes]

Very nice videos. Easy to pick up Angular step by step for a beginner. Thanks for sharing.

[martin]

Best tutorials I've found so far. Only bad thing is that I am too tired to watch them all right now. :)

[darkthrongrising]

I just finished your Bootstrap series, it was very easy to follow and I learned a great deal. I need to go back and hit all the like buttons. I expect this Angular series will be just as good, thank you for your hard work.

[chanchalagrawal]

Hello Venkat sir. I find all your videos to be super amazing. you are the best online teacher. Thanks for providing a clear concept on all topics

[yusufmohamedsalh]

thank you very much for the videos, your voice is quite instructive and calm, till the limit i fall asleep while watching, really the best videos ever .Thank You Venkat.

[renbotha]

Thanks! Helped me understand the concepts of controllers and modules while doing the Angular.JS tutorials. Must see if you are a beginner in Angular.JS

[eminovperviz]

do you know that ? you are amazing, thank for all your tutorials. That`s a great work :)

[poonam-kamboj]

first time I understood controller and module clearly after a long search :), thanks for the tutorial

[kumarnavaneet]

Ur explanation of stuffs are awesome... I have checked out almost all of ur videos

[ymtan]

A much-looked forward series of AngularJS.

[priyankvashist]

ive learned so much from your videos sir...Best onlime tutor ever

[adrianohernandez]

Venkat, thank you for you tutorials. I hope I could be able to donate for you someday.

[Smily-yash]

Superb explanation!!! Thank you somuch for your explanation.