Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
AngularJS Top 10 Tips
42:39 with John LindquistJohn created the AngularJS homepage videos, the AngularJS video site (http://egghead.io), and has been training developers on AngularJS since its inception. He’s picked up on many tricks and tips along the way and also seen where developers struggle with the concepts. He’ll teach the workflows and concepts that can only be learned through experience working across many different applications.
-
0:02
All right, so, I'm John, as he said.
-
0:03
I'm the egghead guy.
-
0:04
And I just wanna thank all the people that
-
0:07
have come up to me and said they support egghead.
-
0:09
It's allowed me to work there full time now.
-
0:11
I use to work for JetBrains and I worked
-
0:15
on the WebStorm team for the past couple of years.
-
0:19
So, if you have any questions about WebStorm and you see
-
0:21
me around the conference, I can help you with that as well.
-
0:25
So I'm just gonna hop right in.
-
0:27
I am, I'm a teacher by trade.
-
0:30
And when I present or when I do any
-
0:32
of this stuff I, I teach I'm not very inspirational.
-
0:36
I'm not very motivational.
-
0:39
But hopefully you'll learn something from me.
-
0:41
So I try and just dump knowledge on you
-
0:44
guys and hopefully you'll take something away from it.
-
0:46
So, starting with number 1, AngularJS is made to be readable.
-
0:54
Would, what mean, what that means is that in your HTML, when
-
0:58
you're writing your code and you're writing out your HTML it's, the purpose
-
1:04
of AngularJS is so that your HTML can be declarative and it
-
1:07
can show the intent of your application by only looking at the HTML.
-
1:14
So, you should be able to, like the mark of a good Angular app,
-
1:18
is just opening the HTML and navigating around the HTML pages in the code base.
-
1:24
And if you can tell what it does just
-
1:26
by looking at the HTML and never even opening a
-
1:28
single lick of JavaScript, then you probably, then you
-
1:32
understand the intent and you've written a good Angular app.
-
1:35
The code, this JavaScript behind the scenes might be a bit messy
-
1:38
or whatever, but at least means that you understand the purpose of Angular.
-
1:45
And actually the way forward of the web,
-
1:47
what most of the frameworks are doing, and this
-
1:49
doesn't just apply to Angular, it applies to the
-
1:52
other frameworks as well as web components going forward.
-
1:55
You want your HTML to show what your app is doing.
-
1:58
So this, this example has a header with a tab bar, with tabs on it.
-
2:04
An account in the settings panel, in the sidebar; which
-
2:07
can collapse and when it collapses, it adjusts the full page.
-
2:10
The search box, which when it searches it searches that search term.
-
2:14
You can see that all from the HTML.
-
2:17
So that's the number one point, and I hope you, if you only learn one thing from
-
2:21
that, that's kind of the goal, that, the,
-
2:23
the best school to go for when writing Angular.
-
2:27
So don't fear directives and HTML declares your app is kinda the summary of that.
-
2:32
Directives are the, the magic behind those those pieces of markup.
-
2:38
So on the topic of directives, study Bootstrap.
-
2:42
And I'm not talking about Twitter Bootstrap, I'm talking about UI bootstrap
-
2:47
which is the Angular aversion of the Twitter Bootstrap components.
-
2:54
So if you go to angular-UI.github bio bootstrap or
-
2:59
just Google Angular Bootstrap it will take you to this
-
3:02
page here, and it can show you all the different
-
3:04
directive and components and how to get started with it.
-
3:08
But, whether or not you want to use it on your project is your own call.
-
3:11
Whether you need these components or you think that this style will fit.
-
3:14
Whether you want to write your own templates for it, that's your call.
-
3:18
But as a learning exercise and as, if you're looking for examples
-
3:23
of how to write angular and how to write good directives, this is the place to go.
-
3:28
They've done an excellent job creating great directives with full test coverage.
-
3:33
So if you look at something like, if I were to navigate down to the
-
3:37
Alert directive, and I wanna say well, I wonder how these work, how this pops up.
-
3:43
It's a very simple directive this is the code on GitHub.
-
3:46
I just, you can use it as an element or
-
3:49
an attribute, it has this alert controller, this simple template.
-
3:53
It replaces the content and has a couple of hooks for
-
3:56
the type as a string, and the close is a hook.
-
3:59
And then the template over here looks like this, just a
-
4:01
DIV and a button, and that's basically all there is to it.
-
4:07
But all the other directives in there which get more and more advanced
-
4:09
as you look through them, such
-
4:11
as the accordion directive, the carousel directive.
-
4:14
Those are all super helpful as far as learning how to get started with Angular.
-
4:17
I know you do a Google search for Angular
-
4:20
examples or Angular how to build directives or whatever,
-
4:24
and you might run into a bunch of articles
-
4:27
that are either outdated or just have bad examples.
-
4:31
I would highly, highly recommend using this
-
4:33
as a study guide for learning Angular.
-
4:36
All right.
-
4:38
So, number 3, jQuery is awesome avoid it.
-
4:44
So, jQuery, which everyone who's ever in JavaScript
-
4:48
in the past couple years has, has used.
-
4:51
I wouldn't, won't even say probably has used.
-
4:53
I'll just say has used.
-
4:55
It allows you to write
-
4:58
like the jQuery UI library allows you to write things, like on the,
-
5:03
or on my right side, on your left side, like, where you give
-
5:07
something an idea of an accordion and then at the bottom there where,
-
5:11
inside this script, you have a function
-
5:15
which finds the accordion through a selector.
-
5:17
And then applies an accordion function to it.
-
5:20
Again, this goes against the this goes against the idea of
-
5:25
writing your HTML in a way that describes what your app is doing, on
-
5:30
the right hand side we have what that would typically look like in
-
5:33
Angular, this is what it would look like in the, the bootstrap library.
-
5:38
Where you'd have an accordion with accordion groups underneath it.
-
5:42
And in the script behind the scenes is actually,
-
5:45
a whole bunch of more code, I would say.
-
5:48
And that's where, that's where people that run into that problem.
-
5:52
Like, they know how to do it really
-
5:54
quickly with jQuery, and they just look, they'll
-
5:57
just use the selector, find it and call
-
5:59
some sort of function on it, and it's done.
-
6:01
The problem is that, when you want to get into Angular you wanna do it, you kind
-
6:06
of have the idea of how to do it and you're like well I can write a directive,
-
6:09
but then I'm not really sure how to do the rest of it, but it's worth the effort in
-
6:14
the end to put a bit more time into it, so that you have these reusable directives.
-
6:20
Which you can use across your project, you can use across
-
6:23
other projects, and you can share them with everybody and whatnot.
-
6:27
So, as you finish your lots of Angular code.
-
6:31
I mean it's not a ton of code I'm just saying
-
6:33
in comparison to what it, with that jQuery plugin probably looks like.
-
6:40
You will have something re-usable and something that is very
-
6:43
flexible and easy change and easy to use across multiple projects.
-
6:48
So, go for what's on the right.
-
6:51
Try and avoid the, try and avoid the
-
6:52
jQuery stuff, even inside of your inside your directives.
-
6:56
The, the, one of the number, like, the most common question I get asked is how do
-
7:01
I integrate this jQuery plugin with Angular and
-
7:05
the answer I, I tell them is, you don't.
-
7:07
You, you avoid it.
-
7:08
You try and figure the way that jQuery is
-
7:11
doing it and then instead of using the selector
-
7:15
approach where you do, use the dollar sign and
-
7:17
put in some sort of selector to find that element.
-
7:21
You instead create your own custom element or you create your own custom attributes
-
7:25
that you can apply wherever you want them to live on your HTML page.
-
7:31
All right.
-
7:32
So number 4.
-
7:34
Use Protractor, and I, I say this meaning
-
7:37
that, you can use it on any existing project.
-
7:42
So, if you've, if you started a project already and you have it up and running.
-
7:47
And you wanna try and go back and write
-
7:49
unit tests for it using Karma or Jasmine or whatnot.
-
7:53
It might be a bit difficult because if you don't start with a unit test
-
7:57
and a test your own development scenarios, then
-
8:01
sometimes it's hard to write the test afterwards.
-
8:03
But Protractor you can use on any project including other people's project.
-
8:09
You can launch the browser to any URL and you can run test
-
8:13
against them, the integration test, sending button
-
8:16
clicks, sending keystrokes to test your application.
-
8:19
For example, you can even make your app dance using Protractor.
-
8:25
So, what I'll do here, using my dance
-
8:28
spec, I'll say Protractor, fire up my dance spec.
-
8:33
It'll hook into the selenium server.
-
8:35
And let's see what Chrome is doing in the background here.
-
8:39
And you can, you know, go browser go
-
8:43
browser go, go browser, whatever you wanna do.
-
8:46
But Protractor can do that, and basically the
-
8:50
code you can see in the background once he's
-
8:52
done with his little dance it's just a bunch
-
8:55
of browser sleeps which I pushed into an array.
-
8:58
And then I'm setting the size and the position.
-
9:01
And then invoking all of them.
-
9:03
It's not, it's not a ton of code.
-
9:05
Just a silly example.
-
9:08
But a more practical thing would be to, in
-
9:10
this Protractor demo I have a, a button here.
-
9:16
So, if I launch this guy.
-
9:19
I have a button, which when I click it, it
-
9:23
wants to change the text to something else like updated.
-
9:27
And then I also have, an alert underneath
-
9:29
there once I type, please, it'll show the alert.
-
9:34
And so I'm like, well, how am I gonna test that.
-
9:36
Every time I build this I'm gonna have to
-
9:37
go through click the button and send in some keystrokes.
-
9:40
Now, if you want to do that in Protractor, you just have to write some specs
-
9:46
saying I want to describe I'll just call this my live demo scenario.
-
9:53
I want to say that it should update the text when I click the button.
-
10:01
We'll keep it really generic.
-
10:03
Before I even do that, I'll have to get the
-
10:05
URL, so I want it to launch my index HTML.
-
10:10
And I can just look up that button, so I look at
-
10:12
my page and we'll see, well it's, it's the only button on there.
-
10:18
And I can actually use the jQuery selector type, and I'll just say, take my button.
-
10:25
I'll say, button click, which will click that button and then
-
10:30
I'll expect the text of that field underneath it to be updated.
-
10:34
So, we'll say, I'll expect the text of the of the NG model or that
-
10:40
input field, so we'll find an input field by, well we'll find it by model.
-
10:46
So, by model.
-
10:50
And the model on this guy is @modelmessage.
-
10:56
We'll find that.
-
10:58
Drop that in there.
-
11:00
And this'll be our input.
-
11:01
Then we'll expect the input get attribute
-
11:09
value to be, whoops, to be updated.
-
11:15
Then I can come back and run this Protractor.
-
11:19
And it'll run through that test and tested one.
-
11:23
One test, one assertion so that passed.
-
11:25
If, if you wanna see it fail
-
11:29
now it should fail.
-
11:31
It said updated without the exclamation point
-
11:34
should be updated with the exclamation point.
-
11:36
Usually want them to fail first just so you know it's on the false positive.
-
11:39
And then we can say, well we clicked the button, now we wanna change the text.
-
11:44
So we can say, it should show the alert
-
11:49
when the text or when the input says please.
-
11:55
And then I'm just gonna reuse this input so I'll extract him out.
-
11:59
Oops.
-
12:00
I'll extract him out up here.
-
12:02
And put him into a before each.
-
12:08
Before
-
12:12
each will find the input, and then in our
-
12:16
next test we'll say that, we'll clear the input.
-
12:22
So, we want the text to be empty and then we'll send some keys to it.
-
12:26
We'll send P-L-E-A-S-E.
-
12:32
Then, we'll expect the attribute or the attribute of the alert.
-
12:37
So if I run, or look at the demo
-
12:39
real quick, and you can use your Chrome tools to
-
12:42
inspect stuff like this, we'll know that when this is
-
12:47
here it has a, that's probably really small for you.
-
12:52
It has a class of ng-hide, that's what's hiding it, and
-
12:56
so we wanna make sure that that class is not there.
-
13:01
So we'll come back here, we'll say, we'll expect, and we'll find our alert.
-
13:05
So, it should be the only alert on the
-
13:09
page, so we'll just go ahead and find the alert.
-
13:14
And once I have the alert I can say, expect we'll say, to
-
13:21
contain alert get attribute class to contain ngHide.
-
13:30
We actually, we don't want it to contain ngHide.
-
13:35
So at this point we can go back, run our Protractor tests, and this'll, that'll
-
13:41
launch the browser behind the scenes, click the button, put in some text input.
-
13:46
It did all that for me so now I have complete
-
13:48
confidence and I can run all this anytime somebody makes a change,
-
13:51
I have complete confidence that this scenario of clicking a button, updating
-
13:54
text, in showing and hiding that alert works just fine every time.
-
13:58
And it doesn't take if you've never seen Protractor before
-
14:03
if you've never written any Jasmine code before with the scribe and it.
-
14:08
If you've never done that before, that's still, everyone I've
-
14:12
shown that to makes a little bit of sense to.
-
14:14
Use a browser to get URL.
-
14:16
You find some elements even just using the jQuery
-
14:19
syntax if it's, if it's a shortcut for finding elements.
-
14:23
Or you can use the the by model,
-
14:26
by bindings, things like that, some Angular helpers.
-
14:30
And then you just check to say well, yeah I want that value to be updated.
-
14:33
I want this class not to have ngHide and things of that nature.
-
14:37
So, you can do this on your already existing projects and make
-
14:40
sure you have full, or some good integration tests covering your project.
-
14:46
All right.
-
14:47
So, moving on.
-
14:51
Let's close him down and I think I made this really big.
-
14:58
All right.
-
15:00
So use Protractor and one last thing I, I wanna
-
15:05
bring up is that Protractor can take screenshots of your code.
-
15:09
And some people find this really helpful for, for example, on this demo over
-
15:19
here.
-
15:19
Let's see.
-
15:20
Reopen that project in a new window.
-
15:29
In this demo down here, I had a grid where if I click the first
-
15:34
name I wanted to, I wanted it to sort the grid by the first name.
-
15:39
If I click the last name I wanted it to sort by the last name.
-
15:43
If I clicked an email I want it to sort by the email
-
15:46
and if I click the search I wanted it to search the table.
-
15:51
Now I have, because of the way I wrote my test, so
-
15:54
that it took a screen shot after each one I'm able to
-
15:58
prove with screen shots to either the UX people or my managers
-
16:02
or whoever that, that is the behavior and that's exactly how it's working.
-
16:06
I can say, you know what I, I sent a click to the browser.
-
16:09
I had to click on that.
-
16:10
This is the exact results I had if you did something else, you need to come and show
-
16:14
it to me in person and then I'll write
-
16:16
an integration test to cover that scenario as well.
-
16:19
But as far as that scenario goes, I have it covered.
-
16:21
Here's my, here's my visual proof of that.
-
16:24
All right?
-
16:29
So the next thing I want to bring up
-
16:32
is it's really important to prepare for the oncoming storm.
-
16:37
And what I mean by that is, ES6 is coming.
-
16:42
And ES6, if you're not familiar you're not familiar with ES, ES6 it's the
-
16:49
next version of JavaScript, and that page might not load but it's not a big deal.
-
16:55
It's the next version of JavaScript and it's gonna have
-
16:58
a lot more features for JavaScript, and the number one reason
-
17:03
this is important for Angular is that Angular version 2.0
-
17:07
which'll be released either later this year, early next year, whatever.
-
17:13
Is going to be based on the next version of JavaScript.
-
17:16
What that means is Angular 2.0's going to have things like it's gonna
-
17:22
have things like arrow functions block scope, classes inheritance,
-
17:28
array comprehensive, default parameters, and you can actually, yeah, six can
-
17:32
be written in a way that doesn't even look like JavaScript anymore.
-
17:36
If you put in enough array comprehensions and arrow functions and default
-
17:39
parameters with like iterators in there and you're like what is this language?
-
17:44
But there's, there's gonna be a lot of new features and a lot of actually
-
17:50
really welcome features including, including modules.
-
17:56
Let's see, go back here.
-
18:00
Including modules, which'll mean that the front end stuff which so for
-
18:04
has, has used require and browser find and all sorts of things
-
18:08
to do modules and all in many, many ways is gonna be
-
18:12
a built in, or a baked in feature to JavaScript in the future.
-
18:16
And, so you are gonna need to know that
-
18:18
whether or not whether or not, you want to, there's,
-
18:20
that's gonna be an unavoidable thing because people are going
-
18:23
to ship their code in modules that you'll load in.
-
18:27
So, there's, there's a ton of stuff to learn there.
-
18:30
I really, really recommend start, to start
-
18:32
checking out ES6 before before the storm hits.
-
18:37
I've, I've been with I've been through
-
18:40
some transitions in other languages where another
-
18:42
new version of the language comes out, everyone adopts it, some people kind of
-
18:45
straggle behind and then they wonder why
-
18:48
they're falling behind at work, they wonder
-
18:50
why the can't find a job anymore cuz they don't have that on their resume.
-
18:54
And it's just not a good situation to be in so be on top
-
18:57
of ES6 it's, it is coming and I think it's sooner than many people expect.
-
19:05
All right.
-
19:05
The next thing I want to, I want to bring up is that I see a lot
-
19:09
of people when they write their Angular apps
-
19:11
they, they build it all into one huge module.
-
19:15
They just try and keep it in one place and
-
19:21
what that does is it puts all your dependencies in one module
-
19:24
and if something goes wrong in there, then everything can fall apart.
-
19:27
It's just, do your best to separate them out I can show a quick example
-
19:34
from the, the workshop yesterday of kind of a way to structure an application.
-
19:39
So if you have like an admin section of your app and a dashboard section.
-
19:46
And you can create a module for the admin section.
-
19:49
Each module have its own config function where you
-
19:52
can setup and configure a lot of people realize
-
19:56
that you can configure your state providers or Any
-
19:59
other thinking you can figure per section, and similarly
-
20:03
the, the dashboard has its own module here defined
-
20:07
at the top, and then all you need to
-
20:09
do is load those in to your main module,
-
20:11
which is kind of like a wrapper for you applications.
-
20:16
And sometimes your main module might just only be.
-
20:21
A module that loads in the other modules that it needs.
-
20:24
Or maybe some basic application controller stuff that
-
20:27
has whether or not the user's logged in or
-
20:29
like manages the, the state of the main
-
20:32
application, where everything else is defined into smaller modules.
-
20:35
So, do your best to separate that out and keep them.
-
20:40
Keep it nice and, and clean and separated, so things don't come cascading down later.
-
20:47
All right.
-
20:48
So, ngCloak I see people always will run into this problem as their
-
20:52
app starts going along or, or they start loading a lot of data into.
-
20:57
Into the beginning of their application
-
21:03
and, what I mean by ngCloak is, if I run,
-
21:08
let's see, if I run protractor here,
-
21:13
and this launches the browser, and.
-
21:20
Let me, watch my server.
-
21:24
All right.
-
21:27
So that's, this is all failing because I didn't have
-
21:29
my browser up and running, or my server up and running.
-
21:33
So if I launch one more time.
-
21:40
Can't find module, protractor solutions, there it is.
-
21:48
All
-
21:51
right.
-
21:52
So as this goes through the test here.
-
21:54
You can see before the data comes in,
-
21:57
you'll see those little curly braces show up, I
-
22:00
just wanna do that one more time, sometimes you
-
22:02
have to hop over to the browser real quick.
-
22:04
So you can see the curly braces show up before the
-
22:06
data has loaded in, and right now I'm doing that intentionally.
-
22:09
And that's, this kind of shows the importance of what ngCloak is.
-
22:14
It allows you to hide the stuff that Angular hasn't rendered yet.
-
22:18
Before before it gets to the user.
-
22:21
And the way that you do that is, I'll come over to
-
22:28
this demo here.
-
22:30
My filter and order demo.
-
22:32
I'm just gonna put ngCloak on that table with the data in it.
-
22:38
And then in my spec here, or my configuration,
-
22:43
I'm gonna make it so it only runs that one.
-
22:47
So, comment that, comment that.
-
22:50
So, now protractor's only gonna run that, that one spec and you'll see that.
-
22:56
You never see that flash of unstyled content.
-
22:59
I'll do it one more time, you never
-
23:02
see those bindingscuz now ngCloak is saying, don't
-
23:05
show those double curly braced bindings until until
-
23:09
Angular has a chance to load in the page.
-
23:13
Another way of avoiding that sort of issue is if you move.
-
23:16
I know a lot of people that'll load the scripts
-
23:18
at the bottom of your body of your, of the html.
-
23:21
If you put AngularJS at the top in the
-
23:23
head, then that, that will block the content, but it
-
23:27
will also allow angular to start up and fire off
-
23:30
before that unstyled and unrendered content has some in, so.
-
23:34
It's kind of a mispractice to put.
-
23:36
Angular up in the, up in your head to avoid that
-
23:39
issue later on, then you might not even have to use ngCloak.
-
23:43
All right.
-
23:45
And if you have any questions about this stuff, I will be
-
23:47
at the speaker booth or table thing, I think it's at 3:25.
-
23:53
Feel free to come and ask any questions about this
-
23:57
in case there's, there's something you didn't quite get.
-
24:03
All right.
-
24:04
So users don't want to see the unstealth content.
-
24:07
Also, instead of using instead of using the double curly
-
24:12
braces, the alternative is to use an attribute called ngBind.
-
24:18
So if you put ng-bind as an attribute on any of your, anything
-
24:23
that would've had the double curly braces as the content inside of it, you
-
24:27
can just put NG bind with the data that you want to render out
-
24:30
inside of it and you can just avoid using double curly braces all together.
-
24:34
So there's You can use those combinations and
-
24:38
you won't run into that, that problem anymore.
-
24:42
All right, so, learn, learn your tools.
-
24:46
So this guy doesn't know how to use a
-
24:48
power drill for some reason, and he seems really upset.
-
24:51
And if you run in to a project and you have.
-
24:55
If you haveGrunt or Gulp or yeoman any of these
-
24:58
things in your projects because you're joining some new team.
-
25:03
You might just be staring at it for a while and not understand what's going on.
-
25:08
So, the, the big ones right now for the build tools.
-
25:13
Are Grunt and Gulp I don't really have a preference one one over the other Gulp.
-
25:21
I maybe I like the syntax a little bit more.
-
25:23
Grunt is, has been around longer and has more stable and better
-
25:26
libraries so far, so just, just kinda pick the one that you want.
-
25:32
I really don't care which one you use, but I really recommend don't
-
25:37
switch in the middle of a project just because you heard Gulp is cool.
-
25:40
Don't switch from Grunt to Gulp just because it's, it's the new hot thing.
-
25:46
Again it's like any project, once you pick
-
25:48
a technology [INAUDIBLE] try and stick with it.
-
25:51
I've just seen that go wrong too many times.
-
25:54
All right, so it looks like I have time for a couple demos with these things.
-
25:58
So for the Yeoman thing, if you've ever seen yeoman.io before.
-
26:05
This is a project generator, which you can
-
26:08
also configure and use for your own projects.
-
26:11
So while I don't use the generators like the
-
26:14
official generators for angular, for mobile, for backbone or
-
26:20
any of these things which could scaffold out a
-
26:22
project, generate controllers, generate directives, all this sort of stuff.
-
26:26
I don't use that just because I don't like to force myself into their conventions.
-
26:31
What I typically do is I start writing my application.
-
26:34
And as the, as the conventions kind of come
-
26:37
out, and it seems like it's the right structure.
-
26:39
And I realize where the boilerplate code is.
-
26:42
Then I can start then I can start
-
26:46
writing my own genereview, generator
-
26:47
because that's, it's actually pretty simple.
-
26:49
So, for example in my workshop that I gave yesterday.
-
26:55
I had a, the solutions and these lessons and I, I had a bunch
-
27:02
of lesson, bunch of solutions and a bunch of lessons and after about the third one.
-
27:09
Where it had a an HTML file, a JavaScript file, a spec and a test.
-
27:15
And like, okay, I'm generating the sa, I'm using the same files over and over again.
-
27:20
It's why don't I go ahead and write a generator for that,
-
27:25
so now I have a, from my, from my right directory, yup.
-
27:29
So now I have a yo workshop generator, which I wrote.
-
27:33
Which will ask me is it a is it a lesson or a solution?
-
27:37
I'll say yeah, it's a new solution.
-
27:39
Chapter number 27, and I'll just call this live demo.
-
27:44
And so once that generates it I have a folder called 27_
-
27:49
live demo, with a live demo html file loading in live demo ngf.
-
27:54
Which already references Angular and already has a UI router in there.
-
27:58
It references my live demo script, which loads
-
28:01
the live demo module it's called live demo.
-
28:05
My spec will open the browser to live demo html file, and
-
28:09
my test would set up if you've ever written unit test for Angular.
-
28:15
You know that in your before [INAUDIBLE] you always
-
28:18
include the module that you are using for you, your
-
28:20
tests on, and you're always injecting at least controller
-
28:23
and injector and root scope into into your test suite.
-
28:27
So it did all of that stuff for me despite running a single command and what it, the
-
28:33
only thing you have to look at for, To, the only things you have to customize for
-
28:39
that is in this project I have four files here in this template.
-
28:47
This is the, this is the yeoman template generator.
-
28:51
So I generated, I even installed this thing called
-
28:54
generator generator, and it's documented on the yeoman website.
-
28:57
And I have a template folder with my JavaScript html spec and test.
-
29:02
And in my JavaScript it just has a couple of
-
29:07
fields for my template, so I'll render out the app name.
-
29:09
And my index you'll see how these things match up, the app thing goes there.
-
29:13
My angular stuff goes there, if my spec, the full path goes there.
-
29:19
In my test it looks like that and then in
-
29:22
your index file, which is, this is what it invokes.
-
29:25
You just say, I, where it said, is this
-
29:29
a lesson or solution, it's just a simple list there.
-
29:32
I pick a chapter name, chapter number, chapter name.
-
29:35
I assign those and then I can use those for
-
29:39
this copy where I copy the template into the destination pattern.
-
29:45
So it's pretty simple to, to create these things.
-
29:48
It takes, it took probably, you know, ten, fifteen
-
29:52
minutes to configure this thing correctly, which saved me
-
29:54
probably an hour or more at least of writing
-
29:58
out the next 20 lessons I did of making those.
-
30:03
So, always move, you know, move the heavy lifting upfront and automate whatever
-
30:06
you can whether its generating stuff like that or whether its doing other things.
-
30:13
All right.
-
30:13
So, we have time for
-
30:17
the, the other thing I wanna show is that.
-
30:20
Now that, Angular's part of the, the whole JavaScript world and the
-
30:23
JavaScript world is going from front to back, you know, node is
-
30:27
a big thing now, express is a big thing, and you can actually [COUGH],
-
30:33
you can build really simple services, using very little code.
-
30:38
So if I go into my my simple services, where is it?
-
30:43
Thatt is, simple back end.
-
30:50
So if you look at this server I, I have set
-
30:52
up here, I'm just loading in a bunch of stuff right there.
-
30:55
And this is all just node code.
-
30:58
I have a server here which says, which can serve up some people.
-
31:02
Now the cool thing about this server is that all it is, is it's interacting with
-
31:07
a, interacting with a people JSON file, this is JSON and this is Jasan.
-
31:13
Anybody care which one I use?
-
31:15
I don't care, okay, I'll say JSON if you want me to say Jasan just let me know.
-
31:19
So this JSON file.
-
31:22
It's just a collection of people and, I can just launch this server.
-
31:30
So if I go ahead and run this server, it's
-
31:35
running on port 3000 and if I go into local host, local
-
31:40
host 3,000/people.
-
31:46
it, it'll get those people for me.
-
31:47
If I grab this person's id here,
-
31:53
copy it, and put that id after the slash.
-
32:00
It'll grab that one person for me.
-
32:02
And it, it gives you all the functionality,
-
32:04
like getting and updating, so getting, updating, putting, deleting.
-
32:09
All those things.
-
32:10
And all you have to do is work with a little JSON file.
-
32:12
So you don't have to install MongoDB, or, or Redis, or any other sort of Database,
-
32:20
if you just wanna set up some simple
-
32:21
services to mock out some services for your project.
-
32:24
Because as we start working more and more at the front end,
-
32:26
it's like, I just need some data to throw at my application.
-
32:30
And on the, on that sort of note I actually recommend the site called
-
32:36
generatedata.com which is a great way of You select a few fields here, you
-
32:42
say what you want them to be whether it's a first name, an email, a date, an
-
32:46
address, so you select a few fields, we'll just do name, names,
-
32:54
regional, any gender first name, we'll do email.
-
33:00
And say email.
-
33:01
Go over to the JSON, say I want this
-
33:04
to be simple JSON and generate 100, 100 people objects.
-
33:08
And then I have, then it generates all that for me.
-
33:12
And I have a data set to start working with my Angular app.
-
33:14
Because Angular without data is kind of, kind of
-
33:17
pointless, Any single page application without data's kind of pointless.
-
33:23
All right, so basically there's a couple projects like express for doing
-
33:27
the routing and this somewhere project is the one that lets you read
-
33:31
the JSON files in, where you can just get the route and post, which is a
-
33:36
simple db.find in that collection, it's a simple db.save.
-
33:42
Save the body of the request to the collection.
-
33:45
The id is DB find one in the collection of the id, and then returning that.
-
33:51
The update is to the collection, find the id and save the body.
-
33:56
So, it's super, super simple and super easy
-
33:59
to use for just setting up box services.
-
34:03
And it's much easier to build demo apps, much easier to big build tables,
-
34:06
pagenation things, whatever you wanna build, if
-
34:09
you have these simple services up and running.
-
34:13
All right, the other, other tool I wanna show is called
-
34:16
ng-min, and if you're not familiar with the reason ng-min exists.
-
34:22
I'll come over to my.
-
34:24
Close all of these.
-
34:27
I'll come over to my multi modules project,
-
34:33
and well let's do let's do this one.
-
34:40
So, the, the Angular injection works by.
-
34:43
Finding this name and matching it up with the string right here.
-
34:47
So day and vacation both need to match.
-
34:51
If I run a minifier like Uglify.
-
34:56
So I say Uglify js and then Im going to uglify my solutions.
-
35:03
I'm in 15 and value and constant JavaScript file.
-
35:09
Well actually, let's, we'll make this a bit easier here.
-
35:14
CD solutions value constant uglify.
-
35:17
So, this will output all of this to a minified JavaScript file.
-
35:25
Running that uglifiy command.
-
35:26
And if I format it so you can see
-
35:28
it a little bit better, what happened is that the
-
35:31
mangle flag which is this dash m here, which a
-
35:35
lot of people use for code obfuscation and what not.
-
35:38
It changed these so that it could, Angular JS can no longer find.
-
35:44
Find where they're being injected to.
-
35:46
That can create a huge problem and your app wouldn't work at all
-
35:49
and through a ton of errors, because this day does not match this.
-
35:53
This vacation does not match this.
-
35:57
So there's a tool called ng-min which is just you can install through npm.
-
36:02
And if I say ng-min and then the value in constant JavaScript file, and
-
36:09
then output it to I'll call it, value-in-constant.ngmin.js.
-
36:16
If
-
36:19
I look at the ng-minified file.
-
36:24
This actually changes it into a format which
-
36:27
is an alternate format which is a longer format.
-
36:30
Where it introduces an array next to your controller, so that these strings
-
36:36
know that this day matches up with this day, and that this day is actually, That
-
36:41
those strings never change because when you
-
36:43
minify files, it won't minify strings because obviously
-
36:47
you want your strings to always, stay in case they're messages or logs or whatever.
-
36:52
So, when I go to, when I go to uglify my minified version.
-
36:57
So if I come back here and say, .ngmin.js
-
37:06
and I then I uglified that version of it, and I come back into my minified file,
-
37:11
then you can see it
-
37:15
keeps the array format, which is a longer format, which is more painful to write in.
-
37:19
But ng-min will convert it into that format and save, save that step for you.
-
37:24
So if you're going to minify and mangle your
-
37:28
code, make sure that you're aware of, of this problem.
-
37:31
That either you're writing this long format with the erase syntax before hand.
-
37:37
Or you use ng-min as part of your build process
-
37:40
when you're minifying and deploying your code for for production.
-
37:46
All right.
-
37:48
So another tool html2js is another build tool you can use with Grunt or Gulp.
-
37:54
To, it can actually convert your HTML templates
-
37:58
whether they're view templates or templates for your directives.
-
38:02
It can convert them all into Java script
-
38:04
so you can, include them in your script tag,
-
38:09
You can minify them and obfuscate them and everything.
-
38:12
And then bundle them with your main app so it
-
38:14
can be just part of the, the main load up front.
-
38:17
You won't have to worry about loading them later on, you can just
-
38:20
bundle it with your main app, if, if that's something you want to do.
-
38:26
And then just be familiar with.
-
38:29
The, the transpires for these
-
38:31
aren't necessarily Angular specific but CoffeScript,
-
38:34
TypeScript, SAS, less, stylus and the whole wide array of them.
-
38:38
Just have a general knowledge so that if you see one coming your way that
-
38:42
you know you are at least aware of it, it doesn't catch you off guard.
-
38:45
All right, the last two things.
-
38:48
Thing number nine.
-
38:50
Embrace Community, I'm sad to see the show go.
-
38:53
But
-
38:55
what I mean by embrace community, contribute back if you can.
-
39:00
if, if you see some sort of bug, whether it's
-
39:03
in Angular, whether it's in, in an Angular project you're using.
-
39:06
Whether it's in any sort of open source thing.
-
39:08
Then just just try, and if, if you have the skills to do it, to
-
39:16
write a test, to to make the fix, and to submit a pull request, do that if you can.
-
39:22
You'll be it's the most helpful thing.
-
39:25
Finding an issue is great.
-
39:27
Finding an issue is great, it's just that sending in polar requests is really
-
39:30
where you're contributing back to the community
-
39:32
and, and help, helping with projects forward.
-
39:34
And this just isn't for Angular, any other framework, any other project you're using.
-
39:39
Contribute back if you can.
-
39:41
And then there's lots of other projects related to Angular.
-
39:45
Or if you've ever done a search for Angular
-
39:47
on Bower, I think it, I think it returns,
-
39:53
I did a count one time, Anyway,
-
40:02
there's a hundred and, 1,824 matching results to a search for Angular on Bower.
-
40:07
I don't know if all of, all of those are legit public things that
-
40:10
can work with your project, but theres a whole ton of them out there.
-
40:14
The ones to be aware of, Angular bootstrap, angular UI, angular
-
40:18
UI utils, ng-upload, I get asked to upload stuff all the time.
-
40:21
I just send them to third party libraries that're, that are out there.
-
40:26
Other ways of connecting to services like restangular, mobile stuff like ionic.
-
40:31
There tons and stuff, tons and tons of stuff out there so make
-
40:34
sure you leverage in the community and contributing back again if you can.
-
40:40
And the last one umber 10 is, is follow conventions.
-
40:44
And what I mean by follow conventions is that if you ever come onto a
-
40:48
project and you just have no idea
-
40:49
what's going on because somebody got really clever.
-
40:53
And I know it's, it's super fun to be clever on a project and make
-
40:56
some new, new contraption that does x, y, and z and spits out this magical thing.
-
41:04
That's great if you're gonna do that, document it.
-
41:08
but, the biggest, the biggest problem in the developer world
-
41:12
is that developers like to hop between jobs quite a bit.
-
41:15
And, as they're moving between jobs,
-
41:17
they'll sometimes leave behind, clever solutions, or
-
41:21
they'll come into a clever solution they won't, they won't know what's going on.
-
41:25
So, do your best to follow conventions, either
-
41:29
that are out there in the angular community.
-
41:31
There is a style guide and abstructure
-
41:35
conventions on angular blog that you can find.
-
41:38
If you don't follow that guide, then at
-
41:42
least document your own conventions or set up a.
-
41:45
Yeoman generators, something that can help people follow your conventions.
-
41:50
Don't use route scope for using some sort of crazy
-
41:54
inventing system, that's not the purpose of what angular is.
-
41:57
Angular is about binding.
-
41:59
So, use services, inject your services into controllers.
-
42:04
I know that might seem like.
-
42:05
It's not the way you're used to doing things.
-
42:07
Everyone's used to using events for sending changes in your app.
-
42:11
so, tend to rely on binding more than you're probably
-
42:14
used to or more than you may be even want to.
-
42:17
Cuz that's, I the only reason I bring that up
-
42:19
is the last one is something I've seen done a lot.
-
42:22
So.
-
42:24
All right, those are my Angular's top, top ten tips, thanks for coming.
-
42:28
I'll be outside in half an hour when, whenever it
-
42:31
is for any questions you might have, so, thanks guys.
-
42:36
[SOUND].
You need to sign up for Treehouse in order to download course files.
Sign up