AngularJS Best Practices

This course will help you take the next step in your development by showing you best practices when developing web applications with AngularJS.
Course info
Rating
(1178)
Level
Intermediate
Updated
Oct 25, 2013
Duration
5h 3m
Table of contents
Course Introduction
Organizing your Code
Writing Controllers & Services
Writing Directives and Views
Dealing with Scope
Communicating Between Components
Breaking Down A Page into Components
Communicating with The Server
Dealing with Models
Description
Course info
Rating
(1178)
Level
Intermediate
Updated
Oct 25, 2013
Duration
5h 3m
Description

In this course you will take your AngularJS development to the next level by taking a deeper look at developing web applications with Angular. Building on the topics taught in the Angular Fundamentals course, you will take a deeper dive into the components of Angular: Controllers, Services, Filters, Directives, and Views. You will learn techniques that will help you in building applications bigger than tiny sample apps, such as organizing your code, breaking down a page into components, and communicating with the server. You will learn many patterns for more effective development such as patterns for cross-component communication, and patterns for creating an actual model layer. By the end of this course you should feel comfortable embarking upon a medium to large size application in AngularJS.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Angular Crash Course
Intermediate
58m
Nov 1, 2018
Unit Testing in Angular
Beginner
3h 20m
Sep 6, 2018
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

Organizing your Code
Hello, I'm Joe Eames. In this module, we'll be discussing Organizing your Code with AngularJS. Let's take a look at what we're going to cover in this module. The first thing we'll talk about is how to organize our files and folders with AngularJS. Then we'll talk about module organization and the effect that modules have on organizing our code. And lastly, we'll look at some strategies for naming our files and objects.

Writing Controllers & Services
Hello, I'm Joe Eames. Welcome to the module on Writing Controllers and Services. Controllers and Services are likely where you'll put the bulk of your code in Angular. Having a good understanding of these objects is critical to keeping your Angular code as clean and maintainable as possible. In this module we will be discussing three main concepts. First, we will look at the concept of code minification and discuss how it affects code in Angular and how to keep our Angular code safe from being broken by minification. Then, we will dig into controllers and take a close-up look at them and some design guidelines for writing controllers. And last, we will look at services in depth, how to create them, and some design guidelines for them as well.

Writing Directives and Views
Hello, I'm Joe Eames. Welcome to the module on Writing Directives and Views. Directives and views in Angular have a close relationship. Views are where we indicate when and how directives are used. In this module we will look in-depth at each of these objects and how they interact. We will discuss some best practices for each and try to get a much better understanding of how each of them works. We will start out by looking at some best practices around naming directives and how to avoid conflicts. Then we will discuss the different purposes of directives. After that we will compare implementing functionality and directives through either controllers or the link function. Then we will take a look at requiring controllers from other directives, which lets us get a handle to another directive's controller from the directive we are writing. And lastly, we will discuss creating good interfaces for directives. Then we will switch over to views and look at them in-depth. We will start this discussion with a look at how to avoid FOUC, or Flash of Unstyled Content, in our views. After that we will talk about how to write valid HTML with Angular. Then we will discuss having a declarative mindset when writing our Angular apps to maximize the benefit we get from Angular. And last we will discuss how to treat our HTML as a domain-specific language so that we can describe the functionality of our application right in our views. By the end of this module you should have a much better understanding and comfort with directives and views and have a good idea of some best practices with these objects.

Dealing with Scope
Hello, I'm Joe Eames and welcome to the module on Dealing with Scope. Scope is such a central part of Angular, understanding how scopes work and how they interact is critical to taking your development with Angular to the next level. Scopes can be a source of frustration and bugs if you do not understand which scope you are binding to when you create a binding, or if you do not understand how to correctly bind to items on other scopes. In this module we will take your knowledge to a level that you will be able to much more easily diagnose issues happening in your application and build your application in such a way that you are less prone to problems as your application grows. In this module we will start out with an introduction to the Batarang Chrome plugin, which helps us look at the internals of our application and visualize the scopes our app has created and how they interact with each other. Then we will have an overview of scopes and talk about the different relationships that scopes can have with each other. After that we will talk about the different ways to create scopes and directives. Then, we will dig into the first of three sections that look at scope relationships in depth. This first section will be about sharing scope. The next relationship type we will look at is inheriting scope and lastly we will look at isolating a scope. By the end of this module you should have a much better understanding of scopes and how they interact with each other and your application.

Communicating Between Components
Hello, I'm Joe Eames and welcome to the module on Communicating Between Components. In this module we will look at three different ways to allow components in Angular to communicate with each other and notify each other of changes in state and data. We will do this by taking a nonfunctioning system and implement it in each of the three ways. This will give us the unique opportunity to compare each method against each other. The first communication method we will look at is inherited scope. This method involves putting data on a parent scope, which allows visibility and manipulation by all the necessary parties. We will make our first implementation of the system we are building using this communication method. Then we will re-implement the system using events to enable cross-component communication. Angular's eventing system is extremely useful for sending messages around and we will see how this is done. And lastly, we will implement the system using shared services. This gives us the ability to encapsulate logic in services, which are easily required as a dependency in any Angular object. After each implementation we will take a moment to discuss the pros and cons of each method and after we finish all three implementations, we will draw some conclusions about when to use each communication method.