WEB-204
Angular: Practical Front End Application Development
Duration: 5
Day
s
Skill Level: Intermediate
Course Overview
Angular is one of the fastest and most popular open-source UI frameworks today. Knowing how to use it is essential for devs. This course presents a battle-tested, practical approach to building modern frontend applications with Angular. You’ll learn to create components, databinding, routing, templates, Observables, Reactive extensions and more.
Through progressive elaboration of worked code examples, course participants will create a full frontend application using the latest version of Angular, integrated with a fully functioning REST API. Note: a runnable server-side API application is provided as part of course materials; development of such an API is not in scope for this particular course.
The course begins with a one-day prelude, covering key concepts in core JavaScript; participants do not need to have prior experience coding in JavaScript (although the ability to code in some other language is still necessary).
Adopting a Component based UI approach, we next demonstrate how to structure user interface elements according to the Atomic Design System. Participants will learn how to iterate UI designs within a cross-functional team using Storybook, for ease of visual testing (i.e.. designer/developer workflow). Further, we teach how to use SaSS to generate parameterized, namespaced CSS stylesheets, matching the Atomic Design components described in the project’s Storybook assets.
Ultimately, these techniques are combined in detailed, practical lessons in correct usage of Angular to produce a working frontend application, integrated with a typical REST API.
Learning Outcomes
- Create a full frontend application using the latest version of Angular, integrated with a fully functioning REST API
Suitable For
Experienced developers who want to learn how to build readily testable front-end applications with the latest version of Angular.
Course Outline
Core JavaScript
- Introduction
- Variables and Data Types
- Operators
- Functions
- Conditional Statements
- Loop Statements
- Data Structures
- Arrays
- Object and Inheritance
- Higher-order functions
HTML DOM
- DOM Document
- DOM Selectors
- DOM Events and Handlers
- DOM Manipulation
Component-based UI Development
- Introduction to Design Systems
- Atomic Design concepts
- Implementing Atomic Design using Storybook
- Structuring SaSS for Angular UIs with Atomic Design namespacing
Setup
- Toolchain
- Environment setup (node and NPM)
- Angular CLI
- A basic setup for an Angular app (ng generate)
- Installing an Angular app (ng build)
- Running an Angular app (ng serve)
- Modules
Introduction to Components
- Typescript syntax and usage
- The component class
- Metadata and the decorator
Templates, Interpolation, and Directives
- Building a template
- Building a component
- Using a component as directive
- Binding with interpolation
- Adding logic with directive
Data binding and pipes
- Property binding
- Handling events with event binding
- How to transform data with pipes
Components
- Interfaces
- Encapsulating components styles
- Lifecycle hooks
- Building custom pipes
- Filtering a list
Nested Components
- Services and Dependency Injection
- Building a service
- Registering a service
- Injecting a service
HTTP
- Observables and Reactive extensions
- Sending an HTTP request
- Exception Handling
- Subscribing to an Observable
Navigation and Routing
- Overview Generating code and Handling undefined
- How routing works
- Configuring routes
- Tying routes to Actions
- Placing the views
- Passing parameters to a route
- Activating a route with code
- Protecting routes with Guards
Angular Modules
- Bootstrap array
- Declarations array
- Exports array
- Providers array
- Imports array
- Exports array
- Feature modules
EXCLUSIVE TRAINING FOR YOU COMPANY
AT YOUR PREFERRED SCHEDULE
Tailored to the needs of your organization, we also offer cadetship
programs which include a series of our standardized O&B Academy courses.
Get a quote