AngularJS JumpStart with Dan Wahlin

Discover data binding in AngularJS and compare control-oriented versus data-oriented programming. Bind a text box to a property like name to auto update the UI and reduce code.

Explore how AngularJS directives and data binding expressions drive dynamic views, covering ng-hide, ng-show, ng-repeat, ng-view, ng-model, and ng-app as building blocks for DOM manipulation.

Explore how directives like ng-app, ng-model, ng-hide, ng-show, ng-init, ng-click, and ng-bind drive data binding and expressions in an AngularJS app, highlighting a data-oriented approach over views.

Explore essential AngularJS directives such as ng cloak, ng switch, and ng class to manage data binding, conditional display, and dynamic styling, while preventing flicker and ensuring cross-browser compatibility.

Learn how to iterate data in AngularJS using ng-repeat to render array items in a list, with ng-init creating a names array and binding each name to a list item.

Learn to use ng-repeat in action to iterate over a collection and render name and city data from objects with binding expressions.

Explore how AngularJS built-in filters filter, format, and sort data via pipes in directives and data bindings, with currency, date, case, json, limit, and orderBy examples.

Explore AngularJS filters to format data, currency, and dates using pipes. Learn to customize formats with code, apply uppercase or lowercase, and manage order totals, names, and cities.

Learn to limit, sort, and filter data in AngularJS using limitTo and orderBy, plus filtering with ng-model and a custom CustomerFilter by the name property.

Click column headers to dynamically sort data by name, city, order total, or joined using ng-click, sortBy, reverse, and the orderBy filter to toggle ascending or descending.

Explore how views drive UI functionality in AngularJS through directives that manipulate the DOM, handle events, iterate data, and bind models. Use filters to sort and format data, reducing code.

Explore AngularJS architecture patterns, focusing on mvc and mvvm, and how Angular's controller and scope implement these patterns through data binding between model and view.

Controllers act as the brain for the view in AngularJS, with scope as the glue that exposes data and methods for binding and interaction, and a note on module changes.

Create an AngularJS controller to manage customers on the scope, move data from the view into the controller, and enable sorting by using sortBy, reverse, and the orderBy filter.

Learn how to attach a controller to a view with the ng-controller directive, and explore the controller as syntax for aliasing the scope and managing nested controllers.

Hook the view to the controller by adding ng-controller with the controller name, enabling data access, binding, filtering, and sorting of customers within the scope.

Refactor from scope to controller as syntax by replacing $scope with this and updating references, then compare using as syntax versus native scope, including ng repeat, especially for nested controllers.

Learn how to group controllers, routes, and other components into AngularJS modules to avoid global scope conflicts, inject dependencies, and integrate third-party modules using angular.module and square bracket syntax.

Create a custom AngularJS module named customersApp, hook it to the ng app, and load it via app.js, preparing to add a controller in the next section.

Define a module and attach controllers to it in ways, avoiding globals to leverage AngularJS machinery. Use array annotation or the dollar inject approach to protect dependency injection during minification.

Explore three options to add a controller to an AngularJS module, shifting from a global app variable to module-scoped patterns using angular.module and anonymous functions.

Learn AngularJS dependency injection techniques to survive minification. Compare the inline array approach and the controller.inject method, and see how wrapping and self-invoking keeps the global scope clean.

Explore how AngularJS uses modules, controllers, and scope to enable data binding between views and business logic, and how MVC and MVVM patterns shape the architecture.

Map routes to views and controllers in an AngularJS app using the ngRoute module and $routeProvider. See how navigation loads templates like customers.html with controllers and lets history manage automatically.

Learn to add routing in an AngularJS app by referencing the ngRoute module and configuring routes via the route provider, including angular_route.js from angularjs.org and declaring ngRoute as a dependency.

Copy the angular route script from code.angularjs.org (development version) into a new angular_route.js file. Reference it under scripts and add ngRoute as a dependency in your app.js to enable routing.

Configure routes in AngularJS by injecting routeProvider in the module's config after loading ngRoute, map paths to views and controllers, and use routeParams to access parameters like customerId.

Use the route provider to map routes to controllers and templates. Create a views folder with customer.html and implement an otherwise redirect to the root path.

Use the ng-view directive to mark where a loaded view appears in the shell page of a single-page AngularJS app, with options like div, data-ng-view, or an element.

Add a div as the ng-view placeholder in the shell page to enable routing. When the customers controller loads and customers.html renders, the view displays inside the shell's ng-view area.

Add another route, controller, and view for orders; read customer id via routeParams; bind orders to scope; enable navigation with a #orders link in the shell.

Learn to configure routes with the route provider and ngRoute, link views to controllers, and use route parameters to pass data between controllers in AngularJS.

Learn how Angular factories and services act as singletons to centralize ajax calls and shared data, using built-in options like $http and creating your own via a module.

Create and register a factory with angular.module().factory, returning a custom singleton object to share code and data across controllers. Minification-safe using explicit dependencies with $inject.

Refactor hard-coded customer data into a reusable AngularJS factory, exposing getCustomers and registering it with the app module to streamline data access.

Inject a factory into a controller to fetch customers and their orders, using init and route parameters, and bind the data to the view.

Learn how an AngularJS service acts as a singleton object, using the this keyword, how it differs from a factory, and how to inject it into controllers while considering minification.

Learn how to refactor an AngularJS factory into a service by creating customerService.js, renaming to customersService, and replacing factory usage in the controller.

Explore how to define and inject simple application values with AngularJS's value and constant, compare where they can be injected, and learn when constants can be injected into config.

Define and expose global app settings in angularjs using value and constant, centralizing title and version for access across controllers and views.

Explore making Ajax calls in AngularJS using the $http service from a factory or service, returning a promise and handling success or error callbacks in the controller.

Create a restful service using node and express, expose a /customers API on port 8080, load hardcoded data, and test locally.

Use the Angular $http service in a customer factory to perform AJAX requests to a RESTful service, returning promises for the controller to handle success and error when fetching customers.

Wire promises from the factory into success and error callbacks in AngularJS controllers. Convert getCustomers and getCustomer to asynchronous calls via restful service and HTTP service, binding results to scope.

Learn to use AngularJS's $log service to capture and display server errors, log data and status, set a breakpoint, and substitute for console.log during testing.

Learn how factories, services, values, and constants work in AngularJS applications, how modules organize these components, and singletons store reusable tasks that can be injected into controllers or other services.

Enhance the AngularJS UI by integrating Bootstrap across the shell and orders view, adding a header with nav, and leveraging controllers, views, routes, and filters for a polished interface.

Add Bootstrap via a CDN, apply Bootstrap nav and table classes, and use ng-class to color orders by total. Implement delete customer with a controller and factory, with server-side Json.

Explore integrating animations with AngularJS directives using the ngAnimate module to create enter, leave, and move effects for ngView, ngRepeat, ngShow, and ngHide, via css animations.

Explore css animations in AngularJS with ngAnimation, including transitions, keyframes, and slide-in view effects, plus ready-made examples from animate.css and live plunker demos.

Learn to enable animations in angularjs by loading the ngAnimate script after angular.js, registering ngAnimate as a module dependency, and linking css with directives to activate animation features.

Add the ngAnimate module by including the angular-animate script from code.angularjs.org, then wire the ngAnimate module in AppJS and the shell to enable animations in AngularJS directives.

Define animations in css using transitions or keyframes, compare browser support, and apply on angular directives with ng-enter and ng-leave, including slide-in and fade-out effects.

Create a dedicated animations stylesheet and reference it in your index, then implement ng-enter, ng-leave, and move animations with active states to slide, fade, and reorder list items.

Learn how to attach CSS animation classes to AngularJS directives like ng-class, ng-view, ng-repeat, ng-show, and ng-hide to create smooth transitions and fade in/out during filtering.

Hook directives to animations by applying slide and repeat CSS classes to elements, enabling smooth slide-in transitions and fade effects during filtering and data changes.

Enable animations in AngularJS by loading the angular animate script and ngAnimate, leveraging directives like ng-view and ng-show to create smooth transitions and a polished UI with Bootstrap styling.

Explore the role of directives in AngularJS, learn core concepts like the directive definition object and compile provider, and build a simple hello world directive to start.

Discover how AngularJS directives attach behavior to DOM elements, enabling DOM manipulation, data binding, events, and styling. Learn the process to create directives, and review built-ins while planning custom ones.

Create a simple hello world directive in AngularJS by defining a module and directive, and returning a directive definition object with a template that outputs hello world.

Explore three directive categories in AngularJS—dom driven, data driven, and behavior driven—and learn the four directive types: attribute, element, css class, and comment based.

Explore the core building blocks of Angular directives, including the directive definition object and the compile provider. Learn how templates, scope, isolate scope, controllers, and link functions render dynamic HTML.

Explore how directives—built-in, third-party, and custom—manipulate the dom, render html, and handle events, using the compile provider and directive definition object to define templates and controllers.

Explore the difference between shared and isolate scope in AngularJS directives, and learn how act, equals, and ampersand local scope properties enable reusable, concise directive design.

Explore the difference between shared and isolate scope in AngularJS and how to use local scope properties to pass data and communicate with directives.

Compare shared scope and isolate scope in AngularJS directives, examining inherited data bindings versus a truly isolated scope, and learn how to expose data from the outside world with bindings.

Learn how to punch a hole through an AngularJS directive's isolated scope using the at binding to pass a string value in a one-way binding from the parent scope.

Demonstrate passing values into an isolate scope directive using the @ local scope property, including string binding, literal values, and object handling through data binding.

Explore the equals local scope property in AngularJS, enabling two way binding of strings or objects between a directive and the outer scope.

Explore the equals local scope property to enable two-way data binding in a directive by binding a data source object with name and street.

Explore the ampersand local scope property in AngularJS directives, enabling the parent scope to pass a callback function into an isolated scope and invoke it from the directive.

Learn to use the ampersand local scope property to pass a function into an AngularJS directive, invoke it on events, and wire a callback to notify the outer scope.

Explore the link function for dom manipulation in AngularJS directives, focusing on dom driven techniques, jq lite, and wiring the directive definition object to scope, element, and attributes.

Explore jq lite, a subset of jQuery in AngularJS, and the link function in a directive. Learn to handle click and mouse events and update HTML or CSS.

Discover how to use AngularJS directive isolate scope with at, equals, and ampersand bindings to pass values, objects, and functions between a directive and its outer scope.