All right, so, I'm John, as he said.

I'm the egghead guy.

And I just wanna thank all the people that

have come up to me and said they support egghead.

It's allowed me to work there full time now.

I use to work for JetBrains and I worked

on the WebStorm team for the past couple of years.

So, if you have any questions about WebStorm and you see

me around the conference, I can help you with that as well.

So I'm just gonna hop right in.

I am, I'm a teacher by trade.

And when I present or when I do any

of this stuff I, I teach I'm not very inspirational.

I'm not very motivational.

But hopefully you'll learn something from me.

So I try and just dump knowledge on you

guys and hopefully you'll take something away from it.

So, starting with number 1, AngularJS is made to be readable.

Would, what mean, what that means is that in your HTML, when

you're writing your code and you're writing out your HTML it's, the purpose

of AngularJS is so that your HTML can be declarative and it

can show the intent of your application by only looking at the HTML.

So, you should be able to, like the mark of a good Angular app,

is just opening the HTML and navigating around the HTML pages in the code base.

And if you can tell what it does just

by looking at the HTML and never even opening a

single lick of JavaScript, then you probably, then you

understand the intent and you've written a good Angular app.

The code, this JavaScript behind the scenes might be a bit messy

or whatever, but at least means that you understand the purpose of Angular.

And actually the way forward of the web,

what most of the frameworks are doing, and this

doesn't just apply to Angular, it applies to the

other frameworks as well as web components going forward.

You want your HTML to show what your app is doing.

So this, this example has a header with a tab bar, with tabs on it.

An account in the settings panel, in the sidebar; which

can collapse and when it collapses, it adjusts the full page.

The search box, which when it searches it searches that search term.

You can see that all from the HTML.

So that's the number one point, and I hope you, if you only learn one thing from

that, that's kind of the goal, that, the,

the best school to go for when writing Angular.

So don't fear directives and HTML declares your app is kinda the summary of that.

Directives are the, the magic behind those those pieces of markup.

So on the topic of directives, study Bootstrap.

And I'm not talking about Twitter Bootstrap, I'm talking about UI bootstrap

which is the Angular aversion of the Twitter Bootstrap components.

So if you go to angular-UI.github bio bootstrap or

just Google Angular Bootstrap it will take you to this

page here, and it can show you all the different

directive and components and how to get started with it.

But, whether or not you want to use it on your project is your own call.

Whether you need these components or you think that this style will fit.

Whether you want to write your own templates for it, that's your call.

But as a learning exercise and as, if you're looking for examples

of how to write angular and how to write good directives, this is the place to go.

They've done an excellent job creating great directives with full test coverage.

So if you look at something like, if I were to navigate down to the

Alert directive, and I wanna say well, I wonder how these work, how this pops up.

It's a very simple directive this is the code on GitHub.

I just, you can use it as an element or

an attribute, it has this alert controller, this simple template.

It replaces the content and has a couple of hooks for

the type as a string, and the close is a hook.

And then the template over here looks like this, just a

DIV and a button, and that's basically all there is to it.

But all the other directives in there which get more and more advanced

as you look through them, such

as the accordion directive, the carousel directive.

Those are all super helpful as far as learning how to get started with Angular.

I know you do a Google search for Angular

examples or Angular how to build directives or whatever,

and you might run into a bunch of articles

that are either outdated or just have bad examples.

I would highly, highly recommend using this

as a study guide for learning Angular.

All right.

So, number 3, jQuery is awesome avoid it.

So, jQuery, which everyone who's ever in JavaScript

in the past couple years has, has used.

I wouldn't, won't even say probably has used.

I'll just say has used.

It allows you to write

like the jQuery UI library allows you to write things, like on the,

or on my right side, on your left side, like, where you give

something an idea of an accordion and then at the bottom there where,

inside this script, you have a function

which finds the accordion through a selector.

And then applies an accordion function to it.

Again, this goes against the this goes against the idea of

writing your HTML in a way that describes what your app is doing, on

the right hand side we have what that would typically look like in

Angular, this is what it would look like in the, the bootstrap library.

Where you'd have an accordion with accordion groups underneath it.

And in the script behind the scenes is actually,

a whole bunch of more code, I would say.

And that's where, that's where people that run into that problem.

Like, they know how to do it really

quickly with jQuery, and they just look, they'll

just use the selector, find it and call

some sort of function on it, and it's done.

The problem is that, when you want to get into Angular you wanna do it, you kind

of have the idea of how to do it and you're like well I can write a directive,

but then I'm not really sure how to do the rest of it, but it's worth the effort in

the end to put a bit more time into it, so that you have these reusable directives.

Which you can use across your project, you can use across

other projects, and you can share them with everybody and whatnot.

So, as you finish your lots of Angular code.

I mean it's not a ton of code I'm just saying

in comparison to what it, with that jQuery plugin probably looks like.

You will have something re-usable and something that is very

flexible and easy change and easy to use across multiple projects.

So, go for what's on the right.

Try and avoid the, try and avoid the

jQuery stuff, even inside of your inside your directives.

The, the, one of the number, like, the most common question I get asked is how do

I integrate this jQuery plugin with Angular and

the answer I, I tell them is, you don't.

You, you avoid it.

You try and figure the way that jQuery is

doing it and then instead of using the selector

approach where you do, use the dollar sign and

put in some sort of selector to find that element.

You instead create your own custom element or you create your own custom attributes

that you can apply wherever you want them to live on your HTML page.

All right.

So number 4.

Use Protractor, and I, I say this meaning

that, you can use it on any existing project.

So, if you've, if you started a project already and you have it up and running.

And you wanna try and go back and write

unit tests for it using Karma or Jasmine or whatnot.

It might be a bit difficult because if you don't start with a unit test

and a test your own development scenarios, then

sometimes it's hard to write the test afterwards.

But Protractor you can use on any project including other people's project.

You can launch the browser to any URL and you can run test

against them, the integration test, sending button

clicks, sending keystrokes to test your application.

For example, you can even make your app dance using Protractor.

So, what I'll do here, using my dance

spec, I'll say Protractor, fire up my dance spec.

It'll hook into the selenium server.

And let's see what Chrome is doing in the background here.

And you can, you know, go browser go

browser go, go browser, whatever you wanna do.

But Protractor can do that, and basically the

code you can see in the background once he's

done with his little dance it's just a bunch

of browser sleeps which I pushed into an array.

And then I'm setting the size and the position.

And then invoking all of them.

It's not, it's not a ton of code.

Just a silly example.

But a more practical thing would be to, in

this Protractor demo I have a, a button here.

So, if I launch this guy.

I have a button, which when I click it, it

wants to change the text to something else like updated.

And then I also have, an alert underneath

there once I type, please, it'll show the alert.

And so I'm like, well, how am I gonna test that.

Every time I build this I'm gonna have to

go through click the button and send in some keystrokes.

Now, if you want to do that in Protractor, you just have to write some specs

saying I want to describe I'll just call this my live demo scenario.

I want to say that it should update the text when I click the button.

We'll keep it really generic.

Before I even do that, I'll have to get the

URL, so I want it to launch my index HTML.

And I can just look up that button, so I look at

my page and we'll see, well it's, it's the only button on there.

And I can actually use the jQuery selector type, and I'll just say, take my button.

I'll say, button click, which will click that button and then

I'll expect the text of that field underneath it to be updated.

So, we'll say, I'll expect the text of the of the NG model or that

input field, so we'll find an input field by, well we'll find it by model.

So, by model.

And the model on this guy is @modelmessage.

We'll find that.

Drop that in there.

And this'll be our input.

Then we'll expect the input get attribute

value to be, whoops, to be updated.

Then I can come back and run this Protractor.

And it'll run through that test and tested one.

One test, one assertion so that passed.

If, if you wanna see it fail

now it should fail.

It said updated without the exclamation point

should be updated with the exclamation point.

Usually want them to fail first just so you know it's on the false positive.

And then we can say, well we clicked the button, now we wanna change the text.

So we can say, it should show the alert

when the text or when the input says please.

And then I'm just gonna reuse this input so I'll extract him out.

Oops.

I'll extract him out up here.

And put him into a before each.

Before

each will find the input, and then in our

next test we'll say that, we'll clear the input.

So, we want the text to be empty and then we'll send some keys to it.

We'll send P-L-E-A-S-E.

Then, we'll expect the attribute or the attribute of the alert.

So if I run, or look at the demo

real quick, and you can use your Chrome tools to

inspect stuff like this, we'll know that when this is

here it has a, that's probably really small for you.

It has a class of ng-hide, that's what's hiding it, and

so we wanna make sure that that class is not there.

So we'll come back here, we'll say, we'll expect, and we'll find our alert.

So, it should be the only alert on the

page, so we'll just go ahead and find the alert.

And once I have the alert I can say, expect we'll say, to

contain alert get attribute class to contain ngHide.

We actually, we don't want it to contain ngHide.

So at this point we can go back, run our Protractor tests, and this'll, that'll

launch the browser behind the scenes, click the button, put in some text input.

It did all that for me so now I have complete

confidence and I can run all this anytime somebody makes a change,

I have complete confidence that this scenario of clicking a button, updating

text, in showing and hiding that alert works just fine every time.

And it doesn't take if you've never seen Protractor before

if you've never written any Jasmine code before with the scribe and it.

If you've never done that before, that's still, everyone I've

shown that to makes a little bit of sense to.

Use a browser to get URL.

You find some elements even just using the jQuery

syntax if it's, if it's a shortcut for finding elements.

Or you can use the the by model,

by bindings, things like that, some Angular helpers.

And then you just check to say well, yeah I want that value to be updated.

I want this class not to have ngHide and things of that nature.

So, you can do this on your already existing projects and make

sure you have full, or some good integration tests covering your project.

All right.

So, moving on.

Let's close him down and I think I made this really big.

All right.

So use Protractor and one last thing I, I wanna

bring up is that Protractor can take screenshots of your code.

And some people find this really helpful for, for example, on this demo over

here.

Let's see.

Reopen that project in a new window.

In this demo down here, I had a grid where if I click the first

name I wanted to, I wanted it to sort the grid by the first name.

If I click the last name I wanted it to sort by the last name.

If I clicked an email I want it to sort by the email

and if I click the search I wanted it to search the table.

Now I have, because of the way I wrote my test, so

that it took a screen shot after each one I'm able to

prove with screen shots to either the UX people or my managers

or whoever that, that is the behavior and that's exactly how it's working.

I can say, you know what I, I sent a click to the browser.

I had to click on that.

This is the exact results I had if you did something else, you need to come and show

it to me in person and then I'll write

an integration test to cover that scenario as well.

But as far as that scenario goes, I have it covered.

Here's my, here's my visual proof of that.

All right?

So the next thing I want to bring up

is it's really important to prepare for the oncoming storm.

And what I mean by that is, ES6 is coming.

And ES6, if you're not familiar you're not familiar with ES, ES6 it's the

next version of JavaScript, and that page might not load but it's not a big deal.

It's the next version of JavaScript and it's gonna have

a lot more features for JavaScript, and the number one reason

this is important for Angular is that Angular version 2.0

which'll be released either later this year, early next year, whatever.

Is going to be based on the next version of JavaScript.

What that means is Angular 2.0's going to have things like it's gonna

have things like arrow functions block scope, classes inheritance,

array comprehensive, default parameters, and you can actually, yeah, six can

be written in a way that doesn't even look like JavaScript anymore.

If you put in enough array comprehensions and arrow functions and default

parameters with like iterators in there and you're like what is this language?

But there's, there's gonna be a lot of new features and a lot of actually

really welcome features including, including modules.

Let's see, go back here.

Including modules, which'll mean that the front end stuff which so for

has, has used require and browser find and all sorts of things

to do modules and all in many, many ways is gonna be

a built in, or a baked in feature to JavaScript in the future.

And, so you are gonna need to know that

whether or not whether or not, you want to, there's,

that's gonna be an unavoidable thing because people are going

to ship their code in modules that you'll load in.

So, there's, there's a ton of stuff to learn there.

I really, really recommend start, to start

checking out ES6 before before the storm hits.

I've, I've been with I've been through

some transitions in other languages where another

new version of the language comes out, everyone adopts it, some people kind of

straggle behind and then they wonder why

they're falling behind at work, they wonder

why the can't find a job anymore cuz they don't have that on their resume.

And it's just not a good situation to be in so be on top

of ES6 it's, it is coming and I think it's sooner than many people expect.

All right.

The next thing I want to, I want to bring up is that I see a lot

of people when they write their Angular apps

they, they build it all into one huge module.

They just try and keep it in one place and

what that does is it puts all your dependencies in one module

and if something goes wrong in there, then everything can fall apart.

It's just, do your best to separate them out I can show a quick example

from the, the workshop yesterday of kind of a way to structure an application.

So if you have like an admin section of your app and a dashboard section.

And you can create a module for the admin section.

Each module have its own config function where you

can setup and configure a lot of people realize

that you can configure your state providers or Any

other thinking you can figure per section, and similarly

the, the dashboard has its own module here defined

at the top, and then all you need to

do is load those in to your main module,

which is kind of like a wrapper for you applications.

And sometimes your main module might just only be.

A module that loads in the other modules that it needs.

Or maybe some basic application controller stuff that

has whether or not the user's logged in or

like manages the, the state of the main

application, where everything else is defined into smaller modules.

So, do your best to separate that out and keep them.

Keep it nice and, and clean and separated, so things don't come cascading down later.

All right.

So, ngCloak I see people always will run into this problem as their

app starts going along or, or they start loading a lot of data into.

Into the beginning of their application

and, what I mean by ngCloak is, if I run,

let's see, if I run protractor here,

and this launches the browser, and.

Let me, watch my server.

All right.

So that's, this is all failing because I didn't have

my browser up and running, or my server up and running.

So if I launch one more time.

Can't find module, protractor solutions, there it is.

All

right.

So as this goes through the test here.

You can see before the data comes in,

you'll see those little curly braces show up, I

just wanna do that one more time, sometimes you

have to hop over to the browser real quick.

So you can see the curly braces show up before the

data has loaded in, and right now I'm doing that intentionally.

And that's, this kind of shows the importance of what ngCloak is.

It allows you to hide the stuff that Angular hasn't rendered yet.

Before before it gets to the user.

And the way that you do that is, I'll come over to

this demo here.

My filter and order demo.

I'm just gonna put ngCloak on that table with the data in it.

And then in my spec here, or my configuration,

I'm gonna make it so it only runs that one.

So, comment that, comment that.

So, now protractor's only gonna run that, that one spec and you'll see that.

You never see that flash of unstyled content.

I'll do it one more time, you never

see those bindingscuz now ngCloak is saying, don't

show those double curly braced bindings until until

Angular has a chance to load in the page.

Another way of avoiding that sort of issue is if you move.

I know a lot of people that'll load the scripts

at the bottom of your body of your, of the html.

If you put AngularJS at the top in the

head, then that, that will block the content, but it

will also allow angular to start up and fire off

before that unstyled and unrendered content has some in, so.

It's kind of a mispractice to put.

Angular up in the, up in your head to avoid that

issue later on, then you might not even have to use ngCloak.

All right.

And if you have any questions about this stuff, I will be

at the speaker booth or table thing, I think it's at 3:25.

Feel free to come and ask any questions about this

in case there's, there's something you didn't quite get.

All right.

So users don't want to see the unstealth content.

Also, instead of using instead of using the double curly

braces, the alternative is to use an attribute called ngBind.

So if you put ng-bind as an attribute on any of your, anything

that would've had the double curly braces as the content inside of it, you

can just put NG bind with the data that you want to render out

inside of it and you can just avoid using double curly braces all together.

So there's You can use those combinations and

you won't run into that, that problem anymore.

All right, so, learn, learn your tools.

So this guy doesn't know how to use a

power drill for some reason, and he seems really upset.

And if you run in to a project and you have.

If you haveGrunt or Gulp or yeoman any of these

things in your projects because you're joining some new team.

You might just be staring at it for a while and not understand what's going on.

So, the, the big ones right now for the build tools.

Are Grunt and Gulp I don't really have a preference one one over the other Gulp.

I maybe I like the syntax a little bit more.

Grunt is, has been around longer and has more stable and better

libraries so far, so just, just kinda pick the one that you want.

I really don't care which one you use, but I really recommend don't

switch in the middle of a project just because you heard Gulp is cool.

Don't switch from Grunt to Gulp just because it's, it's the new hot thing.

Again it's like any project, once you pick

a technology [INAUDIBLE] try and stick with it.

I've just seen that go wrong too many times.

All right, so it looks like I have time for a couple demos with these things.

So for the Yeoman thing, if you've ever seen yeoman.io before.

This is a project generator, which you can

also configure and use for your own projects.

So while I don't use the generators like the

official generators for angular, for mobile, for backbone or

any of these things which could scaffold out a

project, generate controllers, generate directives, all this sort of stuff.

I don't use that just because I don't like to force myself into their conventions.

What I typically do is I start writing my application.

And as the, as the conventions kind of come

out, and it seems like it's the right structure.

And I realize where the boilerplate code is.

Then I can start then I can start

writing my own genereview, generator

because that's, it's actually pretty simple.

So, for example in my workshop that I gave yesterday.

I had a, the solutions and these lessons and I, I had a bunch

of lesson, bunch of solutions and a bunch of lessons and after about the third one.

Where it had a an HTML file, a JavaScript file, a spec and a test.

And like, okay, I'm generating the sa, I'm using the same files over and over again.

It's why don't I go ahead and write a generator for that,

so now I have a, from my, from my right directory, yup.

So now I have a yo workshop generator, which I wrote.

Which will ask me is it a is it a lesson or a solution?

I'll say yeah, it's a new solution.

Chapter number 27, and I'll just call this live demo.

And so once that generates it I have a folder called 27_

live demo, with a live demo html file loading in live demo ngf.

Which already references Angular and already has a UI router in there.

It references my live demo script, which loads

the live demo module it's called live demo.

My spec will open the browser to live demo html file, and

my test would set up if you've ever written unit test for Angular.

You know that in your before [INAUDIBLE] you always

include the module that you are using for you, your

tests on, and you're always injecting at least controller

and injector and root scope into into your test suite.

So it did all of that stuff for me despite running a single command and what it, the

only thing you have to look at for, To, the only things you have to customize for

that is in this project I have four files here in this template.

This is the, this is the yeoman template generator.

So I generated, I even installed this thing called

generator generator, and it's documented on the yeoman website.

And I have a template folder with my JavaScript html spec and test.

And in my JavaScript it just has a couple of

fields for my template, so I'll render out the app name.

And my index you'll see how these things match up, the app thing goes there.

My angular stuff goes there, if my spec, the full path goes there.

In my test it looks like that and then in

your index file, which is, this is what it invokes.

You just say, I, where it said, is this

a lesson or solution, it's just a simple list there.

I pick a chapter name, chapter number, chapter name.

I assign those and then I can use those for

this copy where I copy the template into the destination pattern.

So it's pretty simple to, to create these things.

It takes, it took probably, you know, ten, fifteen

minutes to configure this thing correctly, which saved me

probably an hour or more at least of writing

out the next 20 lessons I did of making those.

So, always move, you know, move the heavy lifting upfront and automate whatever

you can whether its generating stuff like that or whether its doing other things.

All right.

So, we have time for

the, the other thing I wanna show is that.

Now that, Angular's part of the, the whole JavaScript world and the

JavaScript world is going from front to back, you know, node is

a big thing now, express is a big thing, and you can actually [COUGH],

you can build really simple services, using very little code.

So if I go into my my simple services, where is it?

Thatt is, simple back end.

So if you look at this server I, I have set

up here, I'm just loading in a bunch of stuff right there.

And this is all just node code.

I have a server here which says, which can serve up some people.

Now the cool thing about this server is that all it is, is it's interacting with

a, interacting with a people JSON file, this is JSON and this is Jasan.

Anybody care which one I use?

I don't care, okay, I'll say JSON if you want me to say Jasan just let me know.

So this JSON file.

It's just a collection of people and, I can just launch this server.

So if I go ahead and run this server, it's

running on port 3000 and if I go into local host, local

host 3,000/people.

it, it'll get those people for me.

If I grab this person's id here,

copy it, and put that id after the slash.

It'll grab that one person for me.

And it, it gives you all the functionality,

like getting and updating, so getting, updating, putting, deleting.

All those things.

And all you have to do is work with a little JSON file.

So you don't have to install MongoDB, or, or Redis, or any other sort of Database,

if you just wanna set up some simple

services to mock out some services for your project.

Because as we start working more and more at the front end,

it's like, I just need some data to throw at my application.

And on the, on that sort of note I actually recommend the site called

generatedata.com which is a great way of You select a few fields here, you

say what you want them to be whether it's a first name, an email, a date, an

address, so you select a few fields, we'll just do name, names,

regional, any gender first name, we'll do email.

And say email.

Go over to the JSON, say I want this

to be simple JSON and generate 100, 100 people objects.

And then I have, then it generates all that for me.

And I have a data set to start working with my Angular app.

Because Angular without data is kind of, kind of

pointless, Any single page application without data's kind of pointless.

All right, so basically there's a couple projects like express for doing

the routing and this somewhere project is the one that lets you read

the JSON files in, where you can just get the route and post, which is a

simple db.find in that collection, it's a simple db.save.

Save the body of the request to the collection.

The id is DB find one in the collection of the id, and then returning that.

The update is to the collection, find the id and save the body.

So, it's super, super simple and super easy

to use for just setting up box services.

And it's much easier to build demo apps, much easier to big build tables,

pagenation things, whatever you wanna build, if

you have these simple services up and running.

All right, the other, other tool I wanna show is called

ng-min, and if you're not familiar with the reason ng-min exists.

I'll come over to my.

Close all of these.

I'll come over to my multi modules project,

and well let's do let's do this one.

So, the, the Angular injection works by.

Finding this name and matching it up with the string right here.

So day and vacation both need to match.

If I run a minifier like Uglify.

So I say Uglify js and then Im going to uglify my solutions.

I'm in 15 and value and constant JavaScript file.

Well actually, let's, we'll make this a bit easier here.

CD solutions value constant uglify.

So, this will output all of this to a minified JavaScript file.

Running that uglifiy command.

And if I format it so you can see

it a little bit better, what happened is that the

mangle flag which is this dash m here, which a

lot of people use for code obfuscation and what not.

It changed these so that it could, Angular JS can no longer find.

Find where they're being injected to.

That can create a huge problem and your app wouldn't work at all

and through a ton of errors, because this day does not match this.

This vacation does not match this.

So there's a tool called ng-min which is just you can install through npm.

And if I say ng-min and then the value in constant JavaScript file, and

then output it to I'll call it, value-in-constant.ngmin.js.

If

I look at the ng-minified file.

This actually changes it into a format which

is an alternate format which is a longer format.

Where it introduces an array next to your controller, so that these strings

know that this day matches up with this day, and that this day is actually, That

those strings never change because when you

minify files, it won't minify strings because obviously

you want your strings to always, stay in case they're messages or logs or whatever.

So, when I go to, when I go to uglify my minified version.

So if I come back here and say, .ngmin.js

and I then I uglified that version of it, and I come back into my minified file,

then you can see it

keeps the array format, which is a longer format, which is more painful to write in.

But ng-min will convert it into that format and save, save that step for you.

So if you're going to minify and mangle your

code, make sure that you're aware of, of this problem.

That either you're writing this long format with the erase syntax before hand.

Or you use ng-min as part of your build process

when you're minifying and deploying your code for for production.

All right.

So another tool html2js is another build tool you can use with Grunt or Gulp.

To, it can actually convert your HTML templates

whether they're view templates or templates for your directives.

It can convert them all into Java script

so you can, include them in your script tag,

You can minify them and obfuscate them and everything.

And then bundle them with your main app so it

can be just part of the, the main load up front.

You won't have to worry about loading them later on, you can just

bundle it with your main app, if, if that's something you want to do.

And then just be familiar with.

The, the transpires for these

aren't necessarily Angular specific but CoffeScript,

TypeScript, SAS, less, stylus and the whole wide array of them.

Just have a general knowledge so that if you see one coming your way that

you know you are at least aware of it, it doesn't catch you off guard.

All right, the last two things.

Thing number nine.

Embrace Community, I'm sad to see the show go.

But

what I mean by embrace community, contribute back if you can.

if, if you see some sort of bug, whether it's

in Angular, whether it's in, in an Angular project you're using.

Whether it's in any sort of open source thing.

Then just just try, and if, if you have the skills to do it, to

write a test, to to make the fix, and to submit a pull request, do that if you can.

You'll be it's the most helpful thing.

Finding an issue is great.

Finding an issue is great, it's just that sending in polar requests is really

where you're contributing back to the community

and, and help, helping with projects forward.

And this just isn't for Angular, any other framework, any other project you're using.

Contribute back if you can.

And then there's lots of other projects related to Angular.

Or if you've ever done a search for Angular

on Bower, I think it, I think it returns,

I did a count one time, Anyway,

there's a hundred and, 1,824 matching results to a search for Angular on Bower.

I don't know if all of, all of those are legit public things that

can work with your project, but theres a whole ton of them out there.

The ones to be aware of, Angular bootstrap, angular UI, angular

UI utils, ng-upload, I get asked to upload stuff all the time.

I just send them to third party libraries that're, that are out there.

Other ways of connecting to services like restangular, mobile stuff like ionic.

There tons and stuff, tons and tons of stuff out there so make

sure you leverage in the community and contributing back again if you can.

And the last one umber 10 is, is follow conventions.

And what I mean by follow conventions is that if you ever come onto a

project and you just have no idea

what's going on because somebody got really clever.

And I know it's, it's super fun to be clever on a project and make

some new, new contraption that does x, y, and z and spits out this magical thing.

That's great if you're gonna do that, document it.

but, the biggest, the biggest problem in the developer world

is that developers like to hop between jobs quite a bit.

And, as they're moving between jobs,

they'll sometimes leave behind, clever solutions, or

they'll come into a clever solution they won't, they won't know what's going on.

So, do your best to follow conventions, either

that are out there in the angular community.

There is a style guide and abstructure

conventions on angular blog that you can find.

If you don't follow that guide, then at

least document your own conventions or set up a.

Yeoman generators, something that can help people follow your conventions.

Don't use route scope for using some sort of crazy

inventing system, that's not the purpose of what angular is.

Angular is about binding.

So, use services, inject your services into controllers.

I know that might seem like.

It's not the way you're used to doing things.

Everyone's used to using events for sending changes in your app.

so, tend to rely on binding more than you're probably

used to or more than you may be even want to.

Cuz that's, I the only reason I bring that up

is the last one is something I've seen done a lot.

So.

All right, those are my Angular's top, top ten tips, thanks for coming.

I'll be outside in half an hour when, whenever it

is for any questions you might have, so, thanks guys.

[SOUND].