JavaScript UI Development Using AngularJS

Course Requirements: JavaScript programming knowledge

Course Duration: 1 to 1.5 days, depending on students’ previous experience with JavaScript frameworks

Environment Requirements: Windows/Mac/Unix/Linux Laptop or a Desktop with internet access

Topic Outline

Getting Started

This module will provide the foundation for how to use AngularJS for single page application (SPA) development, including:

  • Model-View-Controller paradigm in JavaScript
  • Definition of Angular Terms
  • Options for bootstrapping an AngularJS application
  • Using the angular-seed project template
  • How to run your AngularJS application
  • How to test your AngularJS application

Exercise #1 – Create sample application project. Walk through the configuration, bootstrapping, running, and testing.


This module will discuss how the ‘business model’ can be represented in AngularJS, including:

  • JSON
  • RESTful API implementation
  • $http / $resource
  • Modules
  • Factory function
  • Services
  • Dependency injection
  • Mocking

Exercise #2 – Create unit-testable Model and Service layers for our sample application.


This module will discuss how the ‘view’ is handled in AngularJS via templating, including:

  • Directives
  • Expressions
  • Two-way data binding
  • Filters

Exercise #3 – Continue to build on the application creating the basic view layer of the sample application.


This module will demonstrate how AngularJS utilizes the ‘controller’ to bridge the gap between Model and View, including:

  • Modules
  • Dependency injection
  • Scope

Exercise #4 – Bring the sample application to life by supplying the ‘control’ layer between our already created Model and View layers.


This module will demonstrate how to create multiple views in the sample application, including:

  • “Layout” templates
  • “Partial” templates
  • Deep linking
  • Browser history
  • $route / $routeProvider

Exercise #5 – Configure multiple views, and utilize routing capabilities, deep-linking, and browser history

Forms & Validation

This module walks through how to create forms and perform validation, including:

  • Simple forms
  • CSS forms
  • Form / Control state
  • Basic validation
  • Custom validation

Exercise #6 – Add basic and custom validation to the sample application.

Customizing AngularJS

This module walks through the creation of custom directives, including:

  • Why would you want to do this?
  • HTML “compiling”
  • Directives
  • Filters

Exercise #7 – Create custom directive(s) and utilize them in the sample application.

Note: All exercises described in this outline build upon each other. At the completion of this course, students will have a working reference application.

Schedule This Course

Contact 877-521-7769 or [email protected]