AngularJS Patterns: Clean Code

Learn how to write AngularJS code using battle tested patterns to produce code that is easier to maintain, debug, and scale.
Course info
Rating
(1359)
Level
Beginner
Updated
Oct 8, 2014
Duration
3h 31m
Table of contents
Course Introduction
Separation of Concerns
Organizing Your App
Modules
Readable Code and AngularJS
Controller Patterns
Annotations and Code Analysis via Gulp Task Automation
Exception Handling
Using a Team Style Guide
Description
Course info
Rating
(1359)
Level
Beginner
Updated
Oct 8, 2014
Duration
3h 31m
Description

Once you learn the basics of AngularJS, you encounter decisions that not only affect how well your app will scale and perform, but also how easily it can be maintained. This course takes AngularJS developers beyond the fundamentals to address that next level of problems you encounter. You'll see familiar patterns such as Separation of Concerns (SoC) are at the heart of building solid AngularJS applications. You'll learn techniques to organize code and the right questions to ask yourself that can shape your application patterns. Other topics include: how to extend application design from small, to medium, to large scale apps with many modules, naming conventions, controller techniques, reusable services, creating reusable building blocks, dependency injection, and build automation. By the end of this course, you will have a solid understanding of how to write clean code with AngularJS to create greater implicit readability, make it easier to maintain, and extendable. Sample code for this course can be found here: https://github.com/johnpapa/ng-demos

About the author
About the author

John Papa is a Principal Developer Advocate with Microsoft and an alumnus of the Google Developer Expert, Microsoft Regional Director, and MVP programs.

More from the author
Angular CLI
Beginner
3h 22m
Aug 31, 2018
More courses by John Papa
Section Introduction Transcripts
Section Introduction Transcripts

Course Introduction
Congratulations, you've decided to build a Web application with Angular. Good choice. Well at least it's been great for me. By now you've got a pretty good sense for what the Angular components do and how they work. And if you're like me you're probably wondering how to make your application scale, and be maintainable, and not box yourself into a corner. There are plenty of great examples on how the individual components work, and that's very important. But once I got beyond the fundamentals I started to ask myself, how am I supposed to put these pieces together and organize my code? How do I avoid making a mess for myself and my team? And instead write cleaner code, more readable code, something I can maintain. And how do I break down the application capabilities into the small parts that are focused on a single concern, and yet make them work together seamlessly? And what are those small parts? And how do I make sure I can test my application? How can I ensure a code quality? Are there any automation techniques that I should know about? These are all very practical and reasonable questions that I started out with too. So if that sounds any bit familiar, well, then good news; this is your course. As I cover these topics in the course, I'll show you the what and the how, but I'm also going to stress the why. Every recommendation in this course comes with a why so you'll know why it's a good pattern or technique for the given situation. And that's a fundamental way I like to teach. If you know that why then you know how to think these decisions through, which leads you to the path that makes the best decision for your code. Hi, I'm John Papa with Pluralsight and welcome to AngularJS Patterns: Clean Code.

Separation of Concerns
Separation of concerns is perhaps the most important pattern that's out there, and in this module we're going to talk about how you can apply separation of concerns to an AngularJS application, and we'll see the benefits that we can get from it.

Organizing Your App
We can build amazing SPA and HTML5 applications when choosing a powerful framework, like Angular. And one of the first things that draws people into Angular is how easy it is to get started, but soon after the basics you're going to face some bigger decisions that go way beyond the framework such as how to organize your project. And not only for success, but also how not to box yourself into the corner. So as your app grows it becomes even more important to structure it in a way that makes it easy to maintain and manage it. A simple structure by type is easy out of the gate as the app generally starts with a single set of features, but now fast forward and imagine you're working on app that's got a handful of modules, with dozens of views and controllers; how do you organize your code now? No worries, in this module I'm going to walk you through the key decision points and demonstrate solid techniques on how to organize your app to make it easier for you to code, maintain, and extend it when the time is right.

Modules
Building apps by feature naturally transitions to a more extensible state, where each of those features becomes its own custom Angular module. We know Angular modules like ngRoute, and ngAnimate, but we can also create our own custom modules, which like the other components in Angular are just another form of ravioli as they encapsulate a set of features. So what's the alternative? Well, one way is to define one module, and put everything in your app in that module. This may be fine for small apps, but you can hit a wall with that monolithic app style. So what do you do? Well, it's often better to think about separating your app into reusable components early on where the components can be used to build an app. Modular applications are easy to plug and go as they allow the development teams to build vertical slices of applications, and roll out incrementally. So as we add new features, we can plug them in as we develop them. Just remember that modules are simply dependencies so in addition to separation we must identify the dependency chain so the components can operate properly. And you're going to learn this and much more as this module covers these concepts by demonstrating how to think about, design, and build modular applications.

Readable Code and AngularJS
We spend more time reading our code than writing it. To become truly efficient at refactoring and enhancing it we need out code to be readable, so this makes it immensely important that we focus on writing readable code. The app structure is important to help us both modularize our code and make it easy to locate. And after all we're much more efficient when we organize our code because nobody has fun scrolling through thousands of lines of code to find what we're looking for, right? But what's inside the code matters just as much as the app structure. This is where we spend more of our time reading code. This module will focus on some options we have inside our code to help improve readability. Ultimately you need to choose your own style, and what works for you and your team. I'll be showing my recommendations and some alternatives in this module. Just remember, there are many right answers. So in this module we'll discuss how these topics, and more, can impact our code quality, and how readable and efficient you can be with your angular code.

Controller Patterns
You might say the controllers are the heart of Angular. They provide a channel for the interactivity between the views and the rest of the components in an application. It's important to understand what they can provide, the pitfalls to avoid, and practice consistency in you approach with them. In this module we're going to cover roles of a controller, and how you can deal with classic versus new style of creating a controller, why dots matter, and nesting controller, which we do quite often actually, linking the controller to the view and routes, some things that the $scope service does, and then route resolvers, and of course, unit testing. And we'll do this to better understand how to write cleaner code for controllers, and when interacting with controllers from test routes and views.

Annotations and Code Analysis via Gulp Task Automation
We can practice clean coding patterns, but we're all human and it would be great to have a way to catch some of the more common mistakes that we make, and automate some of the more repetitive tasks. This is where task automation tools like Gulp can really benefit us. In this module we're going to first learn how quickly you can get an app up and running with Gulp on Node. js. And earlier in this course we learned how important dependency injection is to Angular. If we're not careful our code won't run when minified as our custom Angular component names might get mangled. We can solve this through writing explicit annotations, as we did earlier, but what if we miss one? We'll see how can make sure we avoid any of these issues with Gulp. And we'll also take a look at how we can run code analysis on our JavaScript to make sure there are no lurking issues.

Exception Handling
It's inevitable that something, somewhere, will go wrong in your app raising an exception, and when it does you want to be prepared to handle it. Exceptions can't be avoided entirely, but they can be handled gracefully. So how do we handle these? We need to handle them properly and consistently, and that might mean logging them, maybe using them for reporting, diagnostics for maybe a helpdesk, or a developer, or extending how the errors are thrown, or notifying the user. This module's going to cover several strategies for exception handling and provide some insight in how to think about exceptions with Angular using clean code.

Using a Team Style Guide
Throughout this course we focus on how to write clean code with Angular, but let's talk a little bit about how we can keep going by using a team style guide, and really help us moving forward. Patterns that we learn such as separation of concerns, the difference between spaghetti code and ravioli code, and design your application structure using the LIFT principles and naming conventions. How do we enforce modularity, knowing when to break thing out into modules and handling the dependency chains? We need to make sure our team can keep up with writing readable code, which gets difficult in larger projects so you have to have discipline and some kind of a structure in place, and that's where a team style guide can really help you out. Do you want to use controller patterns such as $scope, or Controller As? How do you reference routing resolvers and write unit tests for those? And are you going to use task animation? Things like ngAnnotate or JSHint with your code you keep it clean. And of course handling exception management -- you want to make sure your team's doing it in a consistent fashion. Well now it's time to put all these to practice and one way to help keep your team on track is through a style guide, so let's take a look at one.