Angular modules and controllers Video Lecture - Learn and Understand AngularJS

this is part two a friendly JS tutorial
in this video we'll discuss what's a
module and angular and how to create a
module
what's a controller and how to create a
controller how to register a control
over the module and finally how to use
the module that we have created to
bootstrap the angular application so
what's a module a module is a container
for different parts of your application
that is controllers services direct use
filters etc in this video we'll also
discuss controllers along with the
modules in a later video we'll discuss
services filters and directives so why
is a module required you can think of a
module as a main method in other types
of applications for example a dotnet
console application has a main method
which is the entry point into the
application and it's the responsibility
of that main method to wire together
different parts of the application
modules are the angular applications
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 defer the discussion of those
benefits to a later video for now let's
focus on how to create a module creating
a module in angular is straightforward
use the angular objects module method to
create a module the angular object
itself is provided by the angular
framework notice the module method that
this angular object is providing has got
two parameters at the moment the first
parameter specifies the name for the
module that we are creating and the
second parameter specifies the
dependencies for this module the 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 here is
not dependent on any external modules so
I am passing an empty array as the value
for the second parameter so this is how
we create a module
what's a controller in angular a
controller is a JavaScript constructor
function the job of the controller is to
build a model for the view to display
model is nothing but the data in a real
world application the controller may
call into your web service which
retrieves data from the database so how
to create a controller in angular simple
create a JavaScript constructor function
so notice here we are creating an
anonymous function and we are assigning
that to a variable so this is an example
of a controller function and if you look
at this controller notice we are passing
a parameter called dollar scope so what
is dollar scope dollar scope is an
angular object that is passed to this
controller function by the angular
framework automatically we attach the
model to this scope object which will
then be available in the view within the
view we use the data binding expression
to retrieve the data from the scope
object and display it so in this example
right here we are attaching a message
property to this scope object and within
that message property we are storing the
string angularjs tutorial so this
message property will be available in
the view let's look at all of these in
action let's flip to visual studio so
this is the same example that we worked
with in the previous video session now
what I'm going to do is put the scripts
file I am going to add another script
file let's call this script dot j s so
this file is going to contain all our
custom JavaScript now the first thing
that we want to do is create a module
how do we create a module we use the
angular objects module method to create
your module so I'm going to create a
variable I'm going to call this my app
equals a and G and look at that we don't
have the angularjs intelligence right
here to get angularjs intellisense
within Visual Studio there's one step
that we need to do so here we have the
angular script so I'm going to drag and
drop that on to the script file
so look at that it has added a reference
directly right here and that's going to
provide us the intelligence right now if
I press control space look at that it
autocompletes
and then when I plus dot on the angular
object notice that the intelligence pops
up and we have our module method there
so the first parameter for this method
is the name of the module that we want
to create let's name the module my
module and the second parameter
specifies any dependencies at the moment
the module that you are creating does
not have any dependencies on external
module so I'm going to pass an empty
array so we have just created a module
the next step is to create a controller
what's a controller a controller is
nothing but a JavaScript function so I'm
going to create a variable here and I'm
going to call it my controller and I'm
going to create an anonymous function
here and to this anonymous function I'm
going to pass the scope object and to
the scope object let's attach a property
I'm going to call it message and I'm
going to initialize that to angular JS
tutorial okay so we have just created a
controller as well now the next step is
to register this controller with our
module and how do we do that we use the
controller function so on the module
object my app we have controller
function so the first parameter is the
name for the controller so I'm going to
call it my controller and the second
parameter is the controller function
itself so what is the name of our
controller function my controller so I'm
going to use that variable that variable
is pointing to a function so we are
passing that function as a parameter
right here so the name of the controller
is my controller and here is the
function so we have just registered the
controller with the
now look at the code right here to
create the module we have an anonymous
function we are assigning it to a
variable and then we are passing that
variable you know to this controller
function right here to register that
with the module now instead of that what
we can do is specify the function in
line right here doing this will
eliminate the need to create a separate
variable so now I can get rid of this
piece of code so now here we are
creating the controller function and
registering that with the module you
know both of those steps are happening
in a single line all right so let's save
those changes so we have a module we
have a controller and that controller is
registered with that module now we have
to associate this module with ng - app
directive and we have to associate this
controller with ng - controller
directive and we do that in the view so
let's go back to our HTML page and the
first thing that we want to do here is
reference the script file so I'm going
to drag and drop that script file into
the head section now I'm going to
specify the name of a module so the name
of our module is my module I'm going to
specify this as the value for our ng app
directive so now it's going to bootstrap
or angular application using this module
and within that module we have already
registered our controller function and
the name of our controller is my
controller now what I want to do is look
at what this controller is doing it's
attaching this message property to the
scope object and within that message
property we have this value and Eligius
tutoria so we want to display that you
know maybe within this development okay
so what I'm going to do here is ng -
controller and I'm going to specify the
name of our controller so the name of
our controller is my controller okay so
what is this going to do this is going
to invoke that
and the controller is attaching this
message property with this value and
that's doing it to the scope object and
that scope object is provided by the
framework within the view so within this
binding expression now I can use the
message property so let's save our
changes and when we reload this we
should see angularjs tutorial and look
at where we have specified the ng -
controller directive it's on this div
right now so what do you think is going
to happen if I include the same binding
expression within this div now this ng -
controller directive you know is
responsible only for this step outside
of this div you know this message
property from the context object is not
available so let's save these changes
and when we reload this look at this it
doesn't display anything there okay and
that's because the message property is
not available now let's see what's going
to happen when I move this ng -
controller directive to the body section
let's save our changes so now the
controller will be available within the
body section and to any of the children
within that body section so let's see
where it changes and let's reload this
page and look at that angle EJ's
tutorial you know it's displayed twice
so here we have that example which we
have just you know worked with so first
we are creating a module and we are
creating a controller and then we are
registering the controller with the
module using the controller function
here we are doing it in three lines we
can do it in two lines like this so
right here we are creating the
controller and registering with the
module both of those things are
happening in just one line so here are
the different moving parts of the
example that we just worked with so we
have our module we have our controller
here and that controller is registered
with the module and
and we associated the module with the
app using ng - app attribute so the
module name is specified as the value
for that director and then the control
is associated using ng - controller
director and then we are using the data
binding expression so - the context
object I mean - the scope object we are
attaching the message property the
message property has got this value and
using this binding expression we are
reading the value of that message
property from the scope object so when
we view that page in the browser we
should see the value we have in the
message property of the scope object
thank you for listening and have a great
day