AngularJS Tutorial - Part 2 - Basic Walk through with an Application Development Video Lecture - IT & Software

hello today we're gonna look at
angularjs in sort of just a basic
introduction but my introduction I am
hoping we'll go a little bit further
than maybe some of the other
introductions you've seen on the web and
just to give a plug to john lindquist at
egghead I owe his videos have been super
helpful and instrumental in learning
angularjs so if you're looking for you
know shorter bite-sized videos that are
super focused and cover you know really
small topics you should go check that
out and I'll include a link to that in
this video at the end so let's just talk
a little bit about angularjs and why you
might want to use it I'm gonna give you
a bit of a history of how I came into it
my background in front-end sort of web
app development really was started in
jQuery just plain old jQuery which I'm
sure a lot of people started in and I
ended up moving on to use backbone for a
large number of applications and really
fell in love with the the idioms that
backbone proposes and the separation of
concerns that it proposes and for a long
time that's what I would use and when
angular kind of came on the scene I was
definitely not sold right away but I
think in the last six months maybe the
number of improvements and sort of it
hitting critical mass in terms of what
it's capable of are led me to experiment
with it and it it turns out it's a
pretty powerful platform and a lot of
the ideas that it exposes really helped
to make for the good separation of
concerns and I think it's probably the
direction that browser vendors need to
go so enough about sort of my
introduction let's let's talk about you
know at a high level what angular is
it's basically an extension to HTML you
can see the tag line here HTML enhanced
for web apps and misko hevery has a
couple of good videos if you google and
I'll include the links at the end where
he basically talks about
it's kind of what Google's vision for
what a browser would be like if it was
built from the ground up to build web
applications instead of just rendering
HTML documents and I think that's a good
good way to sum it up it's another way
to think of it as it's Google's vision
for what web components are sort of
isolated pieces of HTML and CSS and
JavaScript working together to create a
rich experience and it can do what other
frameworks like if you're using backbone
or ember it can do a lot of what those
do but it offers a lot more there's this
idea of two-way data-binding which we'll
take a look at yeah and the whole
objective I think in angular is to add
sort of a middleware layer that gets rid
of a lot of the redundant code that you
have to write with dealing with the Dom
basically you can work with angular
without having to touch the Dom at all
which is you know I was skeptical at
first but actually really refreshing and
another thing that I'm going to talk
about as we go through building this
little introductory app is an idea that
Mexico every has that he talked about in
his presentation on introducing the
animation module for angular it's is
that your UI code should be declarative
and your app code should be imperative
and we'll take a look at what that means
so to start we're basically going to
work through a small skeleton of an
application that I built and gonna step
through and hopefully give you a
highlight of the high-level pieces of
angular and so you can see that I've got
a directory here and I'm keeping this as
sort of vanilla as possible there's no
there's no script bundling there's no
grunt integration there's no you know
third-party build tool that's doing this
is just plain old files so that you can
kind of really get an idea of how this
works and how simple it is to get
started out of the box and you'll see
that I've got this empty page with
pretty much nothing in it but a pointer
to some style sheets using foundation
which if you watched john lindquist
videos you should be familiar with it's
just a nice little tool to escape
some some grid layouts and I've got this
app j/s and there's nothing in it right
now
and so if I flip back to the browser you
can see them you know I've got a tiny
little dev server which is just set up
this static file and nothing in there so
let's look at some of the things we're
gonna cover today we're gonna look at
angular's module system creating tiny
pieces of functionality and sort of how
to isolate things we're gonna look at
routing and the route provider how do we
get pages to transition because when
you're talking about building apps with
angularjs you're probably talking about
building a single page app you don't
have to but that's kind of really where
it shines we'll talk about dynamic
behavior and the scope and how to avoid
writing a lot of Dom manipulation codes
and then just extending the semantics of
HTML with what angular calls directives
and there's a number of those and on the
way you know hopefully I might get into
how angular does dependency injection
but that's you know maybe beyond the
scope of this video and there's a number
of other resources that I can include to
cover that for you so to start with I
think what we're going to do is look at
the the top-level construct that angular
uses and this is the ng-app directive
and so this directive here a directive
just means you know if you're thinking
of things in terms of declarative this
directive is going to tell angular that
when it hits the bootstrap phase of its
life cycle it's going to direct angular
application code to do something and in
this case it's gonna point out that we
want to have an app that is gonna be
scoped to this page and usually you only
have one of these and so I'm you know
putting this attribute in here and I'm
defining this app and the next thing we
need to do is actually go in and create
that app so let's do that and the way
you do that is not app you use angular
dot module and then the name of your app
and you provide any dependencies that
are going to exist and that's basically
it it's important to note that if you've
come looking at other angular tutorials
this is basically a setter and this is a
getter so the parens or the the array of
dependencies is important and if you try
and do this before you've defined it
you'll get that a weird module undefined
error so if you're defining the module
for the first time you're going to want
to include those dependencies and if
you're attaching things on to it later
you can do that here so for the purposes
of this I'm just going to assign this to
a global on the window and the next
thing we we want to do is let's go back
here and see that this ng-app attribute
has this string of app and what that's
going to do is basically when angular
loads up on the page that app will exist
and oh looks like I've got our reference
error I might not have included the
right packet of angular right I need to
include angular as one of the scripts
here so let's just do that
reload there we go
and so you'll see that I've got this app
object and nothing really magical
happens except for the fact that that
directive on the HTML element basically
told angular that hey you need to go and
wire up this this app so that basically
you're aware of this thing and there's
some other properties that got added
here but they're not really important so
one of the first things you might want
to do when you're building an angular
app is add routing because the whole
point of this is to build a single page
app so we're just going to add a couple
of pages to the mix and to do that you
use something called config you're gonna
configure this app and that takes a
function and inside of there I'm going
to inject the route provider if you're
coming to angular from backbone the
route provider is kind of analogous to
backbones router but it does some things
slightly differently which we'll take a
look at and the way that you interact
with a row provider
is you use these adjectives so Wow when
I hit login then I'm going to provide
some configuration that says I've got a
template that I'm gonna load at this may
be a simple HTML page and I've also got
a controller that I want angular to
inject and instantiate and pass the
right variables so that it knows about
what to do so let's do that
so we need the first thing we need is a
template so let's add that template and
I'm just gonna go and grab some code
from over here that I have it's triple a
couple things out this is just using
some foundation classes so you can see
this is plain old HTML markup so there's
our template and I need a controller so
let's just do that right here and it's
just going to be a function and it's not
going to do anything about it right now
we need the controller so that when this
route gets hit angular will instantiate
the controller and we'll get a an
undefined error so let's take a look so
nothing happens
and if I go to login and I must be
missing a piece here let's add the other
piece that you need otherwise so
otherwise in when are the two adjectives
that you interact with and we're going
to tell angular that you don't get a
route looks just redirect to
now mm-hmm
so normally now's when I'd stop the
video but I think you know it's useful
to leave this here and think about
what's going on what I expect to see is
that angular is gonna go and try and
fetch this template and inject it ah and
this is the next piece of the puzzle
that we need so we've got this this
route def defined because we said that
we're going to redirect to login we've
got our controller but the next piece
that we need is somewhere inside of our
single page app to inject the actual
views the pieces that are going to get
stuffed in there and this is another
directive that we're going to use called
ng view and I have some other markup I'm
gonna stick in here and this is the only
market that's gonna go in here so we've
got a foundation row that's maybe just
big here's my title and I've got another
directive this is another attribute
directive and this is gonna direct
angular to say whenever there's a view
that is gonna get rendered this is where
I want you to stick it so now I could
reload there we go
so amazingly there's seem like there's a
bunch of magic that happened there so
let's break it down so we defined our
app which tells angular about the
existence of this app we've configured
our app with a route provider so that
when the login road gets hit we want to
load this template and I'm instantiate
this controller and we've told the app
that if you go to any other route you
know that doesn't exist it's just going
to redirect to login
the other cool thing is you know we just
put this template at the root and I've
got a basically a static web server just
serving this stuff on port 8000 but
angular actually went out and fetched
that template via xhr which is pretty
cool the other cool thing is that if I
had a different route and I went back to
this login route angular wouldn't
refetch the the template it has
something called a template cache and
internally and so you know the simplest
sort of out-of-the-box solution that you
get is I can just work with plain old
HTML files I can stick them in here if
they were in some subdirectory like
templates you know then I could just
pass the path angular will automatically
go fetch it if it's not in the cache and
cache it for me and that's that's pretty
cool that this kind of interaction gets
you a lot further with you know a lot
less code than you would have to do if
you were working with a backbone router
and then setting up sort of a paradigm
to when this route is hit I want to
figure out this view that represents the
page and I want to inject it at the
right place so it seems like my
experience that angular has led me to a
place where they've thought about a lot
of these sort of common things that
you're gonna do in a single page
application or in a rich application and
they've taken care of some of it for you
and I found that really refreshing like
I said I was skeptical at first but but
it's pretty cool
so now let's we don't need to touch the
index anymore let's add another route so
that we can get to another page and see
that I'm not just blowing smoke when I
calculate that template cache not free
fetching templates again so this one
will be home page and it'll have its own
controller as well and so now we need to
add a controller and then we need to
actually add html5 and I'm gonna grab
smart markup and hold a couple things
out
so that it's just plain old markup and
we'll kind of work our way through this
process so now if I reload I've got the
login page and if I go to home there now
I've got the home page and there's just
a couple images and these are the two
pages that we're going to work with for
our app and you can see that an xhr came
through for logging and an xhr came
through for home but if I go back you'll
notice that now that those two templates
are in angular's template cache we don't
have to read refresh them so that's
pretty cool and that's a lot of
functionality like I said that you get
just sort of out of the box and you
don't have to think about pre compiling
templates angular supports that but you
don't have to think about all this stuff
so if you want to get up and running
it's it's really really simple so the
next thing that we're gonna do is start
adding some dynamic behavior and talk
about something called scope so the
first thing that our app wants to do is
probably gonna be to log in so when we
visit this page and we fill out these
values we want to hit the login button
and have some sort of behavior happen
and then head over to the home page and
the way we do that is by interacting
with the scope and so let me take a
moment to explain what the scope is
basically when angular the route
provider triggers this route it's going
to you know inject this template into
that ng view it's going to instantiate
the login controller and then it's going
to pass there's going to be a scope
variable for each of these controllers
and if you want to think about it as the
scope is basically just like a channel
that's connecting this piece of Dom with
you know this scope object which you can
basically assign things to and so for
the purposes of login what we're going
to do is we want some credentials and
then the really nice thing about angular
is
you don't have to work with any
predefined types you just work with the
things that you're already used to
working with if you're used to working
with JavaScript which is object literals
and arrays and you know that's basically
it strings if you're if you really want
angular it kind of takes care of wiring
up all those things for us so in our
case we've got a username and a password
in our scope and we want to make sure
that when the user fills out these forms
that those things are kept in sync and
if you're coming to this from the world
of backbone you would probably have to
add a model which is represented for us
by this plain old JavaScript object
literal you would have to add some a
view to render out the form you'd have
to add some events so that when you
clicked or when you finish typing into
the input those values would keep in
sync with the model and things like that
and angular gives you something called
two-way data-binding that just kind of
does this for you and you might think
well that seems like magic and I don't
know if I want to do that maybe you
don't maybe you're comfortable using
backbone and that's okay but for the
purposes of this video we're gonna
explore what it means to use the two-way
data-binding
so the way that you keep Dom elements in
sync remember I talked about declarative
is you add a directive and the directive
that is going to tell angular to keep in
sync with something is ngmodel in the in
in the case of form inputs and the value
for this attribute is going to be
something that exists on the scope and
in this case we're gonna say that it's
credentials dot is right and the value
for the password is similarly going to
be financial stuff password and that
directive basically is the declarative
way of saying hey angular when this
thing is rendered and you inject it into
the ng view I've got this scope and
there's going to be something called
credentials on it and I want you to keep
the values that the user types into this
input and sync with that
that object literal and the username
property in the password property so
let's see if that actually works and I'm
gonna kind of hack at this and I'm just
gonna say what about scope equals let's
go so that we can take a look so let's
tie it Ralph and secret password and
let's take a look at that scope object
and there's our credentials and hey now
you can see that my username and
password and if I change this to March
Simpson and we take a look at that you
can see that that just happened and
that's you know you've probably watched
other angularjs introduction videos and
that was sort of one of the first big
WOW moments those wow that's sort of the
power of two-way data-binding and pretty
cool stuff
here's let's add another directive let's
edit required attribute to these fields
and the required attribute works if you
have something called an ng submit
directive in your code and basically
what that does is suppresses the normal
form submit events and I'm gonna create
a function called login and just like
everything else these the place where
angular looks for this stuff is on the
scope and if I can't find it there it'll
look for it on something called the root
scope which is sort of beyond this but
if you think about the scope in the root
scope have sort of a relationship like
the prototype does in JavaScript if a
object doesn't have its own property
JavaScript will attempt to look that
property up on the prototype keep going
up the chain that's sort of how angular
works it checks does this function exist
this login function exists on the scope
and if it does I'm gonna call it and if
not I'm going to check on the root scope
and if it's not there then I'll throw an
error so that means that we need to
create our login function so let's do
that
and it's gonna be a plain old function
and the cool thing you know getting back
to this idea of declarative in the UI
and imperative in in the in the app code
declarative just means that you're
telling some external system how you
want to interact so in the in the case
of the market you know decorating it
with these directives is telling angular
how it should interact when certain
things happen imperative is basically
modifying the state of our application
so when we login we want to check the
state and angular gives us the ability
to do that because we're guaranteed that
this scope dot credentials will
automatically be in sync so we can just
do something like check the value
username that's not important and now
we've get a couple things that we'll see
here so here's our form so I'm gonna be
Bart Simpson and username must be Ralph
so that's pretty cool so we can see that
that is already working and then the
other cool thing is that we added those
required attributes right here and that
works with ng submits to basically use
html5 validation so that the user can't
submit the form this doesn't replace
server-side validation it's just one of
those nice to have so that you know that
submit event isn't going to happen in
our controller login function isn't
going to get invoked until the users
filled out the things so that's not very
useful what we really want to do is
redirect to our home page if the if the
user name is Ralph and the way that we
do that is using location dollar a
location and if you're interested in
finding out more about this stuff you
can go to develop an angularjs org the
develop menu go to API reference and you
just
look through this stuff the docks are a
little unwieldly at first to get used to
but once you kind of have dug through
them a bit you'll find that there you
can see location and we can see that
there's a bunch of methods and half is
the method that we're going to use and
this is sort of analogous to backbones
duck navigate function in the backbone
history API and we're going to inject
that dependency so we're gonna stick
location in here in this function and
what that's going to do is when angular
goes in instantiates this controller it
will look up that location internally in
something called a location provider and
inject that dependency and this is part
of the magic of angular's dependency
injection framework and so we're gonna
say if the scope credentials username is
Ralph then that's that's what we're
going to use as our indicator that
they've logged in properly and they'll
have to have a password as well but we
don't really care so we're just gonna
say a location dot oh there we go we got
redirected to the home page so that's
pretty much how easy it is to you know
redirect between different paths in
angular and so that's cool let's add
some dynamic behavior to the home page
right now all it does is show these
images and a message on the screen you
can see there's these two images stop
nicely with foundation we've also got
that logout button so we're gonna want
to implement that at some point let's
take a look at what we want to do first
so we just got this static markup and
one of the first things we can do is you
know we looked at adding ng model to
keep the value of this input and sync
with a scope value the user credentials
you can do that as well when you're
rendering things initially
if for example I wanted to create a
fragment here that had a property called
the title on the scope for the home page
now I can go back here and I can just
say scope title equals senators because
they beat the Canadians last night many
of you hockey fans and now I can see
welcome to the Senators page so that's
cool anything inside of these double
curlies is basically going to reflect
the value in the scope and if I do my
little trick where I assign that to a
blow Bowl and I say so
dog title it senators and if I change
that to Canadiens nothing happened
because I need to use apply to make that
change happen and internally angular has
this digest and sort of loop that's
basically listening for changes it's
sort of like if you're familiar with
game programming it's like the big event
loop the master loop that's just sitting
and sort of coded is evaluated upon and
there's a tick that happens every you
know every second or whatever angular
has something similar and so because I'm
modifying the scope outside of angular's
directives I need to call scope dot
apply to to make that reflect in me why
normally you don't have to call dot
apply it's just something to be aware of
okay so that's cool we've got our title
and let's say this is the home page and
maybe we want to add another piece of
dynamic state we want to add this
message and the message that we want to
add to start with is gonna have
something to do with our our images
because that's gonna demonstrate a
couple of the other features of angular
so let's set the default message to
mouse over these images to see directive
at work and now you can see that my
message is there and basically that
should give you a hint as to what we're
going to add for dynamic behavior next
and so one of the things that's really
cool about thinking of your UI code or
your markup as sort of declarative is
thinking about attributes that you know
might not be part of your html5
vernacular that can have sort of
declarative implications about what's
going to happen and so the thing that I
thought was cool when I first started
creating directives and there's many
different types of directives but for
this case we're gonna talk about
attribute directives was the fact that
my markup became sort of self
documenting I could look at this
fragment with you know a little bit of
the context of knowledge of angular and
just by reading it you know this these
attributes so let's say you know this
one's gonna show shows message when
hovered so some somebody whether it's a
designer or developer come in here and
say oh that's cool you know when when
this message when this image gets
hovered I'm gonna show a message and
maybe that you know isn't super clear
but at least it's a lot clearer than
having to go to some external javascript
file figure out what Dom node it's
selecting and what model it's working
with this sort of tight connection of
I've got this Dom fragment and I've got
an angular scope and I know that those
are kept in sync it is very useful so
this is this is a directive that we're
gonna create we're gonna do it for both
of these things these committees which
kind of shows how you can reuse these
things and let's have a message property
which is going to be I'm the first image
and I'm the second image and when we
hover those we want to show a message so
I'm going to reload nothing happens
angular will internally look and see if
there's a directive that matches those
attributes it knows that there there
isn't but it doesn't fail and nothing
bad happens so let's go and add that
behavior and do that with something
called directive and you'll notice that
my directive was - Erised
and that's sort of the the idea with
html5 attributes but when you define the
directive name you're going to use camel
case so shows message when hovered so
that's our directive and the general
form that directives take is that
they'll return an object literal which
configures angular's so that when it
invokes this thing it's going to invoke
a function under the hood and grab this
configuration and then return me the
thing that I need and the first thing
you'll run into is this restrict keyword
and we're going to restrict to a which
is for attribute here's the the crash
course and the different types there's
attribute C equals class name so you can
actually create your own directives as
class names when angular sees that
you've added a specific class to an
element it will invoke this directive
you can use Eve for element which is
basically an HTML element and this is
what allows you to create your own
custom syntax if you've watched john
lindquist videos I think we get one
where he adds a Superman element and a
message and the last one is M which is
HTML comments you can actually have
directive stats or comments for most the
most part starting out an annular you
probably just work with attribute
directives the amazing thing about
angular is that you don't even have to
use any of them to get started you know
the two-way binding and the scope and a
controller is really sufficient to get
you kind of started the other thing we
need to provide to this directive is a
link function an angular will call the
link function to basically bind the our
directive and the piece of Dom fragment
that it's on with this function and this
function gets some arguments passed to
it it gets the scope the specific
element and any attributes on that
element and so for our case what we want
to do is we want to grab a handle to
that original message that exists in our
scope right here and so this scope is
basically the same as as this one
because it's inside of this directive is
eating
used inside of an element's or a
fragment the home.html that is
instantiated with this controller so
that's what that's what this scope is
coming from so let's grab our original
message equals liftoff message and let's
do it over in a function and if you're
familiar with jQuery this is where you
might have used something like a grey
select element on mouse-over like that
notice that in my vendor list a vendor
dependencies I didn't include jQuery you
can use angular completely without
jQuery and it uses something called JQ
light under the hood which is what this
API is and it's basically a subset of
jQuery functions it's super light that's
why it's called JQ light but it allows
you to manipulate the Dom and sort of as
a rule of thumb if you are gonna add
manipulations like this directives are
probably the only place that's
appropriate to do it in terms of the
angular lifecycle you think about jQuery
or even backbone apps your sort of
default inclination is to monkey with
the Dom angular tries to limit or the
the ethos is such that you should really
limit the amount that you monkey with
the Dom and so but if you are gonna do
it you should do it inside of directives
that's sort of the rule of thumb so our
link function when this directive is
detected we're gonna grab a handle of
that original scope message and when we
mouse over we're just gonna change the
message and we're gonna grab it from the
attributes because we stored the message
and this other attribute on the element
so let's grab the message attributes dot
message and that's as easy it is as it
is and let's do why cuz we're monkeying
with things internally and when they
call so let's say that
equals original message so that we can
restore it and again we'll call us
kicked out of play and now if we reload
this page of when we mouse over it
should work and it didn't so again I'm
not gonna stop the video let's see if we
can figure out what went wrong
sure so I apologize I know I said I
wasn't gonna stop the video but I got a
little pop-up that my startup disk was
almost out of space from recording in
ScreenFlow anyway I figured out what it
was I didn't actually have anything
wrong in my code there's a bug in Chrome
that's really kind of annoying so if you
see that I'm mousing over these and
nothing's happening it seems like
whenever you have developer tools open
in the latest stable channel some some
updates to the dominant reflected so if
you can see now once I close the
developer tools I can see that I'm the
first house and I'm the second notice
and that directives actually working so
that confused the heck out of me here
for a second but I have actually run
into that bug with chrome developer
tools before so reminds me that I need
to go and submit a patch for that or an
issue at least anyway so let's kind of
review here we've got that shows message
when hover directive we're using it in
two places but we only have the code
once and we've got the message the
attribute and I talked about how we can
look up values on the scope and it will
look up the scope chain so if the scope
message doesn't exist it's gonna go look
up to the parent scope which is for the
controller find that message and I
talked about JQ light this is probably a
good time to go take a look at that if
you're looking for the reference you can
just look at angular element and it will
show you the methods that JQ light
provides and it's trying to match the
jQuery API as much as possible but it
doesn't provide all of the functionality
and some of the functionality is is
limited it kind of describes the
differences here and so yeah it's good
to familiarize yourself with that you
can use jQuery with angular and if
jQuery is included before angular loaded
angular will detect that and use jQuery
internally but I would recommend
for any experiments you do with angular
that you just work without jQuery so now
we've got a pretty decent app the last
sort of piece that we need is this
button at the bottom here the logout
button so that when we click logout we
can get back to the home page so let's
do that and we can do that with another
directive ng quick and you should be
familiar now with the fact that this ng
click is a directive it's declaratively
telling angular that when this thing is
clicked so I want you to go to the the
country the scope for this look for that
function and invoke it so let's go back
to our home controller and let's go
logout function and it's going to just
get your path back to again and again we
need to inject the location service that
anything provides so that we can do that
so we just add it as a function argument
and I'll talk a little bit about
injecting these dependencies and how
this works but for now if we go and
reload the page and we hit logout we can
see we got redirect back things are
working
we take take well as our username will
get redirected and if I close close
chrome dev tools those however things
will work so just to be clear that's not
a bug in angular that's a bug in a
chrome dev tools latest and now we have
kind of this full feature to happen
that's working
the other cool thing if I didn't mention
it before is you'll notice that I can
click on the button or I can hit enter
on the keyboard and that ng submit will
handle both of those to submit the form
so just a lot of things you know you
might be familiar with finding a submit
handler and jQuery preventing the
default event and all that angular
really abstracts away having to think
about the Dom a whole lot so you're left
with you know app code which is
imperative just monkeying with the state
of things and sort of this declarative
UI code
um so I know one of the things that kind
of irked me when I was putting this
together was I've got these concerns
about login and logout and that doesn't
really seem like it belongs inside of
this controller if we're thinking about
code in terms of the single
responsibility principle I really want
this controller to not be concerned with
my authentication stuff and so one of
the cool things that angular gives you
is the ability to extract those things
and inject your own dependencies so you
know I've got location dollar location
and dollar scope these are magic angular
things that are provided for you by
default but you there's nothing
preventing you from injecting your own
dependencies and the way that you do
that is by extracting things into
services so we'll use a factory and I'm
gonna call this a naught authentication
service and we're gonna pull that
location dependency out of our
controllers because you know maybe they
don't really care about the location and
we're just gonna pull it into this
authentication service and a factory
just gives you the ability to return an
object which has a bunch of properties
on it and so we're going to return an
object with two functions or login
function and I'll go function and so we
can encapsulate sort of the concerns for
authentication inside of here and the
login function is going to take those
credentials that we can pass it in and
so now we can pull in all that behavior
here and stick it in here and instead of
that we can just say credentials because
it's a local variable and that's nicely
encapsulated and we can do the same here
and stick that inside of logout and now
how do I get this thing in well I've
registered this on 2/10 occation service
and there's nothing magic about this
name it could be called fubar
just chose to call it authentication
service and I've been capsulated the
behavior of this is my interface I've
got a login and a logout function for
the authentication service and I've
declared it with a factory there's a
number of different ways you can declare
services in angular I'm not going to go
over than here there's a couple of good
videos that john lindquist has but
factories probably when you'll use most
commonly the the big point here is that
this is basically acting as an interface
and I've got two methods logging and
lockout and I'm injecting the location
object in here so that I can work with
it and now I can use that just simply by
passing it in here as an argument and so
this argument matches the value here
that it was declared as so I'm gonna use
that in both cases and for login I'm
just gonna say I'm gonna call it
education service login and I'm gonna
pass the credentials Angeles and
similarly for logout and log out and now
you know I've exposed those sort of to
the public interface which is my scope
here that the mark-up can can use but it
doesn't need to know anything about the
internals and I've extracted that stuff
into a service object and the benefit
here is encapsulation and isolation and
now if I wanted to create alternative
services that were responsible for the
authentication all I'd have to do is
match the interface the login and logout
and due to the Liskov substitution
principle I should be able to swap out
any other authentication service that
matches that interface and just drop it
in to the controller and things should
just work transparently so that's that's
sort of the the idea around services in
angular is extracting things into
interfaces or pieces of information that
will be injected throughout your
application so let's see if that
actually works
there's the logout function
and I come back to Ralph and login and
my validations still work I can hit
enter
thanks for working let's make sure that
that code is actually loaded let's look
at the sources tab we can see that
there's my authentication service and I
can actually insert a breakpoint on the
location and see that it got hit so
that's how you can kind of inject your
own dependency so if you if you're
starting out with angular and you find
your controllers are morphing into these
gigantic objects there's probably some
concerns you can extract and the logical
place to extract them if they're
service-related is into a service with
the factory if you have static data that
you need to pull out and make available
there's you know a factory it might be a
good place to do it
there's a couple other approaches that
john lindquist talks about in his videos
and so sort of to wrap up the last thing
I want to talk about is how this
dependency injection works because it's
a little bit like magic when you first
look at it and there's nothing too
mysterious about it so you know I've
kind of been cheating here and using the
short form of defining these things but
if I actually went to minify this
application using something like uglify
it would totally bust everything because
one of the things i'll if i does is it
mangles argument names because you know
in the middle I JavaScript it doesn't
matter whether this function has dollar
scope or whether it has a B you know the
browser doesn't care it just needs to be
able to map those function arguments to
the right thing but in angular it's
particularly important the name of the
argument and so the way that you get
around that and the way angular's
dependency injection works is it
actually when it when it's going to look
to inject a dependency when this
function is called it's going to look up
the value of this in the registry
internally and angular and it does that
by going and finding that thing and to
stringing the function so that it can
actually get the name of the dependency
so it's gonna to string this function
and look for the authentication service
string inside of it's in this app's list
of factories
and so how to avoid that when minifying
well basically you just need to provide
a little bit of extra information we
need to provide an array where the first
end arguments are the list of
dependencies in the last one is a
function and so it adds a little bit
more overhead to your markup but doing
this and adding those things explicitly
and naming them basically allows
minification to work let's do this one
as well and things should just work yeah
there we go
and so what this does is when angular
will go to to string the function the
minification process doesn't monkey with
strings because it can't reduce them any
more than it has and so now we have this
list of explicit dependencies and when
angular will to string this function
it's gonna go and look for this string
and map it to this argument name so now
these argument names you know don't even
matter I could have foo and bar and it
will map these things and just to prove
that say food up credentials and food
out login are dialogue in bar maps to
our thing authentication service and if
we go back here oh I'm still referencing
this dope food doctor credentials cool
and things just work so you can see how
internally it doesn't matter what these
arguments are named once I've explicitly
defined those dependencies here as
strings it's gonna go and map this
authentication service to that argument
and this scope to that but for when
you're working you know just playing
around with it in in development mode
it's totally appropriate to to work
around it with a shortcut just something
you should be aware of when you go if
you're building this thing for
production it would be interesting to
see if there's some sort of post or pre
production task that could automatically
go and inject those things so that
you didn't have to do that in your
actual app code because that seems like
sort of a cross-cutting configuration
concern so maybe somebody some
enterprising individual out there could
go in and build a grunt plugin that did
that after the fact or something like
that I'm just going to replace these
things so yeah that's that's my
introduction to angular and this code is
available up on github go-to line and
angular templates and this code is
actually a little bit more full-featured
I basically extracted a lot of these
lessons and stuff them into alignment
config and what this gives you is the
same app but there's a little bit more
of a build process involved using
lineman and if you're not familiar with
lineman I'm going to add a link at the
end that you can go watch a screencast
about lineman
but basically we pre compile all of the
templates to avoid those xhrs when
you're fetching templates and split
things into separate files so that not
everything exists inside of this which I
can't take it Appaji as file and that'll
show you how to do that there's a couple
of other configuration things so if you
kind of play around with this repository
which is available on github as well
include the link and you want to kind of
take it to the next level and add you
know what would this look like if I
added a build step what would it look
like what are the grunt tasks that I
need that's kind of what lineman does
it's sort of analogous to yeoman if
you've used yeoman just a little bit
lighter weight so I hope you enjoyed
this introduction and if you have any
questions please feel free to hit me on
twitter i'm d major on twitter and on
github wherever i'm happy to answer
questions I usually hang out in IRC it
as Dave Moe on freenode as well so feel
free to ping me thanks