AngularJS Tutorial - Part 11 - AngularJS fundamentals with Rapid HTML5 Video Lecture - IT & Software

hi everyone this is really exciting this
is a TV studio so I've never done this
before I really enjoyed the first few
speakers talking about the Toronto tech
community because my company one of the
things that we always talk about when we
talk to American companies is that
they're much better off dealing with
Toronto to build their software because
there's a lot of great developers in
Toronto there's a ton of amazing schools
and if you try to hire developers in
Cambridge or in Silicon Valley good luck
someone I used to work for I won't name
them but they're in a very hot startup
in Cambridge and they're paying $30,000
referral fees for developers now imagine
you have to compete with them to build a
team or is in Toronto you can really put
together an amazing team and build
amazing software so I think that we'll
see lots more startups actually coming
to Toronto in the future so I'm talking
about angular fundamentals for rapid
html5 application development and I run
the angularjs meetup in toronto we've
been around for four months we're going
to be having our fourth meetup next
Wednesday and we have 500 and almost 550
people in the group our very first
meetup which was four weeks after
founding the group we had 200 people
show up I think there was like massive
200 people live watching the meetup
Matthew was kind enough to stream our
third meetup and is a great statistic we
had 43 thousand views on justin.tv
thanks to Matthew getting us on the
front page probably forty two thousand
seven hundred were there for a second
and a half before they realize they were
lost because it was a very technical
event but it was really awesome and it
was a three hundred concurrent people a
hundred people there and probably
another six hundred people have watched
the talk since then and so the interest
in angularjs is just incredible and it's
extremely well deserved because this is
the html5 Toronto group I'm going to
talk about it from a slightly different
angle and not so much a development
angle which I am but really you can
think of it it's html5 applications and
html5 is really a revolutionary
technology because it brings you fast
JavaScript it gives you compatible
browsers and it gives you a bunch of
services that allow
even run offline even if in a web
browser or in a mobile phone and you can
do responsive web applications right
that's all based upon html5 and with
that it's an application platform in
itself and with it being so robust and
being able to handle so much of the
application load you can move almost
your entire application there and we're
going to talk about that and so you can
think of you know if you're building
html5 applications you're putting more
in the browser if you're putting more in
the browser it needs a new approach and
that's angular and so this slide sort of
covers that the next generation web is
inverted you have that traditional
server-side application where you've got
to build massive server farms to scale
and you're rendering web pages and
you're serving them out that's moving to
an API centric web where most of the
application is running in the browser
whether it's on a mobile tablet or in a
browser and the server is disappearing
it's an API it's JSON Java JavaScript
object notation being sent back and
forth and that means you can use generic
web database backends and you can scale
much faster much easier and you don't
have to talk to the server as much and
so in terms of this I like to call this
the Hat stack I just like making a
acronym so bear with me
but html5 is the foundation anyone I
talk to about angular I start talking
about html5 and how revolutionary it is
and how that enables applications in the
browser and angularjs is the best way
for building those applications which
we'll go through and that results in a
thin server and so this is a drastically
different application architecture than
from five years ago and even five years
ago that was what maybe going back maybe
eight years ago was the beginning of the
ajax revolution where to create really
good user experiences in the web you
started putting in more and more
javascript javascript was good enough
the document object model was flexible
enough the api's were there jquery came
out and it was a tsunami you know
rolling through the web development
world an astounding number of web sites
in the world use Jake
very and they do it for all kinds of
stuff animations transitions and it
makes the applications much more
interactive but as you build bigger and
bigger applications it becomes very hard
to use that becomes very unwieldy and a
different approach is required and
that's where you get into a full
application framework such as angularjs
and once you do that the server starts
disappearing so in 2005 50 % of any web
app was javascript in the browser and it
was all hacked in and it was hacked into
give a good user experience and what
that resulted in was duplication of code
because you have to duplicate that same
scenario that you've done on the server
already in the browser in 2013 with the
emergence of better JavaScript libraries
and a much higher demand for a user
experience and responsive applications
70% of your application is probably
JavaScript even if you're using PHP Ruby
Python Java you're getting to the point
where if you're writing an excellent
user experience 70% of your user of your
codebase is in JavaScript and so why
call it a Python app why call it a ruby
app well I call it a PHP app it's a
JavaScript app with some other code on
the backend the last version of Basecamp
which is one of the more famous Ajax
applications out there and it was the
start of the rails application framework
came from it was 5,000 lines of Ruby and
5,000 lines of CoffeeScript 5050 and
that's a server-side application they
use some javascript in the browser role
a lot obviously from the numbers their
CoffeeScript is a very concise version
of JavaScript it's about the same
density as Ruby and so and then the
backend database is like couch and
MongoDB speak JavaScript and so
JavaScript is really taking over web
applications and because of this if
you're building a singer' single page
application you remove more from the
server those big heavy back-end
applications become somewhat of a poor
fit for most business cases and so this
is your traditional server centric web
application and we're moving to a
browser centric html5 world where the
templating in the routing is moving up
into the client and what does that mean
for the server it's gone and that's one
of the mistakes a lot of people make
when they start with angularjs is they
do business as usual on the server and
then they start trying to use angular to
enhance the webpage like they do with
jQuery angular is not like that angular
is a full web application framework it
is everything that you would do with PHP
or rails mostly everything and it's in
the browser and so you don't need that
in the backend and it uses restful api
is to talk to databases and backends if
you take a know SQL database like
MongoDB your data query language
disappears because a lot of the backend
in modern web development is really
fighting SQL to get it into a format
that your application can use JSON is
JavaScript object notation and it stores
your data in a document format that if
you design it well and your application
is of the type that's a sort of a
traditional crud application create read
update and delete then you can pass that
document almost straight through and
there's a lot of startups now they're
focusing on back in as a service there's
a firebase you can build angular apps
directly against it there's a mobile
startups there's a Dream Factory there's
a ton of companies starting to build up
in that space I still don't really want
to build my apps directly against the
back end as a service because then I got
to pay them for every single hit I
prefer to put a server in place and at
least implement some caching because
it's more cost effective and their
security is still a work in progress but
that can definitely be seen as sort of
the future until your server is really
simplified it's authentication it's
integration its payment gateways and so
some domains will need this such as
retail you're going to have a lot more
on the server in other areas you're
going to need it because you're going to
be doing a lot of computation stuff and
you're going to need the libraries
you're going to have to tap into a
different ecosystem so one pain point in
a full javascript stack if you're using
node which is a JavaScript server-side
technology is that
really built to work with Mongo and
everyone's using Mongo with it and so if
you want to use an SQL database with
node you're going to be in for a little
pain compared to working with Python or
Ruby or PHP it's not as robust but in
other areas for other libraries for
building out your app traditional web
technology it's fantastic and in the
other areas like scientific computing
right so python has wonderful libraries
for scientific computing if I were to
build a scientific computing back-end I
would use Python and I might still use
node as an API server and then plug into
that and so it's really becoming a
server service-oriented API centric sort
of back-end but those are some of the
reasons that I would move away from a
full JavaScript stack but that's what
we're seeing thin server computing so we
had the thin client era and we're
entering the thin server era and it's
because the most powerful computing
platform that's available for building
your apps is the browser and so this is
the new stack it's not just buzz all
three tiers have changed the client has
become browser centric and
model-view-controller is a way of
building complex apps the server is a
thin server rest event-driven
application and the databases are
becoming document and web-centric and so
MongoDB is great for rapidly building
your app it makes it easier but it's
also great for scaling your app because
it's web friendly it's not so good for
doing complex transactions and certain
types of reporting scenarios but it
really depends on the mix of your needs
in your application so three things have
changed this is the reaction a lot of
people have there's a lot of turmoil
everybody I talked to in the Toronto
tech community has an incredible amount
of angst they're trying to figure out oh
should we be going with rails should we
be going with PHP should we be going
with node and JavaScript and angular
almost everybody has agreed that html5
is here if you're building an
application you know if you consider
html5 as a set of core capabilities
across the major browser starting with
say ie8 ie9 is a better fit but if you
saw if you go ie9 and beyond and the
rest of the browsers and you look at
what your user base is you're going to
be hitting 93 nine
for 95% of your audience can use these
advanced html5 applications and so
you're left with that choice do we
really sacrifice the user experience and
the speed of web development to build an
application that's going to support
people who are still on ie8 because
they're using Windows XP for some cases
you do need to do that so for instance
of the Chinese markets big for you
Windows XP is still the dominant
operating system in China and they still
use ie mostly but that could change
rapidly with other browsers you know
people are starting to switch I think
like three years ago I almost never ran
into a business user who would use
anything other than IE and now I'd say
at least half of them are using
something else and so a lot of people
who here's heard of the mean stack just
as a show of hands so that means that
you're quite involved with the
JavaScript community this is the new
high startup stack this is what all the
startups are looking at they're looking
at rails they're looking at this and
they're looking at depending they might
be looking at PHP depending on the space
they're in and this is MongoDB that
document-oriented database it's node and
expressed for the API server and it's
angular on the front end there's an
other aspect of this and I'm going to
touch upon this because we're talking
about building angular applications and
there's also the process stack that's
emerging for front-end development and
so if you just start working with all
these technologies you're going to be
pulling your hair out trying to figure
out how to get them all to work together
but there's a lot of amazing tools that
have been coming out in the last six
months and I call that the process stack
so you've got your tech stock and you've
got your process stack and there's a
project called with node you have NPM
for module management it's fantastic
it's probably the best module management
tool package management tool for any
development tech out there and then you
have the yeoman product project which is
yo which is a generator it's grunt which
is a build tool like make or rake if you
use an or cake I guess and then Bower
which is a front-end dependency
management tool which is from Twitter
from the same guys who did bootstrap
which is taken over a lot of the web and
with those tools you can actually
generate an angular app using yo there's
generators for all kinds of different
technologies and so you can rapidly get
a Best of Breed
app
location scaffolded with the right
dependencies and have the dependency
management via Bower and have the build
management via grunt and have that all
set up in like 10 minutes then you have
get which has become the dominant source
control management tool and continue
integration tools like jenkins and you
have the whole test-driven development
revolution and that puts an amazing
stack for building apps so I'm just
going to do a quick time check alright
and so the five DS of angular this is
the way I like to describe what's sort
of unique about it it's declarative the
views are HTML that's actually really
interesting uses something called
angular directives and we'll talk about
that that gets rid of a ton of
boilerplate you don't have to learn a
templating language you really you just
learn the enhancements to HTML that you
need to build your app it's got a
dataflow architecture or a two-way
data-binding architecture where when you
pull data from the server and you're
holding it in your JavaScript code in
the browser you can bind it to the UI
which means that if someone types
something in the user interface it gets
updated in your model if you change your
model because an event comes in from the
server a lot of people are using socket
IO to receive events and so if you're
listening messages and a chat stream and
you have a message come in and you just
push it into an array it'll
automatically appear on the screen you
don't have to do any code you don't have
to be doing any query selector you don't
have to be finding any section of the
DOM and manipulating it you just push it
on to a simple array which has been
bound to the document object model it's
it's quite mind-blowing it's very dry
and that means don't repeat yourself so
when you consider the data flow so
you're not having to do the update and
the read and all that kind of extra work
and you have the decorative definition
of the views then you and you also have
two other things you have pure JSON as
the data model you're not dealing with a
complex object oriented or other data
model it's pure clean JSON and most of
your code is written in pure JavaScript
there's very few things that angle
excuse me the angular enforces on you it
uses something called dependency
injection
to inject itself into your pretty simple
straightforward JavaScript code and
that's the dependency injection and then
finally it's extremely designer friendly
I mean I've never seen a jQuery
application or I've never built one that
wouldn't get broke every time someone
tried to modify the HTML because you
have to do all kinds of sort of jumping
through hoops to get your CSS your
cascading style sheets to work so that
you can apply the jQuery rules in the
application logic to your HTML I mean if
you think about what an html5
application is there's there's three
components to it there's the structure
which is HTML
there's the styling which is CSS and
then there's the behavior which is
JavaScript and those three have to work
together to build your app and if it's
not clean HTML and CSS then it's really
hard to write the JavaScript and they
get to coupled and changing your HTML or
CSS will break your JavaScript changing
your JavaScript will break your CSS or
your HTML and you've got these this real
mess when you're trying to get your app
out the door and every tweak in the CSS
break something and vice versa angular
doesn't have that it's really beautiful
the way it handles binding logic to the
Dom so angular is different in five
significant ways that compound in a
profound way and it can be a little
challenging to learn initially but once
you have the light bulb sort of go off
it's it's amazing and it's significantly
different than other ways of building
web apps and so these are really I think
the five commandments of angularjs this
is maybe a little too abstract for now
because we haven't really discussed it
but some of it should make sense just in
the general technology world HTML is the
view there is no other view technology
and you write angular directives that
are really like HTML six right so in
HTML five you have a list item but you
don't have a tab panel and so you do all
this ugly bootstrap code to get your
tabs going I love bootstrap but doing
sort of navigation bars and doing some
of the form stuff it gets really ugly
really quick you could create a tab
panel you can create a modal dialog
directive and you
really simplify what you have to stick
in the HTML and you can build your app
at a different level of abstraction
communication is one way that's more for
when you're getting into it you know the
Dom should really only be updated by
directives that's sort of the the model
and then this really should go the other
way so services talk to controllers
controllers talk to directives and those
directives talk to the HTML but we'll
talk about that when we see some code
the controller does not manipulate the
Dom directives do that and we'll see why
that is the case and why that's so
interesting and then generally a single
responsibility principle you really want
to have controller services and
directives do one thing and one thing
well that's a general code organization
concept but people are usually a little
overwhelmed learning angular so they
push everything into a single file and
it gets a little ugly and so the core
elements of angular so now we're going
to actually get into it so it's extended
HTML this is a complete angular app here
there's actually one other file there
the invoice controller but it doesn't do
anything in this file and so I'm going
to show this in two other screen so you
can read it but the white stuff is HTML
and the blue stuff is where we have
angular stuff and let's get that a
little bigger so I divided it into two
so there's the header and this is your
standard HTML header you've got none of
that doctype craziness from before and
you take your HTML and you do ng-app
equals app and what that does is the way
angular works is it reads your DOM and
it looks for what it knows about and it
finds an ng app and then it looks at
that and then sees all ng app equals app
and then it looks for a module that
you've written and it finds that module
and it starts it up and so there's a
compile phase that's how angular does
its magic in it the reason that angular
is running is because it got loaded here
in the JavaScript and so angular in its
core is one file it's about 30k it's
pretty small when it's minified there's
some other things that you can add on
that will make it a little bit bigger
but it's actually pretty lightweight and
so that's it you have you load angular
in your page and then you put ng app
equals app and apps the name of
your module that it's going to look for
and it's up and running this can be done
anywhere so if you have a PHP
application if you have a Ruby
application if you have a Python
application and you want to add
something to a page like a chat service
or some interesting UI functionality you
can put this into your PHP template and
you can load your angular app on top of
your existing application because it's
just JavaScript and if you're loading it
here it can work it works with jQuery it
completely works fine with jQuery so
you're not going to have that conflict
and it's extremely smart about name
spacing and uses good development
techniques and so now you can run
angular with pretty much any other
JavaScript stuff you can think of and
then we get into the body and there's a
few more expressions so these are
directives and there's angular
expressions as well so ng-controller is
naming a controller and this is
registered with angular as just a
function so this is a function that gets
called and it can interact with the Dom
and then there's other ones for doing
things so for instance with your input
type number you can specify a pattern to
do a restriction on it you can specify a
model and a model is just a variable a
JavaScript variable that's on something
called a scope and so every angular
element has a scope and that's where you
put your data and we'll see that in a
couple of minutes and so there's two
models here quantity and cost and then
you can do angular expressions like here
with those handlebars and what that does
is that executes that angular expression
now this is not JavaScript this is
actually the angular expression language
and so you can't go crazy and do really
bad things like you would have done in
the past where people are putting alerts
and right you know stuffing business
logic into the page you can't get away
with that with angular because it's a
little more restricted and so there's
that whole battle between unobtrusive
javascript where people removed
everything from HTML and I think that
was absolutely awful in the end because
you go look at an HTML page and you've
got no idea what's going on and you're
trying to fix your app and you've got to
go searching through the selector logic
find out where the selectors are but
then you go with too much JavaScript and
that's you know even worse
there's a nice balance and angular does
that exceptionally well with this
binding logic and what this means is
because you're binding to these specific
parts of the Dom you don't have to do
query selections it's implicit and so if
you think about that div ng-controller
equals invoice control since you've
declared and loaded that controller that
block of application logic on that div
angular knows where that div is it knows
it's attached to that div and it
mediates that knowledge with something
called a scope and if anyone here is a
programmer there's the concept of scope
you have functional scope variables are
in scope out of scope well this is like
scope for Dom elements so your DOM is in
or out of scope and it's limited based
upon angular creating and managing these
scopes so you can't cheat and so with
scope and programming languages the
thing that that helps you get away from
is global variables and so you can track
down bugs and you don't make bad
mistakes the same thing here your scope
is controlled by angular and we'll see a
scope model in a little bit the final
thing there is currency and that's
called a filter so we have here a bunch
of directives these are all built-in
directives with angular we haven't
written any so but you can write your
own so anything you can conceive of you
can pretty much do and then there's the
model which is on the scope for that
section and then there's filters which
allow you to just tweak your output and
so that's going to take the quantity x
cost and it's going to display in a
currency format and so without having to
do any extra work you've got your total
and you're showing it nicely in the
application and so there are sort of
formatting sort of helpers where it's
easy enough and makes enough sense to do
it here versus in your logic controller
logic so the first thing that we were
talking about was ng-app this bootstraps
the application and so your application
is included angularjs it has ng app
equals app and this attaches that
application to this node in the Dom you
can actually have multiple apps so you
could build five little angular apps and
have them do different little things
almost like smart panels in a
interactive display
and that could work well for certain
types of applications because they're
completely decoupled different teams can
work on them and you can load them up
and tack them on in different parts of
the Dom you can also leave this out and
jQuery has this thing where you go on
document ready and you know it started
up and then you start calling things you
can also bootstrap angular using an
imperative thing on a document ready
function call this handles it
automatically and this is the normal
case unless you have something really
weird going on where you absolutely want
angular starting up right away because
you have to use some other library like
a jQuery library to get some data first
- before you're ready to start up your
angular app because there might be a
dependency there normally I've never
actually not done that I've never used
that I've always gone this way so one
very small fairly small JavaScript 30k
ng-controller this is really getting
into the heart of angular so you have a
Dom which is your view your view is HTML
you have the directives which make
things happen and this directive links
javascript code to it and so with this
you could call inside and voice
controller you can make that query to
the server to get your list of invoices
that's where that logic would be so this
has got the list of invoices and it
sticks it on the scope and the scope is
tied to this div and so all you have to
do is put in invoices the variable name
inside those handlebars and it displays
here you don't have to do any query
selection at all again the ng model so
that's what I was talking about like
invoices maybe it pulled the invoices
and it rolled up a quantity that
quantities on the scope the controller
put it on the scope so the Dom can or
the HTML view can access it and again
because it's bound to that one small
section of the document object model you
don't have to do anything funky to
really resolve where that's going you
can just make that call using ng model
and the two-way data-binding so we were
talking about that so we have that
invoice controller it's pulling data and
we could have put the list of invoices
on here and this section here it's
taking some inputs from that ng model on
the IMP
let me go back quickly so here it's an
input
type number model equals cost this
actually doesn't even have to be in the
controller this application we're
looking at runs without that controller
because the controller didn't come into
play we're inputting the cost here we're
typing it in and we're inputting the
quantity here because it's an input so
you type in quantity and G model stuffs
it into the scope number ng model you
type it in the input it gets stuffed
into the scope and because we're within
that one controller that's one
constrained scope and then the angular
expression can multiply the two together
it's pulling it from the scope again and
then it filters it through an angular
filter and scope is really the the magic
going on and when you use a directive
directives when you write them you
specify whether it's going to inherit
scope from its parent whether it's going
to create its own scope whether it's
going to have an isolated scope and so
that's one of the challenging areas when
you get into developing angular in
directives is if you have to do some
funky scope stuff but for the most part
it's pretty straightforward and so here
we have a document object model
let's typical HTML page so you have HTML
and you have a bunch of divs in a one
div you have a list each one of those
directives generates its own scope but
sculpts are hierarchical and so what
that means if you put a title on route
scope and this dollar sign means it's an
angular service if you put a title on
there and then here you do that sort of
handlebars and you do title it will show
up because this scope inherits from this
scope inherits from this scope inherits
from this scope and that's one of the
fun things to get your head around when
you get your first few applications you
know going is your run into some bugs
trying to figure out the scope and my
recommendation to anyone who's getting
having trouble understanding how scopes
work is now take the time finally to
understand how JavaScript object
prototypes work because that's all this
is it's using the JavaScript object
prototype function how many people here
know JavaScript before I kill a few
people in the audience so most people so
because I don't want to go on about you
know JavaScript because it this is also
useful I think for HTML developers and
it's an esoteric subject but basically
quickly to save you some pain
is that if this has a title and you go
to read the title from here you'll read
it and it'll show up if you go to write
the title you might assume that it's
updating this title but JavaScript
inheritance prototype inheritance is
read-only and so as soon as you write
here you're shadowing it it's got its
own title and you're never going to see
this title again in your application
logic and so that's what happens is
people put in a nice little sort of UI
here they use those handlebars and they
do title and title appears and then they
put an input box and they want to do a
new title they're doing their title
update and they type it and they save it
and it never gets saved to the database
because this is being saved this is
where the logic is and so that's one of
the big gotchas in angular development
and this is JavaScript pure JavaScript
object prototype inheritance so if you
understand that you can work your way
through this now the other thing is ng
controllers there's only one here but if
you have multiple ng controllers nested
in your Dom they also inherit from each
other because they're all being mediated
by their scopes and so this controller
is sticking data on this scope and this
if you had a controller down here it
would be putting it on its scope and so
you can call functions and you can
access data from higher-up controllers
because they also inherit through that
scope sort of relationship and you can
run into some issues with that as well
but it's also a lot of the power and
working with the application so these
are some of the angularjs elements that
we've been talking about there's
directives which is how you extend html5
you can think of angular in some
respects is how to make your own HTML
six you know like something in html5 you
go ahead and you make your own
directives angular expressions is how
you bind your business logic into
angular it's just enough JavaScript that
you can do what you need to do to do the
binding and not enough that you can
basically hang yourself by stuffing your
whole app into the HTML the controllers
or where you put your main logic for
mediating between your data and your
view this is Model View controller so if
you've ever worked with that it's the
same sort of architecture pattern
services are basically you know like
most services they encapsulate something
and reusable so one of the key elements
of software
don't repeat yourself and if you have a
controller that needs to access user
information and you query for the user
in that controller and then you have
another controller that needs the same
logic and you start cut and paste that
code that's a no-no right that's going
to cause you trouble in the future you
have to debug it you're actually wasting
time because you're duplicating the
effort so you take the common code and
you put it in a service and that service
can then be injected into as many
controllers as you want filters that was
what we saw the currency thing and then
views and that's you know there aren't
any right really we already covered that
because it's HTML with directives and
angular expressions and then you're
going to see a whole bunch of angular
sort of services scope HTTP resource
some of these will operate similar to
jQuery if you're familiar with jQuery
like the HTTP service angular is very
very oriented on just JavaScript JSON
Jack the JavaScript object notation
and you know web standards and so if
you're using a restful api that's
serving up json you're going to be in
really good shape you can build your app
really fast if you're going against a
non restful api that's serving you up
XML it's not going to be as much fun I
don't know you might want to throw up a
node API server them so building your
first angularjs app when I talk about
angularjs like I just said you want a
restful api server the sort of the hot
startup stack is no js' plus Express
plus MongoDB but if it's a restful api
server that's serving up meaningful JSON
that fits your application domain you're
good right it doesn't matter what's
behind that API and that's the whole
thing right everything is being modeled
as resources and those resources are
being described well in JSON and it's
meaningful and it's it's exactly what
you're looking for if you're doing a
project management application when you
say give me the project you have JSON
which has the project and it has all the
tasks and it's all in a nice document
and you can just do project tasks and
access all your tasks and you're happy
and you can swap that out and do it with
anything so yo angular I was talking
about that sort of stuff
the process stack so there's an angular
generator and if you install node that
opens up a whole world of development
goodness even if you don't use angular
and even if you don't use node you can
use that to install grunt you can use
that to install yeoman and now you can
do stuff like generate your app so
there's a really cool mobile html5
mobile app generator that just came out
a month ago and if you want to build a
mobile app using that text stack you can
just you know install node install you
man install that generator and then you
do yo and it would be whatever mobile
app and it's going to scaffold at that
app and even if you never use node for
anything else it's it's sort of a
necessary technology now for front-end
web development if just for using some
of the cool tools and so I ran it and
here's a listing of it and a lot of this
I guess I can not I got no mouse so what
we have here is it's not the best layout
but we have a license a readme an app J
s that's the main application for
angular that is going to run your sort
of stuff and then you have views which
are HTML fragments that you can bring
into an HTML page and actually what am I
looking at there no sorry I will win I'm
in the wrong section that's on the next
page forget what I just said and so this
is your node app and then here you're
doing your angular and this is
generating the angular app so I'm
generating the angular app on this
screenshot in the node application
directory so I got my API server there
but that's what we're talking about
today and you run it and it generates
the code once you've scaffolded your
angular app you can type grunt server
because like I mentioned yeoman is the
yo generator it is grunt for build
automation and it's Bower and you do
grunt server this will fire up a very
lightweight web server and it will pop
up your web browser and it'll show you
the simple app that they put there so
you know that it's all working I use
sublime text
the default scaffolded app uses live
reload and I have live reload in sublime
text
they conflict so I usually have to
change my port I put that in there
because I was using this in a class and
then you can type grunt test and you're
actually running unit tests already it
scaffold some very basic unit tests that
aren't particularly real but at least
you run it you can see the results of
the unit tests and then you can just
start that practice and if you remember
to keep running this you'll remember to
keep reminding yourself to write unit
tests it's got you all set up with karma
it's the really cool test runner just a
quick aside on that one of the
challenges with doing unit testing in
HTML and JavaScript is you have to do it
in the browser and so there's like
jasmine and you have to include it into
the browser and you got to load the
browser and you've got to do all that
work karma is a test runner that does it
for you and so you do it from the
command line it's going to launch
multiple browsers if you want it's going
to do the testing and it's going to give
you the results all from the command
line it's almost like it's running like
on the server the angular stack that I'm
fond of is angularjs bootstrap we've
moved to bootstrap three recently and
it's pretty cool angular UI which is a
whole collection of user interface stuff
Wrangler to sort of speed that up there
is a bootstrap component there it's on
bootstrap too but they're about 75% of
the way to bootstrap 3 that also in that
project they have angular grid which is
a cool table grid that's pretty easy to
use I'm a big fan of underscore j/s and
so one thing with angular one thing with
javascript is java scripts very much a
functional programming language
javascript is closer to Lisp than it is
to Java which is confusing I was
introduced at a conference a few weeks
ago as a Java expert and I almost
started crying but I spent a lot of time
doing Java so I do know it but it's it's
unfortunate because there's absolutely
no similarities except they share a C
syntax and so you know JavaScript is
closer to Lisp really because it has
higher-order functions and first-order
functions which means you build your
application using functions and that's a
different programming model because
object orientation has been such a fad
over the last you know couple of decades
and it's a very cool you know technology
for building certain types of apps but
for other apps this is a lot faster
using a functional pair
like in JavaScript and underscore just
gives a lot of good functional goodness
to JavaScript there's a really cool book
called functional JavaScript by Michael
focus he's with the closure list
community and that came out in June and
it's based on underscore and it lets you
do stuff that normally you'd be just
reading about in books on Haskell and
closure and scale up I have a picture of
it later in the slide deck d3 is just an
absolutely my ho theos use d3 for
anything I mean it's a fantastic library
for doing it's open source and you can
do all kinds of really cool pretty
charts we use that in all our sort of
projects and then you know the stack so
node Express and Mongo that's the Emmy
and n2go angular's a in the mean stack
ah right here so these to me if you're
going to be doing angular work I do
recommend functional JavaScript it is a
hard read if you don't know underscore
so I'd recommend spending like a half
day with underscore first and then the
book it just shows really cool ways of
dealing with certain problems that you
know are really effective and then
mastering web application development
with angularjs this came out a month ago
and it's by far its far and away the
best angularjs book on the market it's
written by two guys who know it inside
and out they did the angular seed
project and they wrote a great book it
covers a lot of the real world sort of
things like how you would approach
certain problems some of the edge cases
some of the problems some of the things
you have to work around it's got really
good examples the examples are sort of
comprehensive in areas that a lot of
other books skip over they do a whole
chapter on directives that's done
test-driven development which is
fantastic it's a little awkward because
they start off writing the test before
they tell you how to write a directive
but once you get to that it's it's
really cool it's just I can't give the
book enough praise the second half the
book is a little more uneven than the
first half I think that happens in the
editing process and getting to market
but I actually have every single
angularjs book on the market because
there's only six and and that's the best
one and I'm stopped I'm not buying
anymore so if you're writing what I'm
not buying it I got too many so oh and
this is
okay what did ah oh yeah that's it so
that means I'm going to do a demo so
sorry I got sort of confused on where I
was in my slides and do a quick time
check we're doing good right so 20
minutes yeah how do we all just raise
our hands quickly to get ourself some
energy and we'll get back into just as
he's switching over to the business
application within easy stretch arms
maybe stand up good
hopscotch would not be nice in energy
so make sure at the back you guys can
read this if you can't read this please
voice your opinions that you can't read
it it's not data alright so I'm at a
command prompt I have node installed I
have the angular generator installed I
have human installed if I wanted to
install human yeoman iOS a human its
yeoman if I didn't have it installed I
would do n install mine is G that means
global so with node there's two types of
packages ones global that usually means
it has a command-line tool like it's a
generator or does something on the
command line and then there's locals
which gets installed into your local
directory and there's no minus G and
those are the ones you're including in
your app and so I do this yo and then I
can actually stick a bunch of stuff on
the line these are all so I could -
generator angular and I could do grunt
command line interface grunt - split
into a command line interface and a
module that gets installed into your
project and Bower and if I hit enter now
to install all this goodness so I've
just installed node which takes about
five minutes this is going to install
the rest and then I'm up and ready to go
and I can do cool stuff like yo angular
bicycle alright
and this is going to ask a few questions
would I like to include Twitter
bootstrap thank you yes am I going to
use a compass I am NOT and then I
mentioned that anglers about 30k and
it's a good small size there's three
things that you can add angular resource
angular cookies and angular sanitize and
this is going to make it bigger resource
is a way for dealing with restful api is
it's fantastic it's improving a lot in
angular 1 2 which is hopefully out in
the next week
angular cookies is for cookie management
important for doing session type stuff
and whatnot and then angular sanitizes
if you're doing an application where
you're taking people's inputs and you
want to sanitize it to make sure they're
not doing SQL injection attacks and
stuff like that what it does is it
installs it and then it actually
automatically runs npm install which is
going to install the node packages that
it's tool chain uses these are all on
the development side so it's going to
install the grunt it's going to install
karma and that kind of stuff so we can
run our unit tests and things you do on
the command line
there's no NPM dependencies for angular
because NPM is a node package manager
running on the server side Bower
installs the packages that you're going
to be using in the browser so your d3
your angular your jQuery and that kind
of stuff underscore actually underscore
you can install in both places you can
use underscore on the server side so you
could install it with NPM and you could
install it with Bower to use it on the
client side and that's what I do
and then once that's installed you can
do all that kind of stuff and so that's
finished essentially and if I view the
package.json this is what's installed
and it's a little crazy but it's nice
and modular so grunt we installed the
command-line interface that with the
command I mentioned dependencies that
server-side so you can see that's empty
and here's grunt and all these sort of
grunt stuff it's using in its tool chain
so it installs stuff it doesn't ask you
a lot of questions you can strip out
some of the stuff if you're not using
CoffeeScript you can get rid of that if
you're not using compass you can get rid
of that and
this is minification so if you're
deploying to production you usually want
to uglify and minify your javascript and
your CSS and so you're seeing that there
if you're doing JavaScript stuff and
you're not doing jsn please do it's it's
wonderful it actually will capture bugs
that would burn you otherwise it is
coding conventions in a automated tool
so it's a fork of jslint and it looks at
your JavaScript and it tells you what
rules you've broken according to the
rules that you've configured it's very
very good
and you know all the way through here
this is a watch tool so when you're
changing files if you want the browser
to reload automatically minification
there's a lot of stuff but a lot of it's
pretty good stuff and there's even asset
tagging so one of the things that when
you're deploying a massive app and
you're changing your assets sometimes
they just never seem to show up right
because the caching and browsers and
stuff like that when you run the build
process it's going to tag them with
numbers and so it's going to minify your
j/s and put it all in one file with no
white space and it's can take your
images and prefix them with numbers and
so that when you want to do a new push
to production all the caches are not
going to see those old images anymore
they're going to see new images and
image names and they're going to load
them up nice and you're not going to
pull your hair out trying to figure out
etags and caches and headers and good
god knows what else and that's pretty
much it that's the server-side stuff and
that's mostly the build chain and then
there is Bower and so these are the
Bower dependencies angular JSON 3 most a
lot of these I would say are thanks ie
so you need to do shims and whatnot so
you want to run on ie7 and ie8 so JSON 3
jQuery es5 shim and then the other ones
are angular so this is angular that's
the main angular file angular can use
jQuery or not and so it has its own
version of jQuery called JQ Lite and
what that is is it's a very lightweight
query selector so you can make all those
nice query selectors but without any of
the other stuff from jQuery if you
include jQuery before angular in your
HTML file angular will default to using
jQuery and so that's actually done most
of the time
because you might use one or two jQuery
plugins or some elements and there's
also something with angular where it's
JQ Lite is not as good for loading
certain things it's a situation where
you're loading a template view and you
have a reference to another file it
won't load it whereas jQuery will so I
don't remember the exact scenario but
that's another reason for using it and
then the development dependencies so
most of these are client-side and it
actually does two development
dependencies and this is for unit
testing so scenario Runner and mocks
it's got a great set of mocks and so you
can easily mock your HTTP back-end and
what that allows you to do is when
you're testing your controllers and your
services that are getting data from the
server it's like three lines of code and
you can have it going to your mock and
you can test quickly without actually
having to run against the live server
and I'm going to go to a folder that I
created before and here's our file setup
files and so we've got our app but we
have our grunt file node modules and I'm
going to do grunt servable and so this
is going to go through the tool chain
and pop this up so lol oh you now have
html5 boilerplate angularjs and karma
and so what I'm going to do is I'm going
to actually modify this and so this is
one view and there's no routes there's
no controllers and so let's go back to
our section here I'm going to close this
for a sec and I'm going to go back to
Yeol angular and I'm going to do yo
angular service and I'm going to make a
television
servus and so what this does is it just
creates the television javascript file
so that's our service that's where we
have common logic that shared among
controllers and it creates a very simple
test spec and now let's try grunt test
and see what happens I don't have karma
installed so and this would run through
the tests and then it would show the
result I could bring this up in another
section but anyway it's not really that
informative would run the test I'll show
you the tests themselves and it would
show you that they currently pass I'm
going to also do yo angular route and
I'm going to call this favorites steak
Canadian and so what this is going to do
is this is going to create a controller
so a route is not actually something
that is specifically a thing in angular
it's a bunch of things it's a view it's
a controller and it's a route definition
that links the two together and so it's
created those it's created the
controller it's created the test spec
it's created the view and it's actually
loaded all these up into my index.html
and so now if I go into that I'm going
to open up the app folder and let me see
if I maybe go fullscreen and so we can
go in here and this looks like a typical
web page so we've got our index.html the
default generator uses the html5
boilerplate so you've got a lot of
goodness there to work across browsers
most of this crap is because the IE for
angular stuff so here's our ng app that
we've been talking about so if we're
looking through what's angular well
let's go cruising through here so that's
our first bit of angular that's our
module so that's bootstrapping the
application then this here is this is
bootstrap 3 so bootstrapping not as in
bootstrap different type of bootstrap
and then here's our ng view this is
angular again an ng view is something
that can be
swapped you can swap in fragments of
HTML so little subviews and then they
put in a Google Analytics stuff and
going down further you see here it's
loaded jQuery first from Bower
components and so later on if I want to
update the versions I'm using I can
update Bower JSON and run Bower install
again or Bower update and then he this
put all this stuff in you know it's a
it's a relatively new product I didn't
ask for sass if you remember I said no
and it still gave me all this stuff
that's okay
I think the newer one doesn't do that
and then here is the actual angular
stuff resource cookies and sanitized and
then here's my app my app code that I'm
going to modify this is sort of the
bootstrapping code my controller my
service and my second controller oh so
it came with one controller by default
called the main controller and so let's
go look at our app again actually before
I do that though because you will look
the same if I don't change anything
here's the views we've added favorites
and it says this is the favorites view
and let me clear this out and I'm going
to do h1 my favorite TV characters yeah
Matthew knows where this is going so so
I got to do a ul and I'm going to do a
list and I'm going to do an ng-repeat
equals and I'm going to do the character
in characters and let's do then this
funky angular expression and we'll do
character name and we'll close it
and we'll close this and so let's see
what we got here so we've got a simple
HTML page and we put in one directive
and one angular expression and our
directive is calling ng-repeat and that
what that does is that it rates through
a data structure in this case it could
be a simple array angular loves plain
JavaScript and it duplicates the Dom
element so it's going to copy this so if
I have 200 characters it's going to do
200 list items there's going to be two
scopes here there's going to be the
scope for the view that covers the whole
page and then there's going to be one
scope per list item and the reason
that's helpful is that sometimes if you
want to update that list item you can
put the logic on that's going to deal
with it in that particular scope and you
don't have to do any kind of query
selector again so let's have a look what
this looks like because I haven't
touched anything and we don't have a
place for characters to come in from yet
for characters to come from so it may
blow up a little bit and let's see what
did I leave it running out I don't think
so you can go grunt server
all right so this is our main one and so
let's go look at favorites nothing let's
go look at the command line so big first
tip angular development if something's
not working go look at the console
because you're probably spewing sort of
errors here and you can quickly find out
what the problem is
second tip make sure you have Batarang
installed and what that does is it
allows you to look at your scopes and so
if you got something really crazy going
on you can look at them and you can see
the JSON on there so here's this scope
and you can see this has stuff on it but
we're not displaying it so this was what
you saw from that generator it's still
in the controller and so you can see
that we're on the scope and there's
actually stuff but we can't see it so
that means that my angular expressions
not looking at it and we have the one
root scope which we didn't put anything
on so nothing's showing up here and if
you're seeing me going where is this you
can click here and it's going to take
you right into your source and show you
where it's pulling the scope from and
once you've done that you can actually
go back into your console and type scope
Oh
there we go skew so there's that so as a
good trick when you're doing you know
debugging people often do console.log
that doesn't work so well for objects
what you're seeing here with that child
skill pile you can look into it
you can put that in your own code and if
you do console dir it's going to give
you the same kind of output and so with
angular you're dealing with lots of JSON
lots of data structures and so if you do
console der scope which of course is
already there but it's going to give you
this child thing and if we do console
log school now this one does here anyway
but if you do dirt you'll get deeper
into your structure and you can browse
through it so here it works anyway
and so you can come in here and here you
can see some of the if it's a dollar
sign it's an angular service that you're
allowed to know about and use if it's
two dollar signs it's private and you're
not supposed to mess with it just so you
know so let's clear that out of the way
and bring up sublime text again so let's
say we've got character and characters
let's look at the controller so go to
scripts and we go to controller and we
go to favorites and it gave us this
default stuff and we're going to do and
get rid of that and again plain
JavaScript
and it's all JSON everywhere so I am as
a programmer I am a big Doctor Who fan
and when I was five years old I was a
huge pokhara finn and i couldnt believe
how stupid the adults were because they
could never see him so I was there
screaming at the TV with my mom looking
at me like I was really strange because
they think the one person never got to
see him and actually that's any real
Doctor Who fans going oh dude so you're
writing like that so and there's a few
more but that's good enough for now so
this is a controller so it's angular has
modules and you define a module so you
saw our TVO app module that we were
loading you can have multiple modules to
divide up your app into different sort
of sections and once you have a module
defined you can define controllers and
services and things on it now you could
do this all in one file so if I want to
do a second controller I could use this
kind of thing and it's responsive it's
fluid I should say it's a fluid API so a
definition of a controller returns the
module back and so you can just chain
these like this it's a common little
JavaScript thing and I could do more
there but the general rule is one file
per thing because it's a lot a lot
easier to manage and so I'll leave that
like that and let's go back here and
let's load it up Oh
let's run it
and let's go back to favorites
and there we go and so that ng-repeat
has gone through this and it's updated
the two of them
now I mentioned two-way data-binding
deny so let's do that so let's go back
here and let's go home and I did mention
also that hey what if we want to use
this in multiple third sections right
that might be bad so let's do that first
so I'm going to take the characters and
I'm going to put it into a sort of
database service and I'm going to make a
call to it and then I'm going to go over
actually what did I call my service
television television characters and I'm
going to go over to the television
characters and people who have done
angular going oh wait a second dude you
it's not going to work but I'm going to
go back
all right so we've got our characters
here and we are going to do we we got we
got a service and so we're going to do
return characters function so I had a
characters function and come back to
here and we're going to return
characters and we should be good so
we've just moved the third of the array
over here so you can see here our
service is called television it's also
being put on the same module and we're
returning this so let's go back over to
the favorites j/s and because everything
in angular uses dependency injection to
use a service in a controller you put
the name here and what angular does I
mentioned before when it's building that
dom it goes through and it finds all the
angular directives and it does that
compile stage it does sort of the same
thing with your code it goes through and
it knows that when you're defining a
character and that signature you know
what you're passing in there that you're
actually mentioning modules that you
want to include and it reads those and
it injects them in and so this is almost
all just pure JavaScript that we're
sticking on a module you could actually
write a controller without any of this
and you could stick it on you know just
I could write a controller like this I
could use the global window object and I
could do you know favorites and function
and put inject the scope and I could do
that
and it would still work but I wouldn't
be getting the sort of the module stuff
and I'll be polluting the global
namespace so we don't do that
but it's sort of an interesting
reflection of how angular works and so
we're injecting television and because
that's a capital we put that here and so
now our service has been refactored a
little bit and I mean we have a service
and we're passing that in see if we're
running
and there we go and so now we move that
logic into a service we've injected into
our controller and now we can inject
that if I want to make another service I
can come into my angular code and if I
want to say go back to the main service
here and I want to use that I want to
put that list of television characters
here television and let's get rid of
this and we'll call this so we're
calling the service and I got a little
thing going on here with my server
crashing I made a little error there
because I just put in the characters and
I'm not calling the name so if you
remember in my code I did character name
and here it's just dumping out the whole
thing I'm passing in actually a JSON
object so I could go into the view now
and do dot name and it would show that
and so that's sort of a very effective
way of reusing information so we'll go
back to favorites and I promise to show
to a data binding and I will be
concluding pretty much with that so bear
with me for a sec and so we're going to
go over to our favorites and we have
this list here and let's say okay that's
really cool but we want to update it and
so we do input and we do ng model equals
character name and drop this down so we
can see it a little better thank you
oh there we go
and I'm missing a little brace there
bracket and that should work to work
without it it'll default I think so
let's give that a shot
there we go
so these are bound on to the scope and
so as soon as I change it anywhere I've
used ngmodel to put the character name
into the input and so when I change it
it's changing it on the scope and we
were displaying from the scope there and
so as I change that it updates there and
so now if I want to save this to the
database I come back to here and so
let's do a button for good and we can do
a button and we can say save thank you
and we can do ng click Save character
and so you remember I was talking about
scope right and how scope was really
really cool when I type save character
here I could have another character and
characters in another section but this
is in the ng-repeat scope so knows
exactly which character I'm referencing
and so again I'm not doing a search on
like an Li element and grabbing that and
so I got character name I got the click
I go do the save character make sure I
got everything that I need like that yep
save character so we're good there and
so let's go over to favorites and then
the way you do this is you attach that
function to the scope the magic scope so
you just scope save function character
and let's do a console log and we do
character and we do plus character and
if I wanted to actually save that to the
database I would inject b8 and actually
in five minutes I could have a wired up
the Mongo but I won't do that because
I'm running a little late and so I'll
come here and but basically I would
inject the HTTP service and do h TP post
and specify the URL which I don't have
but it would be characters
and that be set up to receive a post and
then you can put in a callback function
or you know whatever to receive that it
actually worked so let's get rid of that
and I'm going to save this before I get
yanked off by the cane grunt server I
probably pushing my luck hasn't blown up
yet so far it's going good and let's see
what we got there we go
and I was talking about you know that
whole thing about log versus dirt right
so if I have an error I'm looking at
that I'm going to Alex I don't know what
that is and so if I come back here and I
change this to adder then I got to
actually put the object there because
it'll look at the string and not work if
I do that and I'll save that and that
always seems to blow up for some reason
today that's never happened before so I
think I Mavericks yesterday so
and see now I got this cool object so
now that's a big thing a lot of people
don't know that and that can really ease
your sort of debugging and so there's
pretty much a fairly complete angular
app I ran the generator I showed you
services dependency injection I didn't
show you a test so let me show you a
quick test and then I can claim
completeness and so it comes in here it
creates a test directory and is
generated one for us and controllers and
favorites and this is a fairly simple
test you won't really run this it just
is checking to see that your data
structure is there this uses the Jasmin
format it's behavior driven development
type testing you can also here we see
controller and root scoop a root scope
inject the HTTP back-end and start
mocking it at the backend and so that is
the end of my angular demo so hopefully
that was informative and showed you how
angular works and some of the main
concepts
I have if math you will humor me for
just one more minute 30 seconds so I
mentioned the two books I highly
recommend both of these my two favorite
books of the year we actually also
recommend the functional JavaScript at
least I gave 102 the last one of the
time for I definitely recommend if you
guys want to get into it
check with it but another one
by the way if you're wondering how I'm
typing this and sort of doing it I just
finished teaching a two-day course so
I've been doing this constantly for the
last two days and so otherwise if I did
this a week from now I'd probably make
more mistakes
so we're heavily involved you know as
Matthew was talking the community so
we're on the angularjs Meetup
we started a PhoneGap meetup that's
almost as hot as angular if you go to
meetup.com and you type angularjs meetup
comm or PhoneGap meetup comm or your
favorite technology meetup comm it'll
show you the ranking in the world now
those sort of fit and the angularjs
meetup in just three months in Toronto
is sixth which is a real good testament
to the Toronto community and how
forward-thinking it is and the PhoneGap
meetup globally is about as big as
angular and the Toronto one after a
month is about 170 people so that one's
going pretty well I was talking about
stacks so we're putting together just a
sort of friendly conference later this
year called sort of stack fest for
people who have to make technology
decisions for startups and businesses
and to bring in some leaders and talk
about and share information on stack
strategy and if you are interested in
learning more next Wednesday October the
30th we are doing angularjs and data
we're going to have a talk on MongoDB
just sort of from the ground up and talk
about rest and api's and just the whole
managing of data we'll probably do a
section on promises and HTTP for doing a
synchronous data PhoneGap meetup is
going to be November 27th the next one
it's going to be our second one and it's
oh that's an old title story that was
the first one and so that one's going to
be a PhoneGap app showcase then there's
going to be an advanced j/s conference
okay like a JavaScript question and
lurch a s question okay and we're going
to be speaking there actually so if
you're interested in continuous
deployment and we're talking about that
sort of workflow and showed you the
tools and the grunt and the bower so
I'll be doing a talk there we run
training I just finished that which is
why my memories get on all the commands
we'll be doing another one in December
or January and then I mentioned the CTO
conference related resources up for this
talk and talking ability mean stack and
figuring it for development getting all
those tools in place we're going to be
releasing an e-book in a week or two or
three it's with our designer right now
and sort of take the course and put that
into an e-book as well and so if
anyone's interested in those we do have
a mailing list or you can join the
angularjs Meetup and get that
information there so yeah that's sort of
it and angularjs question yes