Angular 1.x Essentials
Author of AngularJS in Action
4 hours, 56 minutes
Become a Master
This course and others like it are available as part of our Frontend Masters video subscription.
Watch Free Preview
Join Frontend Masters
"AngularJS In Action" author Lukas Ruebbelke dives into AngularJS, an intuitive framework that makes it easy to organize code by incorporates concepts like two-way binding, dependency injection and views which results in very testable code.
Published: November 19, 2013
Table of Contents
00:00:00 - 00:05:38
Lukas begins the course by introducing himself and talking about the book he's writing. He also layouts out the schedule and topics for the course. - http://onehungrymind.com
00:05:39 - 00:10:35
History of AngularJS
AngularJS was developed in 2009 by Misko Hevery. At the time of this course, the current stable release version is 1.0.7. Originally Angular was targeted toward CRUD-style applications. It's evolved a lot since then.
00:10:36 - 00:19:59
The AngularJS Elevator Pitch
AngularJS is an intuitive framework that makes it easy to organize code. It incorporates two-way binding, data structures, and templates that result in very testable code. The use of AngularJS in today's web applications is grown very quickly. This means the ecosystem and community are growing too.
00:20:00 - 00:26:26
Coding Hello AngularJS
To build a "Hello Angular" application, you'll need to set up a controller. You'll need to bootstrap your application with the ng-app directive. Finally, you'll need to instantiate your controller. Lukas begins coding the Hello Angular application.
00:26:27 - 00:36:24
Questions: Views are HTML
Lukas answers an audience questions about how a view in AngularJS is the HTML. He'll elaborate on this more in the next module. Lukas answers a question on the $scope property. HTML element can be added that automatically bind to model data inside the controller.
00:36:25 - 00:40:42
Yeoman, Grunt and Bower
Yeoman offers quick and efficient generation application code and unit tests in AngularJS. Working with these frameworks is easy using NPM.
00:40:43 - 00:49:19
Yeoman Command line Demonstration
Lukas gives a quick demonstration of generating an AngularJS application with Yeoman, Grunt, and Bower. It's assumed Yeoman, Grunt, and Bower have all been installed ahead of time.
Build a Strong AngularJS Foundation
00:49:20 - 00:59:27
The AngularJS Players
A module is the overall container used to group AngularJS code. It consists of compiled services, directives, views controllers, etc.
00:59:28 - 01:04:46
The $compile command in AngularJS compiles DOM elements into a template function that can be used to link $scope and View together. It's through this process that AngularJS creates dynamic DOM elements.
01:04:47 - 01:10:13
$digest and $apply
$digest processes all the watchers of the current scope. $apply is used to notify something has changed outside the AngularJS domain. They are related because $apply forces a $digest cycle.
01:10:14 - 01:17:52
Model View Whatever
AngularJS allows developers to use whatever MV* design pattern helps them code productively. Lukas goes on to give a few recommendations based on his experience.
01:17:53 - 01:22:00
Controller and $scope
$scope is the glue between the Controller and the View. The Controller is responsible for constructing the model on the $scope.
01:22:01 - 01:27:56
View and Templates
The View in AngularJS is the compiled DOM. It's the product of any call to $compile.
01:27:57 - 01:37:22
Models, Services, and Routes
Services carry out comment tasks specific to the web application. They are application singletons and are instantiated lazily. Routes are used for matching or deep-linking URLs to controllers and views.
01:37:23 - 01:49:13
Coding an MVVM application
Lukas walks through the code of a simple AngularJS application using the Model View View Model pattern. The application generates a list of boards using a board service. Lukas adds a delete method in the service to remove a board.
01:49:14 - 01:56:42
URL Routes are defined by a $routeProvider inside a module's config method. They tie URL patterns to methods within a controller.
AngularJS Directive Basics
01:56:43 - 02:04:15
Directives as a DSL
Domain-specific languages, or DSLs allow developers to create a set of semantics that describe the problem area. Directives in AngularJS extend HTML to work inside any domain.
02:04:16 - 02:15:51
Directive Definition Object
Directives consist of three things (or less): The Link, the Controller, and the Directive Definition Object (DDO). The Directive Definition Object (DDO) tells the compiler how a Directive needs to be assembled. Common properties include the link function, controller function, restrict, template, and templateUrl. Lukas walks through the code behind a simple AngularJS Directives which animates HTML elements.
02:15:52 - 02:30:02
The Controller & Link Functions
The Controller is constructed during the pre-linking phase and receives the $scope for the element. The Link function is where the DOM manipulation occurs. Lukas explores the directive code behind the Noterious application.
02:30:03 - 02:39:14
Simple Directive with jQuery
The next code example involves using directives that communicate with jQuery. In this example, Lukas is integrating the jQuery Transit animation library with AngularJS Lukas fields a few questions about the best way to integrate services with directives.
02:39:15 - 02:49:13
Questions: Infinite scrolling, Directives & Routing
Lukas takes an opportunity to answer a few more questions from the audience about infinite scrolling, events inside directives, and routing.
02:49:14 - 02:58:09
Questions: Pagination, Scope & Services
Lukas answers additional questions on pagination, root-scope events, emit vs. broadcast, and integrating multiple REST services.
Server Side Integration with Angular JS
02:58:10 - 03:03:17
REST and $HTTP
The $HTTP service is a core AngularJS services that facilitates remote HTTP communication. It uses the browser's XMLHttpRequest object or JSONP. It includes many shortcut methods including GET, POST, DELETE, etc. The returned value of calling $http is a promise. Using the "then" method, you can register callbacks.
03:03:18 - 03:12:34
RESTful $http Code Example
Lukas walks through a RESTful $http example to explain the service code behind the Noterious application.
03:12:35 - 03:21:10
Real Time Communication with Firebase
Firebase is a backend that allows you to build interactive real-time applications fast without managing servers. Firebase can be integrated with AngularJS using Angular Fire. - http://firebase.com
Testing with AngularJS
03:21:11 - 03:29:05
The Testing Environment
Testing AngularJS code can be done using Karma. Karma is framework agnostic and easy to set up with Yeoman. - http://karma-runner.github.io/ When unit testing, developers isolate pieces of logic using matchers and spies. Matchers are expectations made on a function. A spy is the test double that stubs out a function and tracks calls to it.
03:29:06 - 03:42:43
Implementing Unit Tests
In this code example, Lukas walks through unit testing integration inside the Noterious application. He looks unit tests around logging out, user existence, and loading service data. Next, Lukas test the login form. The controller allows both login and registration options. The unit tests will mock-up this functionality.
03:42:44 - 03:48:41
Questions: TDD & Unit Testing
Some developers favor a TDD approach. Others think TDD can inhibit workflow. Lukas fields some audience questions around testing philosophies.
Advanced AngularJS Directives
03:48:42 - 03:54:33
Revisiting the Angular Process
Lukas maps out the plan for the remainder for the course and shares what experiences he's learned as he's moved deeper into AngularJS and gives some inspirational advice.
03:54:34 - 04:08:13
Isolated Scope is the most important concept to understand when building more advanced directives. Isolated Scope prevents a directive from accidentally modifying the scope of its parent. It's essentially a directives API. Transclusion compiles the contents of an element and makes it available to a directive. Transcluded contents are bound to the parent scope while directive contents are bound to the isolate scope. These two contents are essentially siblings.
04:08:14 - 04:13:34
Coding Advanced Directives: Delete
Using the code in the Angello project folder, Lukas explains the code and functionality behind the delete directive.
04:13:35 - 04:25:46
Coding Advanced Directives: Sort
Using the code in the Angello project folder, Lukas explains the code and functionality behind the sortable directive.
04:25:47 - 04:29:57
Questions: ng-repeat, performance & directives
Lukas answers a questions on using ng-repeat and performance. He also addresses directives firing prior to the template compiling.
04:29:58 - 04:36:33
Coding Advanced Directives: Isolated Scope
Lukas demonstrates a directive that uses an isolated scope. The directive displays a chart based on the data structure passed to it.
04:36:34 - 04:41:33
Coding Advanced Directives: D3
D3 is a powerful data visualization library. Using directives, the D3 layout engine can be bound to AngularJS.
04:41:34 - 04:49:19
Questions: Data Flow & Controllers
Lukas addresses a question about how to handle data across multiple views and multiple controllers. The recommendation is to turn them into directives.
04:49:20 - 04:54:29
The Animation Naming Convention
It's important to learn the naming convention for AngularJS animations. It follows the pattern [class][event][destination] and subsequent animations stack on each other.
04:54:30 - 05:02:13
AngularJS Animation Code Example
Lukas uses a simple pricing table to introduce AngularJS animations. The pricing tables contain a highlight animation that is triggered on hover.
05:02:14 - 05:07:08
CSS Transitions & Animations
CSS Transitions are the fastest way to get animations into AngularJS. As long as the matching CSS class is present in AngularJS, the animation will work. CSS Animations are more extensive that CSS Transitions because they allow you to specify keyframes.
05:07:09 - 05:19:18
05:19:19 - 05:22:59
Questions: Animation & Performance
Lukas wraps up the course fielding a few questions on animation performance.