Developing Web Applications Using AngularJS

Register this course for $790
USA & Canada: +1 240-200-6131
International Call: +1 240-391-8360
9am-6pm DC time or 1pm-10pm GMT

Course Code: hsts-c21

Course Description

The AngularJS 1 course provides a thorough introduction to the AngularJS JavaScript Framework. Attendees will learn the fundamental skills necessary to build Web Applications using AngularJS and the MV* (Model View Whatever) design pattern. Topics include creating controllers, using scope to manage data, designing views/templates, routing, data binding and filters, applying directives, as well as form integration and validation. Students will also use AngularJS' built-in services to communicate with RESTful web services and provide CRUD database operations. Students will learn how to use CSS animations and Bootstrap to enhance the UI as well as learn to employ third-party components such as modal dialogs (“modals”), progress bars and navbars. In addition, students will learn to extend AngularJS with custom directives, services and filters.

The AngularJS 2 course provides a thorough introduction to the Angular JavaScript Framework including coverage of versions 2 through 4. Attendees will learn the fundamental skills necessary to build Web Applications using Angular and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. Students will also use the Angular services to communicate with RESTful web services and provide CRUD database operations.

Comprehensive hands-on exercises are integrated throughout to reinforce learning and develop real competency.

We offer both AngularJS 1 and AngularJS 2 courses. See the course outline section for details.

In AngularJS 1 course, you will learn:

  • Referencing AngularJS in a Web page
  • Building Single Page Applications using AngularJS
  • Integrating forms with AngularJS
  • Organizing code using modules
  • Injecting dependencies into a Module
  • Configuring routes with ngRoute and $routeProvider
  • Refactoring reusable code into factories and services
  • Defining business logic using controllers
  • Performing Ajax requests with the $http and $resource services
  • Communicating with RESTful web services
  • Reading data from remote servers using $http
  • Providing new behaviors to HTML using AngularJS directives
  • Enhancing the UI using animations and Bootstrap
  • Extending AngularJS with custom directives, filters and services

In AngularJS 2 course, you will learn:

  • Using TypeScript and ECMAScript 6 to create components
  • Using directives and components to define UI elements, routes and screens
  • Working effectively with component lifecycle events
  • Injecting dependencies to lessen coupling and increase testability
  • Unit testing Angular applications with Karma and Jasmine
  • Using property binding to link DOM elements with model data
  • Building Single Page Applications using Angular
  • Integrating forms with Angular
  • Organizing code using modules
  • Communicating with RESTful Web services

Course Prerequisites

Knowledge of HTML, CSS and JavaScript equivalent to attending the HTML5 & HTML Intro with CSS or Responsive Site Design with Bootstrap and jQuery Programming for Beginners or JavaScript and jQuery Introduction Programming classes. Knowledge of jQuery is helpful, but not required.

Related Training and Certification Courses:

Intro to Dreamweaver with Website Development Training
SQL Programming and DB Management
Object Oriented Programming with UML
Node.JS Coding with Hands-on Training
Cross-platform Native App Development Using HTML5, CSS3 and JavaScript
PHP Programming Language
Build Dynamic Applications Using PHP & MySQL
Introduction to Web Application Development Using JEE, Frameworks, Web Services and AJAX
Introduction to Python Programming

Class Info

Highlights

  • 10 sessions each 3 hours with hands-on training led by experienced instructors
  • Digital courseware and online course tracking
  • Final course project delivery
  • Certificate of Completion for each course
  • Session-based assignment

Enrollment Fee

In-person in DC or Online: $790 per course

Course Session Dates

Our courses are offered all year around. Upon registration we enroll you to the earliest available class but you can reschedule it free of charge.

Location

  • In Person at our VA office
  • Private custom training on site or at your location
  • Project based training cn site or at your location

Time

  • In Person: 9AM-3:00PM (1 hour Lunch)
  • Private custom & project based training: your preference

Software Versions

Our classes are taught on the most current version of software whenever possible. To request a specific version, please Contact Us or call us at 240-200-6131


Course Outline

1- Overview of AngularJS

  • Features and Benefits of AngularJS
  • MV* Design Pattern Overview
  • Downloading AngularJS
  • Referencing AngularJS Using a CDN
  • The AngularJS Digest Cycle
    • $watch
    • $apply
  • Overview of jqLite
  • Architecting an Application with AngularJS

2- Creating Single Page Applications (SPAs)

  • Single Page Application Model
  • AngularJS Programming Model for SPAs
  • Building the Shell HTML
    • Designing a Common UI
    • Defining Navigation
  • Managing Feature Containers
    • Designing Partial Views
    • Organizing Business Logic in Controllers
    • Programming the Data Model
  • Marrying Views, Controllers and URLs

3- Building Modules in AngularJS

  • Overview of Modules
  • Organizing Code Using Modules
  • Defining an Application with angular.module()
  • Bootstrapping an Application with ngApp
  • Managing Dependencies with Dependency Injection
  • Dealing with Minification Issues

4- Creating Controllers

  • Defining a Controller with module.controller()
  • Creating Properties and Methods in a Controller
  • Using the ngController Directive
  • Defining $scope in a Controller
  • Avoiding Scope Conflicts Using "Controller As"

5- Using Built-In AngularJS Directives

  • AngularJS Directive Overview
  • Behavior-Driven Directives
    • ngChange
    • ngClick
    • ngSubmit
  • DOM-Driven Directives
    • ngShow/ngHide
    • ngIf/ngSwitch
    • ngSrc/ngHref
  • Data-Driven Directives
    • ngBind
    • ngInit
    • ngModel
    • ngClass/ngStyle

6- Using AngularJS Services

  • Built-In Services
  • Comparing Factories and Services
  • Using the $http and $resource Services
    • Connecting to RESTful Web Services
    • Performing CRUD Operations
    • Retrieving JSON data Asynchronously
  • Logging Errors with $log
  • Using the $location and $window Services
  • Deferred and Promise API

7- AngularJS Routing

  • Overview of Routing
  • Configuring Routes with $routeProvider
  • Defining Route Parameters
  • Designing a Shell Page with ngView
  • Defining Templates
  • Mapping Route URLs to Templates

8- Data Binding

  • Overview of Data Binding
  • The ngModel Directive
  • Displaying Sets of Data with ngRepeat
  • Applying Filters
    • currency
    • date
    • orderby
    • filter
  • AngularJS Expressions

9- Integrating Forms in AngularJS

  • Using the Form Controller
  • Binding to Input Fields
  • Toggling Control State Using Directives and Expressions
    • ngChecked
    • ngShow
    • ngDisabled

10- Validating Forms in AngularJS

  • Setting HTML5 Validation Attributes
    • required
    • pattern
    • min/max
  • Using AngularJS Properties in Expressions
    • $error
    • $dirty
    • $invalid
  • Styling the Form with Angular CSS classes
    • ng-valid
    • ng-invalid
    • ng-dirty
    • ng-pristine

The following topics of AngularJS 1 may be included at the discretion of your instructor.


11- Extending AngularJS

  • Defining Custom Directives
    • Shared and Isolate Scope
    • Defining One- and Two-Way Data Bindings
    • Local Scope Properties (@, = and &)
  • Defining Custom Services
    • Refactoring Code into a Service
    • Defining Properties and Methods
    • Returning a Service
  • Defining Custom Factories
    • Refactoring Code into a Factory
    • Defining Properties and Methods
    • Returning a Factory Object
  • Defining Constants and Values
  • Defining Custom Filters

12- Animating AngularJS Applications

  • CSS3 Animations
    • CSS3 Transitions
    • CSS3 Animations
  • Using the $animate Service
  • Adding Animations on Enter, Leave and Move Events
  • Injecting the ngAnimate Module

13- Integrating Third Party Frameworks

  • Creating a Responsive UI with the Bootstrap Grid System
  • Applying Bootstrap CSS Classes
  • Using Bootstrap Components
    • Progress bar
    • Modal
    • Tabs
    • Navbar
  • Using AngularStrap and AngularUI Components


Below is for Angular2 JS course outline which introduces Angular versions 2 through 4.

1- Overview of Angular and the MVVM Design Pattern

  • Features and Benefits of Angular
  • Angular Architecture
  • MVVM Design Pattern Overview
  • Downloading Angular
  • Referencing Angular Using a CDN
  • Choosing an IDE
  • Creating a Simple Application with Angular
  • Angular CLI

2- Working with TypeScript

  • TypeScript vs ECMAScript 6
  • TypeScript Basics
  • Types
    • Working with Built-In Types
    • Custom Types
  • Utilities
    • Using Fat Arrow Syntax
    • Template Strings
  • Setting Up and Using Node.js
  • Transpiling TypeScript into JavaScript
  • TypeScript Compiler Configuration
  • TypeScript Declaration Files
  • Installing Typings Files

3- Angular Modules

  • Using Modules to Create an Application
  • Default Modules
  • Exporting Classes, Functions and Values
  • Limiting Scope
  • Grouping Modules
  • Specifying Module Dependencies
  • Organizing Code Files
  • Module Testing
  • Best Practices

4- Angular Components

  • Component LifeCycle
  • Component Templates to Define Views
  • Using Decorators to Define MetaData
  • Component Styles
  • Encapsulation
    • ShadowDOM Style Encapsulation
    • View Style Encapsulation
    • No Encapsulation
  • ElementRef and Popups
  • ExportAs
  • Lifecycle Hooks
    • OnInit, OnDestroy, OnChanges, DoCheck
    • AfterContentInit, AfterViewInit
    • AfterContentChecked, AfterViewChecked
  • Change Detection
  • Basic Data Binding
    • One-Way Binding
    • Two-Way Binding
  • Directives

5- Using Built-In Directives and Introduction to Pipes

  • Overview of Angular Built-In Directives
    • NgIf, NgFor, NgClass, NgStyle, NgSwitch, etc.
  • Building Custom Directives
  • Overview of Angular Built-In Filters
    • Currency, Date, Json, LimitTo, Number, etc.
  • Building Custom Filters

6- Some additional Built In Pipes

  • Built-In Pipes
  • Custom Pipes
  • Adding and Using Parameters
  • Using a Pipe in a Component
  • Data Pipes

7- Defining and Consuming Services

  • Dependency Injection
  • Registering Providers with the Injector
  • Creating a Service
  • Consuming a Service
  • Mocking a Service
  • Working with Async Services and Promises

8- The Angular Animation System

  • The Web Animations API
  • States and Transitions
  • Entering and Leaving
  • Animating Properties
  • KeyFrames
  • Parallel Animation Groups

9- The HTTP Library

  • Callbacks, Promises and Observables
  • Importing the HTTP Module
  • Creating Requests
  • Processing Responses
  • Web API
  • Interacting with a RESTFul Service
    • POST Requests
    • DELETE Requests
    • PUT Requests
    • HEAD Requests

10- Angular Routing and Navigation

  • Overview of Routing
  • Client-Side vs Server-Side Routing
  • Working with the Component Router
  • Adding Router Imports
  • Performing Router Configuration
  • Using Router State
  • Redirects
  • Location Strategies
  • Routing Parameters
  • Router Lifecycle Events
  • Nesting Routes

The following topics of AngularJS 2 may be included at the discretion of your instructor.


11- Data Binding and Programming Models

  • Interpolation
  • One-Way (Unidirectional) Binding
  • Two-Way Binding
  • Event Binding
  • Observables vs. Promises
  • Working with Observables
  • Dealing with Out of Order Responses
  • Altering Observables with Reactive Extensions (Rx)
  • Reactive Programming Model
  • Organizing Code Using Domain Models

12- Building and Deploying Applications

  • Developing a Deployment Strategy
  • Picking a Package Manager
  • Using a Module Loader
  • Using Gulp for More Complex Builds
    • Adding Gulp to a Project
  • Managing Dependencies
  • Using Sourcemaps
  • Including Static Libraries and Files
  • Transpiling
  • Linting
  • Handling Static Files
  • Dealing with Internationalization Issues

13- Forms

  • Template Driven Forms
    • Input and Output Properies
    • Property and Event Binding
    • Interpolation
  • Form Components
  • Using Control and ControlGroup
  • Using the FormBuilder Factory
  • Form State
  • Form Validation
  • NgModel and NgForm Directives
  • Model Driven Forms
  • FormGroup and FormControl Classes

14- Creating Single Page Applications (SPAs)

  • SPA Characteristics and Advantages
  • SPA Potential Drawbacks
  • Structuring Templates in an SPA
  • Security Challenges and Approaches for Angular SPAs
  • When Not to Use SPA Architecture
Register this course for $790