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