Angular 4 Training

How To Take This Class

Live Instructor-Led Online Class

Cost: $2,250.00

  • Open enrollment class for individuals
  • Live class with an instructor
  • Free class retakes forever!
  • Six months of instructor email support
  • Hands-on exercises and student labs
  • Classes never cancelled due to low enrollment
  • Money-back guarantee

Onsite or Offsite Group Training

Cost: Based on number of students

  • For groups as small as 3 people
  • Class Held at our location or yours
  • Hands-on exercises and student labs
  • Customization at no extra charge
  • Six months of instructor email support
  • All-inclusive pricing
  • Money-back guarantee
Request Group Pricing Proposal

Course Duration

5 Days

What Students Receive

Each student will receive:
  • A printed courseware manual with samples and hands-on exercises for use during and after class.
  • Sample course files and solutions.
  • A PC headset for communicating with your instructor and fellow students during the Angular 4 training class.
  • A course completion certificate upon successful completion of the Angular 4 training course.

Course Description

In this comprehensive Angular 4 Training course, students will obtain the foundation to get up and running with the latest version of Angular. Students will begin by creating their first apps, using the built-in components of Angular and then begin creating their own components. Next, the course moves onto intermediate concepts like using forms, APIs, routing to different pages and using Dependency Injection to organize code. Building on those concepts, the course tackles more advanced concepts such as data architectures, managing state in client/server applications using RxJS Observables and Redux and building advanced components. In addition, students will learn how to write test for their applications and how to upgrade Angular 1 apps to Angular 4+. Finally, students will see how to write native mobile apps in Angular using NativeScript.

Course Objectives

After successful completion of this course, students will be able to:
  • Use Built-in Directives
  • Create Forms in Angular
  • Understand and use HTTP and APIs
  • Understand and use Routing
  • Understand and use Dependency Injection
  • Understand and use Data Architectures in Angular with Observables and RxJS
  • Understand and use Data Architecture with Redux
  • Create Advanced Components
  • Test an Angular application
  • Convert an Angular 1 app to Angular 4

Course Audience

This course is designed for students who either have no previous experience with Angular or students who have some experience using a previous version of Angular and want to get up to speed on the latest version of Angular, Angular 4.

Course Prerequisites

Students should have a familiarity and comfort level with basic application development concepts.

Course Syllabus

  1. Writing Your First Angular Web Application
    • Creating a simple Reddit Clone
    • Node.js and npm
    • TypeScript
    • Browser
    • Special instruction for Windows users
    • Angular CLI
    • Example Project
    • Writing Application Code
    • Running the application
    • Making a Component
    • Importing Dependencies
    • Component Decorators
    • Adding a template with templateUrl
    • Adding a template
    • Adding CSS Styles with styleUrls
    • Loading Our Component
    • Adding Data to the Component
    • Working With Arrays
    • Using the User Item Component
    • Rendering the UserItemComponent
    • Accepting Inputs
    • Passing an Input value
    • Bootstrapping Crash Course
    • declarations
    • imports
    • providers
    • bootstrap
    • Expanding our Application
    • Adding CSS
    • The Application Component
    • Adding Interaction
    • Adding the Article Component
    • Rendering Multiple Rows
    • Creating an Article class
    • Storing Multiple Articles
    • Configuring the ArticleComponent with inputs
    • Rendering a List of Articles
    • Adding New Articles
    • Finishing Touches
    • Displaying the Article Domain
    • Re-sorting Based on Score
    • Deployment
    • Building Our App for Production
    • Uploading to a Server
  2. TypeScript
    • Angular 4 is built in TypeScript
    • What do we get with TypeScript?
    • Types
    • Trying it out with a REPL
    • Built-in types
    • Classes
    • Properties
    • Methods
    • Constructors
    • Inheritance
    • Utilities
    • Fat Arrow Functions
    • Template Strings
  3. How Angular Works
    • Application
    • The Navigation Component
    • The Breadcrumbs Component
    • The Product List Component
    • Product Model
    • Components
    • Component Decorator
    • Component selector
    • Component template
    • Adding A Product
    • Viewing the Product with Template Binding
    • Adding More Products
    • Selecting a Product
    • Listing products using <products-list>
    • The ProductsListComponent
    • Configuring the ProductsListComponent @Component Options
    • Component inputs
    • Component outputs
    • Emitting Custom Events
    • Writing the ProductsListComponent Controller Class
    • Writing the ProductsListComponent View Template
    • The Full ProductsListComponent Component
    • The ProductRowComponent Component
    • ProductRowComponent Configuration
    • ProductRowComponent template
    • The ProductImageComponent Component
    • The PriceDisplayComponent Component
    • The ProductDepartmentComponent
    • Booting the app
    • Deploying the App
    • A Word on Data Architecture
  4. Built-in Directives
    • NgIf
    • NgSwitch
    • NgStyle
    • NgClass
    • NgFor
    • Getting an index
    • NgNonBindable
  5. Forms in Angular
    • Forms are Crucial, Forms are Complex
    • FormControls and FormGroups
    • FormControl
    • FormGroup
    • Our First Form
    • Loading the FormsModule
    • Simple SKU Form: @Component Decorator
    • Simple SKU Form: template
    • Simple SKU Form: Component Definition Class
    • Using FormBuilder
    • Reactive Forms with FormBuilder
    • Using FormBuilder
    • Using myForm in the view
    • Adding Validations
    • Custom Validations
    • Watching For Changes
  6. Dependency Injection
    • Injections Example
    • Dependency Injection Parts
    • Playing with an Injector
    • Providing Dependencies with NgModule
    • Providers are the Key
    • Providers
    • Using a Class
    • Using a Factory
    • Dependency Injection in Apps
  7. HTTP
    • Using @angular/http
    • import from @angular/http
    • A Basic Request
    • Building the SimpleHttpComponent Component Definition
    • Building the SimpleHttpComponent template
    • Building the SimpleHttpComponent Controller
    • Full SimpleHttpComponent
    • Writing a YouTubeSearchComponent
    • Writing a SearchResult
    • Writing the YouTubeSearchService
    • Writing the SearchBoxComponent
    • Writing SearchResultComponent
    • Writing YouTubeSearchComponent
    • @angular/http API
    • Making a POST request
    • PUT / PATCH / DELETE / HEAD
    • RequestOptions
  8. Routing
    • Why Do We Need Routing?
    • How client-side routing works
    • The beginning: using anchor tags
    • The evolution: HTML5 client-side routing
    • Writing our first routes
    • Components of Angular routing
    • Imports
    • Routes
    • Installing our Routes
    • RouterOutlet using <router-outlet>
    • RouterLink using [routerLink]
    • Creating the Components 226
    • HomeComponent
    • AboutComponent
    • ContactComponent
    • Application Component
    • Configuring the Routes
    • Routing Strategies
    • Running the application
    • Route Parameters
    • ActivatedRoute
    • Music Search App
    • First Steps
    • The SpotifyService
    • The SearchComponent
    • Trying the search
    • TrackComponent
    • Wrapping up music search
    • Router Hooks
    • AuthService
    • LoginComponent
    • ProtectedComponent and Route Guards
    • Nested Routes
    • Configuring Routes
    • ProductsModule
  9. Data Architecture in Angular 4
    • An Overview of Data Architecture
    • Data Architecture in Angular 4
  10. Data Architecture with Observables - Part 1: Services
    • Observables and RxJS
    • Some RxJS Knowledge Required
    • Learning Reactive Programming and RxJS
    • Chat App Overview
    • Components
    • Models
    • Services
    • Implementing the Models
    • User
    • Thread
    • Message
    • Implementing UsersService
    • currentUser stream
    • Setting a new user
    • UsersService.ts
    • The MessagesService
    • the newMessages stream
    • the messages stream
    • The Operation Stream Pattern
    • Sharing the Stream
    • Adding Messages to the messages Stream
    • Our completed MessagesService
    • Trying out MessagesService
    • The ThreadsService
    • A map of the current set of Threads (in threads)
    • A chronological list of Threads, newest-first (in orderedthreads)
    • The currently selected Thread (in currentThread)
    • The list of Messages for the currently selected Thread (in currentThreadMessages)
    • Our Completed ThreadsService
    • Data Model Summary
  11. Data Architecture with Observables - Part 2: View Components
    • Building Our Views: The AppComponent Top-Level Component
    • The ChatThreadsComponent
    • ChatThreadsComponent template
    • The Single ChatThreadComponent
    • ChatThreadComponent Controller and ngOnInit
    • ChatThreadComponent template
    • The ChatWindowComponent
    • The ChatMessageComponent
    • The ChatMessageComponent template
    • The ChatNavBarComponent
    • The ChatNavBarComponent @Component
    • The ChatNavBarComponent template
  12. Introduction to Redux with TypeScript
    • Redux
    • Redux: Key Ideas
    • Core Redux Ideas
    • What is a reducer?
    • Defining Action and Reducer Interfaces
    • Creating Our First Reducer
    • Running Our First Reducer
    • Adjusting the Counter With actions
    • Reducer switch
    • Action "Arguments"
    • Storing Our State
    • Using the Store
    • Being Notified with subscribe
    • The Core of Redux
    • A Messaging App
    • Messaging App state
    • Messaging App actions
    • Messaging App reducer
    • Trying Out Our Actions
    • Action Creators
    • Using Real Redux
    • Using Redux in Angular
    • Planning Our App
    • Setting Up Redux
    • Defining the Application State
    • Defining the Reducers
    • Defining Action Creators
    • Creating the Store
    • Providing the Store
    • Bootstrapping the App
    • The AppComponent
    • imports
    • The template
    • The constructor
  13. Intermediate Redux in Angular
    • Components
    • Models
    • Reducers
    • Implementing the Models
    • User
    • Thread
    • Message
    • App State
    • A Word on Code Layout
    • The Root Reducer
    • The UsersState
    • The ThreadsState
    • Visualizing Our AppState
    • Building the Reducers (and Action Creators)
    • Set Current User Action Creators
    • UsersReducer - Set Current User
    • Thread and Messages Overview
    • Adding a New Thread Action Creators
    • Adding a New Thread Reducer
    • Adding New Messages Action Creators
    • Adding A New Message Reducer
    • Selecting A Thread Action Creators
    • Selecting A Thread Reducer
    • Building the Angular Chat App
    • The top-level AppComponent
    • The ChatPage
    • Container vs. Presentational Components
    • Building the ChatNavBarComponent
    • Redux Selectors
    • Threads Selectors
    • Unread Messages Count Selector
    • Building the ChatThreadsComponent
    • ChatThreadsComponent Controller
    • ChatThreadsComponent template
    • The Single ChatThreadComponent
    • ChatThreadComponent template
    • Building the ChatWindowComponent
    • The ChatMessageComponent
    • Setting incoming
    • The ChatMessageComponent template
  14. Advanced Components
    • Styling
    • View (Style) Encapsulation
    • Shadow DOM Encapsulation
    • No Encapsulation
    • Referencing and Modifying Host Elements
    • Using ElementRef
    • Binding to the host
    • Adding a Button using exportAs
    • Creating a Message Pane with Content Projection
    • Changing the Host's CSS
    • Using ng-content
    • Querying Neighbor Directives - Writing Tabs
    • ContentTabComponent
    • ContentTabsetComponent Component
    • Using the ContentTabsetComponent
    • Lifecycle Hooks
    • OnInit and OnDestroy
    • OnChanges
    • DoCheck
    • AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked
    • Advanced Templates
    • Rewriting ngIf - ngBookIf
    • Rewriting ngFor - NgBookFor
    • Change Detection
    • Customizing Change Detection
    • Zones
    • Observables and OnPush
  15. Testing
    • End-to-end vs. Unit Testing
    • Testing Tools
    • Jasmine
    • Karma
    • Writing Unit Tests
    • Angular Unit testing framework
    • Setting Up Testing
    • Testing Services and HTTP
    • HTTP Considerations
    • Stubs
    • Mocks
    • Http MockBackend
    • TestBed.configureTestingModule and Providers
    • Testing getTrack
    • Testing Routing to Components
    • Creating a Router for Testing
    • Mocking dependencies
    • Spies
    • Back to Testing Code
    • fakeAsync and advance
    • inject
    • Testing ArtistComponent Initialization
    • Testing ArtistComponent Methods
    • Testing ArtistComponent DOM Template Values
    • Testing Forms
    • Creating a ConsoleSpy
    • Installing the ConsoleSpy
    • Configuring the Testing Module
    • Testing The Form
    • Refactoring Our Form Test
    • Testing HTTP requests
    • Testing a POST
    • Testing DELETE
    • Testing HTTP Headers
    • Testing YouTubeSearchService
  16. Converting an AngularJS 1.x App to Angular 4
    • Mapping AngularJS 1 to Angular 4
    • Requirements for Interoperability
    • Building A Hybrid
    • Hybrid Project Structure
    • Bootstrapping our Hybrid App
    • Typing Files
    • Upgrading
  17. NativeScript: Mobile Applications for the Angular Developer
    • What is NativeScript?
    • Where NativeScript Differs from Other Popular Frameworks
    • What are the System and Development Requirements for NativeScript?
    • Creating your First Mobile Application with NativeScript and Angular
    • Adding Build Platforms for Cross Platform Deployment
    • Building and Testing for Android and iOS
    • Installing JavaScript, Android, and iOS Plugins and Packages
    • Understanding the Web to NativeScript UI and UX Differences
    • Planning the NativeScript Page Layout
    • Adding UI Components to the Page
    • Styling Components with CSS
    • Developing a Geolocation Based Photo Application
    • Creating a Fresh NativeScript Project
    • Creating a Multiple Page Master-Detail Interface
    • Creating a Flickr Service for Obtaining Photos and Data
    • Creating a Service for Calculating Device Location and Distance
    • Including Mapbox Functionality in the NativeScript Application
    • Implementing the First Page of the Geolocation Application
    • Implementing the Second Page of the Geolocation Application
    • NativeScript for Angular Developers