Beginning Angular Application Development
Hypertheory Training
This class is for software developers who are tasked with contributing or creating Angular applications in an enterprise environment. While this is designed as a "beginning" Angular development course, it is expected that developers have skill in writing software using a language like C#, Java, Go, etc. This is not an "introduction to programming" class. It is also required that developers attending this training have some level of understanding of the various technologies that go into creating applications that are delivered to a web browser. As a part of this course, pre-class materials will be provided to help prospective students evaluate their skills and fill in gaps before attending the training.
See the section called "Pre Work" at the bottom of this outline.
The goal of this course is to lay the foundations for building modern Angular applications in a software development team environment. At the completion of this course, developers should expect to understand:
- The role of Angular in application development
- How to create and configure an Angular application
- How to work with package dependencies in Angular
- How to configure and optimize the development environment and editor
- How to create Angular components, directives, pipes, and services
- How to prepare an Angular application for CI/CD pipelines:
- Building an Angular application
- Linting an Angular application
- Testing an Angular application
- How state is managed in an Angular application using Signals
- Guidelines and conventions in source code organization in Angular
- Basic API access from Angular applications
This class is presented as synchronous online instructor-led training. Students will meet in a Teams meeting and are expected to participate fully. Students will be provided with a development workstation (in the form of a virtual machine) at the beginning of the class that will be used throughout the training. No additional software or hardware preparation is needed on their part. Students should have a good microphone so they can interact and ask questions during class, as well as a web cam for the various meetings during the class time. Students should have an external monitor they can work in while still seeing the instructor's material and screen on another display. The class will be a combination of:
- Lecture / Demonstrations by the Instructor
- Short "practice exercises" reinforce concepts presented soon after they are presented to encourage questions.
- Two labs where students will spend significant time applying the concepts presented in the class on their own.
- Brief review and design meetings with the entire class.
- Access to perpetual classroom resources during and after the class to use as reference and see changes introduced to the class after the student has graduated.
A four-day course with hands-on labs and exercises. 9:30 AM - 5:00 PM ET. This course will not be a "PowerPoint death march" - students will be encouraged to participate, and code along with the instructor.
- We will discuss and explore where Angular fits in the broad world of user interface software development, where it fits within the world of web development, and specifically where it fits in delivering software internally and for our customers at your company.
- Introduction to "Single Page Applications"
- Problems solved By Angular - change detection
- How Angular applications are built, tested, and deployed to production.
- How Angular applications are delivered to the user.
- The Angular CLI (Command Line Interface)
- Installing, using globally and locally
- Using the Angular CLI to create a new Angular project
- Using the Angular CLI to test our Angular Application
- Running Unit and Unit Integration Tests
- Running System Tests with Playwright
- Using the Angular CLI to generate code
- Configuring preferences in the angular.json file using the Angular CLI
- Running a development version of our Angular app during coding
- Introduction to Vite, and "Hot Module Replacement"
- Differences between the development server and the built Angular application.
- Configuring Visual Studio Code
- How to configure Visual Studio Code for optimal Angular development
- Recommended settings, extensions
- Configuring code formatting with Prettier
- Configuring code analysis rules with ESLint
- Introduction to Node Package Management
- Installing and updating dependencies
- The purpose of the package.json and package-lock.json files.
- Introduction to Semantic Versioning
- Guidance on package management for teams
- The "entry point" - main.ts
- Application configuration app.config.ts
- The "root" Angular component - app.ts
- Creating Angular Components
- Generating components with the Angular CLI
- Setting Angular CLI preferences for component creation
- Component Overview
- Component metadata
- Selectors
- Inputs
- Providers
- The TypeScript class
- The template
- The styled
- Component Templates
- Introduction to ngc (the Angular template compiler)
- Component template control flow
- for(), if(), @else, @switch(), @let
- Template variables
- Component Styling
- Global styling in your Angular application
- How Angular isolates component styles
- Using style sheets in a component
- Using the [class] template directive.
- Component State and Behavior
- Implementing data and code inside of a component.
- Introduction to Signals
- Defining Signals in a component
- Setting a new value on a Signal
- Updating a Signal's value
- Computing new Signals based on other Signals
- Using Signal effects for technical requirements
- Component Communication
- Creating child components
- Passing data to a component using input
- Making inputs required, and transforming inputs
- Notifying the parent of an event with output
- Limitations of Component Communication
- Using and creating Angular pipes to transform data in a template
- Angular Directives
- Difference between components and directives in Angular
- Using Angular directives
- Creating an Angular directive
- Creating an Angular directive with parameters
- Creating Angular Services
- The purpose of services in Angular
- Providing services - scope and lifetime
- Providing services globally
- Providing services for a set of routes
- Providing services for a component
- Injecting services
- Injecting services into components
- Injecting services into other services
- Injecting in an "Injection Context"
- Designing services
- The purpose of routing in Angular
- Defining routes in app.routes.ts
- Defining nested routes for features
- Breaking large apps into "bundles" using loadChildren() and loadComponent()
- Route parameters and component input binding
- Defining services for API Access
- Using the Angular HttpClient
- Configuring the HttpClient, and interceptors
- Injecting the HttpClient
- Observables (rxjs) and the HttpClient
- Converting observables to Angular Signals
- Reading data from an API
- Sending data to an API
- The Angular HttpResource and Resource APIs
- The contribution of TypeScript to testing
- Introduction to developer testing levels
- Fast tests with Unit and Unit Integration tests
- System tests with Playwright
Developers come to Angular development with a variety of technical backgrounds. To optimize the training experience for all, developers will have to prove some level of proficiency in a few topics prior to the class. Many developers will have some or all of the requisite skills, and will easily pass the test. Some will have gaps and will be provided with resources to gain some general competency with the following topics:
- Introduction to the Web Application Platform
- Web Applications vs. "Apps"
- HTTP
- HTML, CSS and JavaScript
- Browser APIs (DOM, Fetch, etc.)
- Developer Tools
- NodeJS Applications
- Visual Studio Code
- Git Source Code Control
- TypeScript Language Basics
This class does not require advanced knowledge or ability with any of these, but it is important to ensure students have some understanding of the landscape in which we work as Angular developers, as well as some familiarity with the tools. To help students meet these requirements, resources will be provided that the student can explore in a self-paced manner. These will include short video lectures that have explanations and demonstrations, some small coding practices and exercises, and "deep dive" overviews of each topic, along with links for further exploration and learning.