“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.
Lukas Ruebbelke co-authored AngularJS in Action for Manning Publications and runs the Phoenix Web Application User Group.
0:00:00 - 0: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.
- 0:05:39 - 0: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.
- 0:10:36 - 0: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.
- 0:20:00 - 0: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.
- 0:26:27 - 0: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.
- 0:36:25 - 0: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.
- 0:40:43 - 0: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.
- 0:00:00 - 0:05:38 Introduction 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.
Build a Strong AngularJS Foundation
- 0:49:20 - 0: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.
- 0:59:28 - 1:04:46 $compile 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.
- 1:04:47 - 1: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.
- 1:10:14 - 1: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.
- 1:17:53 - 1: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.
- 1:22:01 - 1:27:56 View and Templates The View in AngularJS is the compiled DOM. It's the product of any call to $compile.
- 1:27:57 - 1:37:22 Models, Services, and Routes Services carry out comment tasks specific to the web application. They are application singletons and are instantiated lazily.
- 1:37:23 - 1: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.
- 1:49:14 - 1:56:42 Coding Routes 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
- 1:56:43 - 2: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.
- 2:04:16 - 2:15:51 Directive Definition Object Directives consist of three things (or less): The Link, the Controller, and the Directive Definition Object (DDO).
- 2:15:52 - 2: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.
- 2:30:03 - 2: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
- 2:39:15 - 2: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.
- 2:49:14 - 2: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
- 2:58:10 - 3: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.
- 3:03:18 - 3:12:34 RESTful $http Code Example Lukas walks through a RESTful $http example to explain the service code behind the Noterious application.
3:12:35 - 3: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.
Testing with AngularJS
3:21:11 - 3:29:05
The Testing Environment
Testing AngularJS code can be done using Karma. Karma is framework agnostic and easy to set up with Yeoman.
- 3:29:06 - 3: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.
- 3:42:44 - 3: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.
- 3:21:11 - 3:29:05 The Testing Environment Testing AngularJS code can be done using Karma. Karma is framework agnostic and easy to set up with Yeoman.
Advanced AngularJS Directives
- 3:48:42 - 3: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.
- 3:54:34 - 4:08:13 Isolated Scope 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.
- 4:08:14 - 4:13:34 Coding Advanced Directives: Delete Using the code in the Angello project folder, Lukas explains the code and functionality behind the delete directive.
- 4:13:35 - 4:25:46 Coding Advanced Directives: Sort Using the code in the Angello project folder, Lukas explains the code and functionality behind the sortable directive.
- 4:25:47 - 4: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.
- 4:29:58 - 4: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.
- 4:36:34 - 4:41:33 Coding Advanced Directives: D3 D3 is a powerful data visualization library. Using directives, the D3 layout engine can be bound to AngularJS.
- 4:41:34 - 4: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.
- 4:49:20 - 4: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.
- 4:54:30 - 5: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.
- 5:02:14 - 5: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.
- 5:19:19 - 5:22:59 Questions: Animation & Performance Lukas wraps up the course fielding a few questions on animation performance.