AngularJS tutorial - What is AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part one of angularjs tutorial
in this video we'll discuss what is
angularjs benefits of angularjs and a
simple angular example so what is
angularjs angularjs is a JavaScript
framework that helped us build web
applications who developed angularjs
Google is the company that developed
angularjs angularjs is an open-source
project which means it can be freely
used changed and shared by anyone
angularjs is an excellent framework for
building both single page applications
and line of business applications many
companies are using angular today and
there are many public facing websites
that are built with angular there's a
website called made with angular com
that has the list of some of the
websites that are built using angularjs
so here is that website made with
angular com and here you can find some
of the popular websites that are built
with angular now the obvious question
that comes to our mind is within the
market we already have several other
JavaScript frameworks that helped us
build web applications so what is the
benefit of using angularjs over those
JavaScript frameworks that we already
have dependency injection dependency
injection is something angularjs does
quite well if you're new to the concept
of dependency injection don't worry
we'll discuss that in detail with
examples in a later video to weight data
binding one of the most useful feature
in angularjs is the two-way data binding
the two-way data binding keeps the model
and the view in sync at all times so
that means a change to the model updates
the view automatically and similarly a
change to the view updates the model
testing testing is an area where angular
really shines angular is designed with
testing in mind right from the start
angular makes it very easy to test any
of its components through both unit
testing and end-to-end testing so
there's really no excuse for not testing
any of your angular application code
model-view-controller
with angular it is very easy to develop
applications in a clean MVC way all you
have to do is split your application
code into MVC components that is the
model view and the controller the rest
that is managing those MVC components
and connecting them together is done by
angular automatically and there are many
more benefits as well like controlling
the behavior of Dom elements using
directives and the flexibility that
angular filters provide we will discuss
directives filters modules routes etc
with examples in our upcoming videos in
this series to build angular
applications we need only one script
file and that is angular dot J's
to get the script file visit
angularjs.org so here is that website on
this page you can find the download
button so when we click this download
button and now we can download the
angular J script file and here on this
page notice we also have a CDN link
there are several benefits of using CDN
and you can find those benefits by
clicking on this question mark right
here so what are the benefits of using a
CDN we get better caching decrease the
latency and increase the parallelism we
discuss these benefits in detail in part
3 of jQuery tutorial so I've already
downloaded the angularjs script file and
on this website you can also find
several resources to learn angular so
under this learn tab you can find videos
free courses tutorials frequently asked
questions etc and under this develop tab
you can find API reference this is
extremely useful when building angular
applications so I've already downloaded
the angular JS script file it's present
within the scripts folder and I have
this HTML page 1 dot HTML page now to
get started with angular there are two
simple steps the first step is to add a
reference to the angular script so I'm
going to drag and drop this on my page
within the head
action so we have a reference to the
angular script that's the first step and
the second step is to include ng - app
attribute somewhere within the HTML so
I'm going to include that within the
body element so ng - app so the obvious
next question that comes to mind is what
is this ng - app attribute in angular ng
- app is called a directive there are
many such directives in angular you can
find the complete list of directives on
angularjs.org so at the moment and now
we are on the API reference page and
within this API reference page notice we
have directive heading here and at that
we have several directives and within
the list we should find ng app as well
so you know what is this ng prefix
within the directive name it stands for
angular the ng - app directive is a
starting point of angularjs application
angular framework will first check for
this ng - app directive somewhere in the
HTML page if ng - app directive is found
then angular bootstraps itself and
starts to manage the section of the page
that has the ng - app directive at the
moment we have included the ng - app
directive within the body section so
everything within that body section will
be managed by angular now what we want
to do is we want to compute the sum of
10 plus 20 so 10 plus 20 equals and we
want to display the sum of 10 and 20 so
I'm including these double curly braces
here so what are this in angular terms
we call them binding expression so
within the double curly braces we can
specify any angular expression so I am
specifying 10 plus 20 so what is angular
going to do it's going to treat that as
an expression and add those numbers
together so let's save these changes
and let's reload this HTML page 1 dot
HTML look at that 10 plus 20 equals 30
we get the result of the angular
expression that we have within the curly
braces so these double curly braces are
called binding expression in angular now
at the moment if you look at this ng -
app attribute this is present at the
body tag level and what I'm going to do
is actually move that to the development
and I'm going to include another
development here and let's say within
this development we want to compute the
sum of 40 plus 50 so 40 plus 50 equals
again I'm including the binding
expression and we want to compute the
sum of 40 50 now look at this the ng -
app attribute is present only on this
development that means angular is going
to manage only that section of the page
so that development and any children
that development has got for the rest of
the page angular is not responsible that
means this data binding expression will
not be evaluated let's see what we get
so I'm going to save the changes and
let's go ahead and reload this page look
at that the binding expression that we
have within the other development that
doesn't have the ng - app attribute you
know that's not evaluated now let's see
what's going to happen if I move this to
the HTML tag level so now angular is
going to be responsible for all the
child elements within that HTML tag that
means you know both these binding
expressions should be evaluated now
let's save our changes reload this page
and look at that we get 90 as expected
now let's look at a few examples of
valid expressions in angular at the
moment they using 10 plus 20 40 plus 50
we can use something like this as well 1
double equals 2 is 1 equal to 2 now that
evaluates to a boolean false let's
actually get rid of 10 plus 20 from
there so when we reload this
it should say false on the other hand
one double equals one yes one is equal
to one so in this case it should
evaluate to true now we can also use a
plain old JavaScript object within the
expression so let's include you know an
object that has got name property and
let's say the name is David and let's
say we also have age property and age is
let's say 30 and from this plain old
JavaScript object I want to retrieve the
name property value I can simply do dot
name from that javascript object so
let's save the changes and when we
reload this it should retrieve the name
property value which is David we can
also use arrays so let's say we have an
array here and within the array we have
let's say list of names like David and
we have Pam and let's include another
name Sarah so we have three names within
the array and I want the last element so
I can specify the index position of the
last element which is two so in this
case this should return Sarah from the
array so let's say what changes we load
this page and notice we get Sarah so two
requirements to get started with angular
add a reference to the script file and
include ng - app attribute within the
HTML thank you for listening and have a
great day