Building Business Applications with Angular

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Building Business Application with Angular training course teaches students how to build rich client-side business web applications using HTML, CSS, JavaScript, and Angular. Students develop real-world Angular business applications with JavaScript/TypeScript and learn how to use modern JavaScript/TypeScript programming techniques with an emphasis on core JavaScript/TypeScript concepts, the latest JavaScript/TypeScript syntax features, and popular user interface (UI) development with Angular. This class is for developers with modern JavaScript/TypeScript and Angular experience who wish to learn more about how Angular is used within business application development. The emphasis in this course is more complex project structures (workspaces and libraries), form validations, custom form controls, routing including lazy loading, guards, and resolves. Finally, state management using services and RxJS is explored. Neither, NgRx nor NgXs are covered in this course but could be added if the course is expanded to three days.

Students will build a business application project using Angular to apply their JavaScript/TypeScript skills and to learn about business application development using Angular. This course teaches all that the students need to know about Angular to create modern interactive business web applications. Students will learn more advanced skills such as using workspaces, libraries, and even creating NPM packages to reuse content. Also, students will learn how to code and use synchronous and asynchronous custom validators for controls, form groups, and form arrays. Students will explore how to create reusable custom form controls that seamlessly connect into the Reactive Forms system. Routing will be a constant theme within the course exploring how to lazy load modules, implement a better user experience for handling security, and loading data when changing routes. Finally, important concepts and elements of state management will be explore using Angular’s native API. For more advanced state management such as NgRx or NgXs, a third day can be added.

Course ObjectivesObjectives

  • Develop real-world JavaScript business applications with Angular
  • Explore how to manage larger Angular projects with workspaces and libraries
  • Distribute custom Angular libraries as NPM packages
  • Go deeper into Angular Forms exploring various complex validation scenarios and custom controls
  • Construct custom form controls which seamlessly integrate with the Reactive Forms module
  • Incorporate routing into business applications to lazy load modules, implement UI security with an emphasis on user experience, and preload data through resolvers
  • Manage application through Angular services and RxJS
  • Coverage of NgRs and NgXs can be included in an optional third day

Course PrerequisitesPrerequisites

Students should have a good working knowledge of Angular, HTML, CSS, ES2015 JavaScript, and web development. Also, students should have general programming experience.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

All course materials are distributed via T4D.IO (https://www.t4d.io), GitHub (https://www.github.com), and Google Drive (https://drive.google.com) (Microsoft OneDrive can be used as an alternative to Google Drive if the client desires). Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources. If students cannot access T4D.IO, GitHub, or Google Drive, alternatives will need to be discussed.

Course OutlineOutline

The course is taught with the TypeScript language (TypeScript is JavaScript with strong-typing). Knowledge of JavaScript and TypeScript is required for this course.

  1. Angular and Business Applications
    1. Why is Angular well-suited for building traditional web-based applications?
    2. Which parts of the Angular eco-system are geared for business web application development?
  2. Angular Project Structures
    1. Angular Workspaces
    2. Angular Libraries
    3. Incorporate Libraries into Angular Application Development
    4. Developing Applications and Libraries Simultaneously
    5. Packaging and Distributing Angular Libraries
  3. Angular Reactive Forms
    1. Reactive Forms compared to Template Forms
    2. Using Form Controls, Groups and Arrays
    3. What is form validation?
    4. Built-in Validators
    5. Coding Custom Validators
    6. Validating Form Controls
    7. Validating Form Groups
    8. Validating Form Arrays
    9. Synchronous Validators
    10. Asynchronous Validators
    11. Using Promises and Observables in Validators
    12. Validating from a REST API
    13. Distributing Custom Validators in Angular Libraries
    14. Displaying Validation Errors
    15. Distributing Validation Message Components in Angular Libraries
    16. Custom Form Controls
    17. Integrating Custom Form Controls into the Validation System
    18. Distributing Custom Form Controls in Angular Libraries
  4. Routing
    1. Organizing Applications into Lazy Loaded Modules
    2. Lazy Loading with Angular Router
    3. Distributing Angular Modules with Angular Libraries
    4. Nesting Routes
    5. Sibiling Routes
    6. Using Route Guard to Improve User Experience
    7. How Route Guards Help Application Security
    8. How Route Guards do not Help Application Security
    9. Handling Guard Errors
    10. Preloading Data with Resolvers
    11. Handling Resolver Errors
    12. Distributing Guards and Resolvers via Angular Libraries
  5. Application State
    1. What is Application State?
    2. Persistent State vs. Temporal State
    3. Avoiding Component State
    4. Managing State with Angular Services
    5. The Service as a Store
    6. Single Store vs. Multiple Stores
    7. Common Store Patterns in Modern UI Development
    8. Using RxJS to Select Data from a Store
    9. Async Pipe and RxJS
    10. Integrating REST APIs into a Store
    11. Integrating Stores with Form Validation
    12. Integrating Stores with Route Resolvers
  6. NgRx or NgXs (optional third day)
    1. Contact Us to Learn More
Scroll to Top