Advanced Angular course – need your input

We started receiving requests for teaching an advanced Angular workshop. My colleague Anton and I started preparing the courseware and are planning to offer such a workshop this fall. Below is a draft of this course outline, which will start with refactoring and upgrading the ngShop app that we’ve  created for one of our Intro to Angular courses.  Please take a look at the draft below, and if you see some topics that should be added to this workshop, please leave comments to this blog. Thank you!

Advanced Angular Course (draft)

  1. Using UI libraries: Angular Material and PrimeNG

    1. Adding @angular/material package to the ngShop application
    2. Configuring custom theme / SCSS
    3. Laying out component with @angular/flex-layout library
    4. Programmatically changing UI layouts with MediaQueryList
    5. Combining Angular Material 2 and the PrimeNG UI components
  2. Modularizing Angular application:

    1. Minimizing the initial app payload by splitting it into modules
    2. Lazy-loaded modules and preloaders
    3. Adding new Admin module to ngShop
    4. Configuring a lazy-loaded route for Admin module
    5. 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

 

Advertisements

7 thoughts on “Advanced Angular course – need your input

  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.
    Thanks

  4. Yakov’s book is half price today ( July 6th ) at Manning.com . . . It is good to be on the Manning.com 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:

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s