Course info
Nov 9, 2016
1h 31m

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.

About the author
About the author

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.

More from the author
RESTful Web Services with Node.js and Express
2h 2m
Jan 24, 2019
More courses by Jonathan Mills
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. My name's Jonathan Mills, and welcome to my course on building Angular workflows. I write JavaScript, and part of writing JavaScript is dealing with a lot of files in a lot of different ways. So in this course, what I want to do is help build some tools around your Angular applications, and some of the major topics we're going to cover are going to including bundling and minification and how to make all that work. We're going to talk about validation. We'll talk about testing and static code analysis and how to build a workflow around making sure your code works well. We're also going to talk about ES6 and how to start adding some ES6 features into your current Angular application. We're going to work through all of that so that by the end of this course you should have a workflow in place that manages your entire Angular workflow and will handle all of these different pieces for you. Before beginning this course, you should probably be familiar with Angular. I'm not going to talk about Angular at all. I'm going to assume you already know it. We're just going to talk about how to build some tools around your existing application. So if that sounds good to you, let's get started.

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.

Debugging and Source Maps
Alright now that we've got minification done, and concatenation done and all of that stuff, we've fundamentally broken our debugging ability, and let me show you what I mean by that. If I'm in my category controller and I make this change, just like that, and this is now broken, and if I go and I re-run my gulp to rebuild my bundle, and we'll fix that here in a just a little bit as well. Now when I'm here and I refresh, this still works, but when I click on Categories, everything's broken, and when I go to my console, I get this very unhelpful e. getcategories is not a function, or e. getcategories and I click on this and it takes me here and that's gross, and so debugging is a problem, and actually, even if I kind of understand what's going on here, it's not always as straightforward as what we've got with just a couple of files, so, what I want to do in this module is fix that problem, so where we're at right now is minification breaks debugging, I can't debug in Chrome anymore because it's gross, it's this minified JavaScript file, so we're going to do some source maps and we're going to use source maps to fix our problem and we'll talk about what that is and what that looks like, and then how that helps to fix our problem, and then, we're going to start debugging in Chrome, and if you already know how to debug in Chrome, that's cool, I just want to kind of walk through while I've got it open some cool features to debugging in Chrome so we can leverage our source maps that we're building to help us debug our application.

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.