Angular 1.x Essentials

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.

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.

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.

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.

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.

Yeoman offers quick and efficient generation application code and unit tests in AngularJS. Working with these frameworks is easy using NPM.

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.

A module is the overall container used to group AngularJS code. It consists of compiled services, directives, views controllers, etc.

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.

$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.

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.

$scope is the glue between the Controller and the View. The Controller is responsible for constructing the model on the $scope.

The View in AngularJS is the compiled DOM. It's the product of any call to $compile.

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.

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.

URL Routes are defined by a $routeProvider inside a module's config method. They tie URL patterns to methods within a controller.

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.

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.

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.

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.

Lukas takes an opportunity to answer a few more questions from the audience about infinite scrolling, events inside directives, and routing.

Lukas answers additional questions on pagination, root-scope events, emit vs. broadcast, and integrating multiple REST services.

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.

Lukas walks through a RESTful $http example to explain the service code behind the Noterious application.

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 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.

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.

Some developers favor a TDD approach. Others think TDD can inhibit workflow. Lukas fields some audience questions around testing philosophies.

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.

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.

Using the code in the Angello project folder, Lukas explains the code and functionality behind the delete directive.

Using the code in the Angello project folder, Lukas explains the code and functionality behind the sortable directive.

Lukas answers a questions on using ng-repeat and performance. He also addresses directives firing prior to the template compiling.

Lukas demonstrates a directive that uses an isolated scope. The directive displays a chart based on the data structure passed to it.

D3 is a powerful data visualization library. Using directives, the D3 layout engine can be bound to AngularJS.

Lukas addresses a question about how to handle data across multiple views and multiple controllers. The recommendation is to turn them into directives.

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.

Lukas uses a simple pricing table to introduce AngularJS animations. The pricing tables contain a highlight animation that is triggered on hover.

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.

JavaScript animations allow for the most control over animations. The only dependency is for your animation to call the done() method.

Lukas wraps up the course fielding a few questions on animation performance.