As you advance in your knowledge of AngularJS and your applications grow in size, you can be bombarded with a large variety of tooling to use. In this course, Advanced AngularJS Workflows, you will work through some of the problems that arise as your applications grow and the best tools available to help keep your applications maintainable. First, you will see how to go about setting up minification with for your application. Next, you will work with sourcemaps and see how they make debugging possible again, as well as setting up the Babel compiler to make your new ES6 code work with multiple browsers. Finally, you will set up multiple build paths to make your files production ready. When you're finished with this course, you'll be better prepared to manage your entire AngularJS workflow.
Jonathan is a Pluralsight Author, Technology Advisor, and Business Leader. As a member of the Chief Digital Advisory team at World Wide Technology, Jonathan is able to leverage his unique experiences and skills to drive digital transformation for his clients.
As a dedicated developer community leader, Jonathan serves on the board of directors for the Kansas City Developers Conference, is a Microsoft MVP, and is a regular speaker and keynote presenter at conferences around the globe.
The State of Angular Tooling If you're like most Angular developers, you have Angular code already written. And it seems like tools around Angular change on a fairly rapid basis and there's new tools out, there's new things you should be doing. And it's hard to do that when you already have existing applications. We don't always get to just build new Angular applications every time a new tool comes out. And so, what I want to do with this course is kind of help developers that already have an Angular application built. Start to wrap tooling around this application without forcing you to refactor a whole bunch of stuff, without forcing you to rebuild anything. Just take what we have and let's start wrapping some tools around the application that we have and go from there. So like I said, in this course, I'm going to assume you already have Angular code written. You've been doing Angular for a little while. You already have an application. You've already got something going on. And you're not taking advantage of all the tooling that's available to you and we'll talk about what that tooling is here in just a second. But most of the clients that I work with, when I start, when I walk in, they've got a bunch of Angular code, no tooling built around to support that Angular development. And so, what I want to do in this course is start to implement some workflow. Implement some pieces built around our Angular application to make our development a lot easier. And we're going to do this without refactoring our application. I don't want you to have to start over. I don't want you have to do file-new on some new project. I want you to be able to implement some tools with the application that already exists for you.
Using ES6 with Babel Alright now that we've got concatenation working and the bundling piece with minification in it and everything let's take the next step, let's do something a little bit more advanced and so let's start implementing some ES6 features into our application, not a holistic let's rewrite everything with ES6 but let's just take some ES6 features that we like and start to implement them. Because the reality is, ES6 is not all or nothing. ES6 isn't a new language, it's not a paradigm shift, it's nothing like that, it's just a set of features that we can now use for our application and so let's start to incorporate some of those features now. So like I said we don't want to go rewrite anything, we don't want to go and change a whole bunch of stuff about our application, but let's as we're continuing to build, let's just start incorporating some ES6 into our application as we go. So how we're going to do that is we're going to compile everything with Babel, so if you hand Babel ES5 code, it's not going to do anything if you had it some ES6 code it's going to compile it down to ES5 and if you're squeamish and you like the word transpile that's fine just whatever you hear me say, compile change it in your mind because I don't care. And compile seems to be the right thing to say. So we're going to compile everything with Babel, and then work from there. So let's spend a little bit of time getting Babel set up and then I'll show you how to start incorporating some ES6 features.
Validating Your Code So it's one thing to build out a workflow that does all of your code compilation, and bundling, and all of that stuff. But writing code is only part of it, I also need a validation piece involved in my workflow and so what I want to do now is I want to walk through a couple of different ways that we can validate our code and incorporate that into this workflow that we're building. So we'll do two things. 'Cause there's two sides to validation, the first side of validation is code quality. And so we're going to build out a JSHint validation for our code, so every time we write code it's going to run a JSHint validator so we know whether or not the code we're writing is done well and correct. The second part is we're going to validate some functionality and we're going to do that using Karma. And so what we're going to do second is we'll build out Karma which takes a little bit to get installed and get working right, so I'll just show you how to make all that happen. We'll get Karma built out and then we'll walk through a little bit of how to build some unit testing using the Karma front-end and we'll use Mocha as part of what we're doing.
Environment Specific Deploys All right. So let's wrap up this course with a thought of, I only want to do some of these tasks depending on where we're going, whether I'm deploying to production or my dev environment or maybe QA; and so let's talk through what this is going to look like. Now we saw source maps, and source maps in the browser let you see everything that's going on. It basically unpackages your code and lays everything out and that might not be something you want deployed to production, and so we want to take out our source maps when we're deploying to production. On the other hand though, when we're in a dev environment, minification makes debugging harder. I think at one point I mentioned you can just comment out uglify when you're in dev so you don't have to deal with the minification errors that you have, and so what I want to do with this module is I want to walk through how to only do the tasks you want done for the specific environment that you're going to be sending this to; and this is actually a fairly easy thing to get set up, and so we'll walk through it real quick and I'll show you how to get this done and then you should be all set to go with the workflow that we've built for our angular environment.