AngularJS Tutorial - Part 3 - The Angular Way Video Lecture - IT & Software

hey there we are going to be learning
angularjs angular is basically an MV
star whatever it's you know one of the
ways of making a single page web app in
JavaScript so with no further ado let's
just get into it I'm going to assume you
know a decent bit about JavaScript
already once I'm done with this I'll
probably do a beginner level intro video
for people who are not familiar with
JavaScript already so kind of the
premise here is you already know what a
single page app is kind of all the
concepts behind it we're just going to
look into how to do a great one with
angular and why it's awesome for very
rapid development so kind of here's my
index.html what we got here just kind of
importing a basic stylesheet
nothing fancy I mean porting jQuery
angular I'm going to be using angular UI
router which is a kind of an add-on
routing system which is definitely so
far anyway the way to go with angular
and the only jsv I'm including is app
j/s so far and then some bootstrap stuff
so what we're going to do is we're going
to say that this is what we want our app
to be the first thing you do is you
define ng app equals and then the name
of the module that you're going to be
using for your angular app so we'll just
call it app so as to make it simple ng
app equals app so now angular is going
to instantiate on this element what we
are going to do then is we need to
define a view for the UI router so we
will do a div and we will go UI view so
that tells us pop what a review we're
loading right in there okay so basically
when angular sees an app what it's going
to do is it's going to evaluate
everything inside of it and it uses that
as your templating so basically you'll
see a lot of the angular way is your
views happen in the HTML and then you
have controllers and you have services
all of that build on top of that so kind
of an example would be lets say we want
a header let's go header and let's go
ng-include
this is going to include a HTML file for
us so we're going to go templates now
let me see what that is
templates now HTML and then so far we
don't have an app module defined yet so
let's go ahead and define our app module
first I'm going to go over to app KS
we're going to go angular well I got
some sort of you're going to go dot
module call it app and then the next
thing you're going to do is define any
dependencies in an array when you're
first defining a module you have to at
least include a blank array for
dependencies otherwise it will break so
I'm going to my only dependency is you i
dot router make sure you I router has
loaded before my app fires and now we've
got an app and you'll notice that it's
instantiated and I'm loading in my
navigation I'm going to go back to my
index I'm also going to add in a footer
ng and now I should have a footer I want
if there's anything in my footer my
awesome tutorial so that should be
showing up it's give me some sort of
error unterminated quote yep there we go
and you notice I'm putting single quotes
with inside of here because it's
actually going to be evaluating this as
a JavaScript string we can get into that
a little more later so now we have a
header a footer and absolutely nothing
coming in here so let's start defining
some routes you'll notice angular starts
off by giving us a hashtag navigation up
here and so let's start adding some
routes we're going to we have already
created the module now let's go config
and we're going to do our dependencies
one of the awesome things about angular
is it does
dependency injection if you have not
used dependency injection get ready to
fall in love with it
we're going to request two dependencies
here and it will insert those two
dependencies into my first actually real
it will insert those two dependencies
into the first two arguments of my first
two arguments my function here so okay
so what we've done here is we've gone
config require in these two dependencies
sorry I'm using half of a screen here so
it's a little probably frustrating and
then those dependencies automatically
get passed in order into my function
the reason we're kind of doing double
defining here is this is called
annotating and the reason we're doing
that is because if we didn't do that
when you minify it these are going to
get called like a and B and it's not
going to know what dependencies those
are so we've kind of got to define what
the modules are there and then you can
call them whatever you want but is a
good standard call them what they
actually are first move we're going to
do is your router provider otherwise so
when you type in anything else it'll go
to slash so now I should be able to go
to haha and it's just going to bounce me
back to slash test back to slash okay
that's all we need to do with the URL
router provider state provider is what
is given to us by UI router state
providers where we're going to be
defining all of our state's and ie our
routing so state provider state home
state and we're going to go URL that's
this URL we're on now template let's
just call it home and I should now see
home there we go I gave it a template of
a string so I could go home and I could
also go template URL
and that should there's no home HTML
which it's telling me that's not found
down here which is a good thing new file
can't type today
now you'll see home template has arrived
there so that's kind of a basic start up
let's go ahead and add another route
called what do we have we have about
once again can't type tonight about
we'll go slash abouts and it will look
for about HTML there we go so now if we
go to hashtag slash about we should get
about template and if we go hashtag
slash home home template so as you can
see we are very quickly creating a
single page app that just works angular
takes care of all the memory cleanup and
things that would normally be associated
with that let's go and make these
buttons now navigate us let me go to
navigate tml this is going to go to
about and this is just going to go to
slash and we'll make this go to contacts
save so I should be able to go about
change to about go back home and you
notice that this did not change that's
something we can address I'm going to go
another thing that you can do with
ui-router is you can instead of doing
href you can go UI - Esref for UI you'll
notice everything ui-router related
isn't ng it's UI state ref and we can
just call it about refer to it by name
that also works they are interchangeable
so about in home we're working great on
both Oh might as well just go UIs ref
okay and then another thing that we can
do is start building out these templates
some more let's go ahead and define a
controller on home so now home as a
controller and let's in the controller
use scope now so scope is the variables
and arguments that are accessible to the
template is basically what we're
providing so if I go scope dot title now
I can in my home HTML only I can use
angular's mustache like template and go
title so now it goes home or what would
be better doing h1 there we go home and
I can also go ul Li let me go back to
this and add scope items equals an array
scope items so now what I can do is I
can use ng - repeat equals item in items
so now each Li gets item so it's going
to loop through the items array and each
item in that array gets passed here I
can call this whatever I want I can call
this thing in items it's kind of
basically doing in each and now I can
reference it as thing so you notice now
I have a list and I can change this and
my list automatically changes angular is
really really fast with development so
then let's go ahead and so now you can
notice home and about we're getting some
drastically different templating options
it's lightning quick it just works
this controller obviously this pattern
will not work one thing you'll notice
that I forgot to do is I forgot to
annotate it I just went controller
function this will work totally fine
until you decide to minify your
JavaScript at which point this will just
be called once again a in which case it
will not know what a is it's not going
to magically know that that's scoped so
we're going to do is we're going to
annotate that say scope if you ever use
requirejs it's basically like using
require jsut just use an array and the
last argument of your array or the last
piece of your array is the function
that's executing so scope their scope
there and now that's going to work great
when it minifides because this is going
to be called a and these are both going
to be called a and it's still going to
work just fine so what I'm going to do
now is I'm going to break this
controller out into home control and
that's going to break my code because
there is no such thing as home control
I'm going to make that file now
angular module app this is going to be
part of the st. I'm going to consider it
a part of the same module I don't need
to put any dependencies in there because
it's already been defined
I'm going to go controller and kind of
the naming convention that's standard
for angular controllers just to end them
with ctrl and then let's just go
function actually I'm going to annotate
it same thing state function
I'm sorry scope scope probably could
have just copied and pasted that whole
thing there we go and now I just need to
add home controller to my index which it
will automatically get automatically get
minified on deployment and now my app
should be working yep beautiful my app
is working let me just copy and paste
this and create an about controller
about control I'm going to save you
there we go and so now about is are
going to have a controller of about
controller and now the about template
just needs to be adjusted to do the same
thing let's make the about template
exactly the same as the home template
and you see that now I have a different
title and a different list thing one
thing two thing three when I'm on the
about page let's work on getting this
guy fixed right here what I'm going to
do is I'm going to one thing you can do
oh yeah let's get into data binding
before I mess with this let's get into
some data binding this is one of the
awesome awesome awesome things about
angular is it's got two way data binding
just completely baked in so let's go to
our home control let's say title is home
ok great let's make an input and this ng
model what that means is we're going to
map it to an item in the scope and since
we already have something called home
actually title then you're going to get
yourself an input that is automatically
called populated with home and now I can
change it and you'll notice that scope
dot home is automatically updated you
can even add this to models that are not
defined in your controller ng model
equals my value and I'm just going to
print right here my value as if it was
already defined in the controller starts
off with nothing there there you go
if my controller is looking for scope
dot my value it will automatically be
populated it is
super awesome another thing you can do
is you can create select inputs based
off of information in an array so say we
have an array there we have home about
contact I can go here ngmodel equals
let's call it selected value which
hasn't been typed in and for ng options
it's going to be value for value in
items so basically it's just going to be
there you go you'll notice it starts off
empty because I have not defined a
selected value yet and now I have my
option of items I can go in home control
and I could go scope dot and now it's
going to automatically make sure home is
pre-selected I think it's called
selected value there you go
home is now pre-selected whenever I boot
up my page so it's really really a cool
thing let's talk about some services
let's wire in a web service now I'm
going to go to my app one thing that's
great let's say home has a dependency of
it needs to hit a service and load up my
friends list before it sends me to home
then we can do a resolve and pass in an
array and we can have it each item in
this resolved object is going to
represent a service call or something
that has to happen before it proceeds
and loads the controller in the template
so we're going to resolve friends and
then we're going to say that this has a
dependency of HTTP which is a built in
angular thing
and we're just going to return HTTP GET
api friends I just have a JSON file but
it would be no different it was an
actual service that is going to return
friends dot JSON and so one of the
things that it gives you is a response
we're actually going to want to parse it
down just a little bit so we're going to
use a then then response return response
data which is what the actual friends
JSON is you'll notice I just have a JSON
array name will xxx name Laura age 26
and so basically now before it goes to
the template and the controller it is
going to hit the friends API it's going
to parse that here which there's no real
parsing going except for giving me the
data it's kind of the equivalent of a
backbone parse is what we're doing for
those guys familiar with backbone and
now it's going to make a friends
provider available to this controller if
I want it so how we use that then did I
do that on home yeah at home so now I
can make scope a dependency and I can go
friends make these second argument
friends
scope friends equals friends and now
let's make this friend in friends there
you go whoops let's print friend name :
friend
age and let's actually use the right
brackets there you go so now we have hit
an API we've made that available what I
can do this do now is how about for each
one of these instead of doing an Li or
instead of doing that I do an input and
you model equals friend name age let's
say we want to change some stuff there
we go and now that is real time changed
in the scope and so let's do another
thing let's make a scope method let's
make a Save button clean this up a
little bit let's make this all nice and
bootstrap looking
looks a little nicer and so we're just
going to do is an ng-click which we can
now give it a method save ng-click save
and so if I go to this home control I
can now go scope save equals a method
and we'll just make it alert so now when
I hit save what did I miss no semicolon
there you go my live reload is not
working quite right today so there you
go so now when I hit save it's going to
do that let's actually make it alert
string if I scoped out friends there you
go so that's what we're saving plus a
little bit of random stuff that
angular's decided to put in there Bob
John there you go so now Bob and John so
I can also do a HTTP same thing post
friends and I can just put in scoped up
friends or actually I can just do
friends there you go that's going to
post that data straight back up and now
I have a real time editor for my friends
list if I wanted to make a button on
each one I deleted it
it's pretty bad button I could use a
glyph for that but let's go ng click and
you can actually put in an evaluation if
you'd like so I can go Oh index is what
my index is going to be I can go friends
friends splice that let's see if that
works there you go so now on ng-click
I'm going to splice out my index
straight out of friends and now it's
gone if I hit save I have nothing that
I'm posting back posting back an empty
array so that's kind of a rapid-fire
introduction to a lot of the angular
things that you can do another thing
that you can do like if we are
approaching this up here you can do a
class issue we can make this one let me
go to this friends JSON and we're going
to say I'm special actually you know
what since Laura's my wife and I'm will
I'm going to say she's special and I am
NOT false so now what I can do here is
we're doing this on home yes okay what I
can do is if you're not special I can do
ng class and now I can pass in an object
of the different classes that I would
conditionally like to add so I'm going
to go text muted which is a
bootstraps way of dimming it out and
that's going to go if not friend the
friend is not special it's going to give
it a text muted class and you notice
it's all didn't really do that big of a
deal because you can't really tell but
that's muted that's a lighter color
I could go special if friend is special
that might make a better way add a CSS
rule here let's go Styles splitter gets
a background red I didn't test my I'm
kind of on a test thing here so I don't
know with a apparently I didn't check my
styles on live reload so not sure why
that's not working but at any rate this
should have now a special class to it
yep
so if you look in my second li it's got
a class of special so that should be
background red not sure quite why it's
not that would be how you adjust a class
like if we were to just a class up there
let's see what are some other great
things that you can do with angular you
can provide services let's say that we
wanted to make this API something that's
reusable by a lot of different objects
it's cacheable it does a lot of smarts
to it in that case we would actually
move on to an angular service so what we
would do is we would create a services
file friends
let's keep this all for for easiness I'm
going to keep it all registered to the
app module and we're going to do factory
as a normal naming convention if you're
creating an angular service you're going
to start by upper casing it there you go
friends and whatever we return is what
our people are going to get when they
get whenever they load this module so if
we return this and it's just a list of
friends let's just return get which just
returns this guy so I'm going to return
an object which has a single method of
get and that's what my friends factory
is let me go ahead and add this to my
page my friend's service is added and
now what I can do is friends can now not
require HTTP can require friends and I
can go return
have the same effect yep there you go as
you can see no difference whatsoever
I can also instead of doing in this in
the resolve if for some reason I wanted
to do this in the controller at some
point I can add this as a dependency
here friends now is a service not a
resolve provider so I can go friends get
there you go so that's another way that
you can do it and now multiple
controllers can all share friends about
can use friends as a dependency about
items can be friends Duquette and now I
can mess with that service I can import
HTTP into this so get could now return
friends Jason then now that will work
exactly the same or should not sure what
I messed up on that but that should
basically do the exact same thing green
friends it's my Allstate agent I'm not
exactly sure what I messed up there I'm
sure it's just some small little deal
that I messed up I wonder if this has to
be now that's not it because that's just
a normal method and I'm sure it's
something simple but at any rate that's
basically how you would wire that in to
then be a resource getter and setter so
that's kind of your introduction to how
to use angularjs if you check out
ui-router you can also do nested views
and sub views and a lot of great stuff
on here and that is what you need to do
to get started so hope you enjoyed it
have yourself a great day