Angular is incredibly powerful and can sometimes be overwhelming, but Lukas has realized a few common themes he keeps revisiting over and over. In this course, Lukas shares with you the patterns he has found most effective as you build out an application piece by piece. Learn everything from naming conventions to organizing your app into services, directives and routing with examples and challenges to anchor the concepts. By the end of the course, you will be able to see how these patterns could be applied to approximate some of the most popular web applications that we use today.
This course and others like it are available as part of our Frontend Masters video subscription.
Published: June 5, 2015
Table of Contents
The Big Picture
Introduction
Lukas Ruebbelke begins the Angular course by demonstrating the Noterious application he will be building throughout each lessons. He also provides the audience with links to a guide for testing Angular applications and the other workshop resources. - https://github.com/simpulton/noterious - http://github.com/simpulton/angularjs-testing-quick-start - http://bit.ly/ng-app-workshopThe Angular Big Picture
Lukas talks at a high level about how he builds Angular applications. He diagrams the basic anatomy and explains how various components like views, controllers, directives, and services are related.File Structure
Structuring files based on feature rather than type will make Angular applications more organized and easier to manage. Lukas shows how he structured the Noterious application to emphasize this style of organization. He also talks about how to organize common resources.
Routes
Modules & Routes
Angular modules are logical containers to organize code. They promote re-usability as well as an a-la-carte development experience. Routes allow you to directly navigate to a specific state within the application.Noterious Routes
Lukas spends a few minutes explaining the the Noterious application. He walks through how the application is instantiated and where the routes are declared.Basic Routing Example
Lukas walks through the first example: Basic Routing. This example has two simple routes and each route has a sub-route. Controllers are defined inline for simplicity. - examples/01 Basic RoutingTesting
Because state is separate from the DOM, Angular is an extremely easy framework to test. Unit testing can be done with Karma. E2E testing can be done with Protractor.Challenge 1: Architecture
Lukas introduces the first challenge. In this challenge, you will create the file structure for the boards feature. Then you’ll create a boards route and write a unit test for that route.Challenge 1 Solution
Lukas walks through the solution to challenge 1.
Views & Controllers
Views
A view represents the DOM after it has been compiled by Angular. The view is primarily responsible for displaying the model state and and conveying user interaction.Controllers
Controllers are responsible for constructing and maintaining the model for a view to interact with. Ideally they consume data from a service and delegate the manipulation of that data.Controller As Syntax
The “Controller As” syntax was introduced to provide a more explicit syntax for declaring methods and properties. Lukas explains this syntax and talks briefly about properties and methods within a controller.ngModel & ngSubmit
The ng-model directive can be used to create a two-way data binding to properties in a controller. Lukas uses a simple web form example to demonstrate the two-way data binding. He also uses the ng-submit directive to handle the submission of the form. - examples/02 ngModel & ngSubmitngRepeat & ngClick
The ng-repeat directive behaves like a for-in loop. It can be used to output markup for each item in a data-set. Lukas gives a quick demonstration of ng-repeat. Then he answers a few audience questions about filtering results within the repeater. - examples/03 ngRepeat & ngClickChallenge 2: Views & Controllers
In this challenge, you will use ng-repeat to display all the boards in the collection. You will also add functionality for creating and editing boards.Challenge 2 Solution
Lukas walks through the solution to challenge 2.
Services
Services
In Angular, services act as the model. It’s common for service logic to start in a controller and eventually get promoted to a separate service object. Lukas walks through a brief example of creating a service. - examples/04 Promote to ServiceTesting Services
Lukas spends a few minutes explaining how he tests services using mock objects. He then answers a few audience questions about using a factory vs. a service.Promises
Promises allow you to perform asynchronous operations without using callbacks. In Angular, you can use the $q service to manually control promises. Lukas introduces promise and walks through a quick code demonstration of how to use the $q service. - examples/05 Promises$http Service
The Angular $http service can be used to communicate with remote services over http. This service has REST-ful methods which make the API convenient to use. Building off the promises example, Lukas externalizes the list of items and loads them into the application using the $http service. - examples/06 The $http ServiceCRUD Example
Lukas spends a few minutes walking through his use of the $http service object in the Noterious application. This shows how easy it is to build a CRUD-style service API with the existing methods.Challenge 3: Services
In this challenge, you will create a BoardsModel service that will retrieve a remote board using the $http service object. You will also write a unit test for the BoardsModel service.Challenge 3 Solution
Lukas demonstrates the solution to challenge 3.
Directives
Directives
Directives allow developers to encapsulate custom functionality using HTML tags and attributes. The three main elements of a directive are the link method, controller method, and the directive definition object.Directive Definition Object
Lukas demonstrates the three main elements of a directive. He begins with the directive definition object. This object allows you to configure the directives. For example, you can specify the directive’s template. - examples/07 Directive Definition ObjectLink Function
The link function provides a location for DOM manipulation. To demonstrate this, Lukas adds a hover event handler that will modify the opacity of the element when it is rolled over. - examples/08 Link FunctionController Function
Directive controller functions are very similar to Angular controllers. They contain logic to hand communication between the view and the model. Directive controllers are specified in the definition object. - examples/09 Controller FunctionChallenge 4: Directives
This challenge requires you to create a board directive and move the board list HTML into a new template. You’ll also bootstrap the board directive with link and controller functions.Challenge 4: Solution
Lukas walks through the solution to challenge 4.Isolated Scope
Lukas takes a few minutes to explain the concept of isolated scope with directives. This technique allows you to call a function specified in the HTML from your directive. After talking about isolated scope, Lukas answers a few audience questions about local data storage and controller usage.
Routing
Routes and States
While ngRoute is useful, ui-router has many more capabilities. With ui-router, you can create named views and have them nested. This allows you to turn your application into a ore precise state machine.The $stateParams Service
The $stateParams services is used to send parameters between states. These parameters can be set directly in the navigation URL or by using the ui-sref directive or $state service. - examples/10 $stateParams ServiceChallenge 5: Routing
In this challenge, you will create a new route to show the details of the selected board. You will use $state.go() and ui-sref to navigate between the states.Challenge 5 Solution
Lukas walks through the solution to Challenge 5.
Wrap-up
Applying What You’ve Learned
After looking talking about a couple ways the Noterious application could be modified or extended, Lukas gives out an assignment with a few additional challenges. These include extending the model to include extra properties, adding animation, creating alternate layouts, or integrating 3rd party components.Resources
Lukas wraps up the course by answers a number of audience questions and giving out a few resources.