Advanced Angular workshop

We started receiving requests for teaching an advanced Angular workshop. Below is a draft of this course outline. The first day will be spent developing the front end of the online store that will look like this.

Advanced Angular Course (draft)

  1. Using Angular Material UI components

    1. Adding @angular/material package to the ngShop application
    2. Configuring custom theme / SCSS
    3. Responsive wed design with Angular Flex Layout library
  2. Modularizing Angular application:

    1. Minimizing the initial app payload by splitting it into modules
    2. Lazy-loaded modules and preloaders
    3. Configuring route resolvers
  3. Application Security with JWT

    1. Intro to JWT-based authentication
    2. Adding a JWT-based Login page
    3. Authorizing access to the Admin module via route guard
    4. Adding JWT token to the HTTP requests required authorized access
    5. Handling Unauthorized errors
  4. Dynamically adding components to your app

    1. Creating a dynamically configurable  Dashboard page
    2. Dynamically adding components with ComponentFactoryResolver
    3. Dynamically adding components with
  5. Advanced work with Forms

    1. Creating custom form controls. ControlValueAccessor.
    2. Splitting complex forms into multiple Angular components
    3. Validating form groups
    4. Refactoring the Checkout page of ngShop
    5. Adding an inventory page with a data grid
  6. End-to-end testing with Protractor

  7. Production deployment

    1. Customizing Webpack build configuration and  ng eject
    2. Building Angular application on the Continuous Integration server
    3. Running tests on CI
    4. Automatic deployments to the nginx server
    5. Configuring HTTPS
    6. Combining multiple Angular apps under a single domain
    7. Server-side rendering with Angular Universal
  8. Refactoring ngShop to introduce state management  with ngrx

    1. Benefits of  unidirectional data flow
    2. Managing state with @ngrx/store
    3. Time-travelling debugging with @ngrx/store-devtools
    4. Using  HTTP APIs with @ngrx/effects library
    5. Integration with the router via @ngrx/router library



8 thoughts on “Advanced Angular workshop

  1. Excellent! (especially JWT and ngrx Store) When can we expect it? Also adding a connection to Java Spring server would be very beneficial.

    1. Also how about building custom components?
      For example, I need to add a Filter/Search to PrimeNg Tree component. How to do it?

  2. Hi all,
    Also would be nice to have some information on how to change behavior of some components from material lib or another like primeng.

  3. Hi Yakov,
    From my perspective it would be nice to have information how to create a library of custom angular 2 components and
    publish them to npm registry. Also how to use them in different projects(maybe also examples how to use different versions of that library). Also it would be great to add using some advanced chart library and data grid.

  4. Yakov’s book is half price today ( July 6th ) at . . . It is good to be on the Deal-of-the-Day Mailing List, because every day a different book is chosen to be on sale. And sometimes around a Holiday, they have big savings days too, so be on the lookout about then for Labor Day discounts on this book and others, too.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s