Angular 1.x Essentials
This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
IntroductionLukas 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.
History of AngularJSAngularJS 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.
The AngularJS Elevator PitchAngularJS 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.
Coding Hello AngularJSTo 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.
Questions: Views are HTMLLukas 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.
Yeoman, Grunt and BowerYeoman offers quick and efficient generation application code and unit tests in AngularJS. Working with these frameworks is easy using NPM.
Yeoman Command line DemonstrationLukas 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
The AngularJS PlayersA module is the overall container used to group AngularJS code. It consists of compiled services, directives, views controllers, etc.
$compileThe $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.
$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.
Model View WhateverAngularJS allows developers to use whatever MV* design pattern helps them code productively. Lukas goes on to give a few recommendations based on his experience.
Controller and $scope$scope is the glue between the Controller and the View. The Controller is responsible for constructing the model on the $scope.
View and TemplatesThe View in AngularJS is the compiled DOM. It's the product of any call to $compile.
Models, Services, and RoutesServices 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.
Coding an MVVM applicationLukas 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.
Coding RoutesURL Routes are defined by a $routeProvider inside a module's config method. They tie URL patterns to methods within a controller.
AngularJS Directive Basics
Directives as a DSLDomain-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.
Directive Definition ObjectDirectives 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.
The Controller & Link FunctionsThe 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.
Simple Directive with jQueryThe 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.
Questions: Infinite scrolling, Directives & RoutingLukas takes an opportunity to answer a few more questions from the audience about infinite scrolling, events inside directives, and routing.
Questions: Pagination, Scope & ServicesLukas answers additional questions on pagination, root-scope events, emit vs. broadcast, and integrating multiple REST services.
Server Side Integration with Angular JS
REST and $HTTPThe $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.
RESTful $http Code ExampleLukas walks through a RESTful $http example to explain the service code behind the Noterious application.
Real Time Communication with FirebaseFirebase 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
The Testing EnvironmentTesting AngularJS code can be done using Karma. Karma is framework agnostic and easy to set up with Yeoman. 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.
Implementing Unit TestsIn 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.
Questions: TDD & Unit TestingSome developers favor a TDD approach. Others think TDD can inhibit workflow. Lukas fields some audience questions around testing philosophies.
Advanced AngularJS Directives
Revisiting the Angular ProcessLukas 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.
Isolated ScopeIsolated 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.
Coding Advanced Directives: DeleteUsing the code in the Angello project folder, Lukas explains the code and functionality behind the delete directive.
Coding Advanced Directives: SortUsing the code in the Angello project folder, Lukas explains the code and functionality behind the sortable directive.
Questions: ng-repeat, performance & directivesLukas answers a questions on using ng-repeat and performance. He also addresses directives firing prior to the template compiling.
Coding Advanced Directives: Isolated ScopeLukas demonstrates a directive that uses an isolated scope. The directive displays a chart based on the data structure passed to it.
Coding Advanced Directives: D3D3 is a powerful data visualization library. Using directives, the D3 layout engine can be bound to AngularJS.
Questions: Data Flow & ControllersLukas addresses a question about how to handle data across multiple views and multiple controllers. The recommendation is to turn them into directives.
The Animation Naming ConventionIt's important to learn the naming convention for AngularJS animations. It follows the pattern [class][event][destination] and subsequent animations stack on each other.
AngularJS Animation Code ExampleLukas uses a simple pricing table to introduce AngularJS animations. The pricing tables contain a highlight animation that is triggered on hover.
CSS Transitions & AnimationsCSS 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.
Questions: Animation & PerformanceLukas wraps up the course fielding a few questions on animation performance.