Angular 2: Getting Started with Pluralsight

Only after a year of me learning basics of Angular 1 ( see the Angular 1 post here), Google has come up with a newly defined Angular 2 platform ( calling it platform for a reason). This blog post is specifically to describe the course that I have recently completed on PluralSight.com. The course is Angular: Getting Started by  Deborah Kurata.

It’s good to see how Google has paved the path for Angular over years and really enhanced its capabilities from a javascript framework to a platform in itself with giving the real power to the developers.

I have a floating license for Pluralsight and it seems like a sound platform for anyone who would like to learn how to code. I did compare few courses on Pluralsight, Lynda.com and other online MOOC websites for Angular 2  and found this course to be better than what is being offered. Although I loved the Angular 1 course: Shaping up with Angular on Code School earlier which was offered for free ( as mentioned on my Angular 1 blog post here), I was rather disappointed to see that Angular 2 course was charged.

Coming back to the plural sight course, The course presents fair points on which language and code editor to use and finally chose Typescript as a language and VS Code Editor to develop our application. I developed a simple application called ACM product management. It involved building sample landing page, a product list page, and a product details page. You can see the final project on this io site I have hosted post completion of this course:

I must say Deborah has worked out a great course. It involves step by step building of modules, components, pipes and service along with working knowledge of how angular project with Typescript is setup and how to compartmentalize the course into modules from a real world project perspective. It really helped me to get to know the basics of Angular and paved a path as what is there to learn even after the course.

Course Description as on Pluralsight:

Whether you are new to Angular or new to Angular 2, if you want to 
create great web apps and stay up to date on the latest app 
development technologies, you're going to want to come up to speed 
quickly with Angular 2's components, templates, and services.This 
course provides the basics you need to get started building an 
Angular 2 application. First, you'll learn how to set up your 
environment, learning about components, templates, and data binding 
and how they work together. Next, you'll discover how to build clean
components with strongly-typed code, as well as building nested 
components and how to  use dependency injection to inject the 
services you build. Finally, you'll cover how to retrieve data 
using HTTP, navigation and routing, and you'll revisit the Angular 2 
setup process. By the end of this course, you'll be up to date on 
all the latest Angular 2 knowledge and you'll be able to use 
Angular 2 to create great apps in the future.

I was able to finish the course in approximately 2 weeks with normal office working hours and weekends. The course has predefined starter files to get you up and running in no time. I personally had no problems hosting and running the provided starter files on a local browser.

The course contains the following modules:

1. Course Overview – covers the intro to the course.
2. Introduction – covers the anatomy of an angular application, the sample application demo which will be build as part of the course and general outlines of the course about how to get the best out of it.
3. First things first – this module presents the general debate of which languages, code editors to use and finally define why to chose typescript and VS code. We set up our starter files on a local machine to have a blank application.
4. Introduction to components – covers what is a component and guides us to create our first component with an explanation about how a component is bootstrapped with root module.
5. Templates interpolation and directives – covers how to build a template and associate with a component. The usage of directives like *ngIf and *ngFor is also very well explained.
6. Data binding and Pipes – covers one-way & two-way data binding and how to transform data with already existing pipes.
7. More on Components – covers typescript concept of defining interfaces in typescript, building custom pipes and lifecycle hooks on a component provided by angular.
8. Building nested components – we nest a product details component under product list component and discuss how to pass data to and fro from the nested component.
9. Services and Dependency Injection – covers basics of services in angular and what it means to register them.
10. Retrieving data using Http – covers writing an HTTP service to receive a JSON response and display a list of components on the product details screen.
11. Navigation and Routing Basics – as the name suggest, this module covers the basics of routing, configuring routes and tying actions to routes.
12. Navigation and Routing additional techniques – covers additional things like passing params to routes i. e. in our case the product detail component, routing with code and some basics of how to guard the routes.
13. Angular Modules – this module covers how to refactor the code into more real life projects where the code is compartmentalized into their own modules and arranged as they are used.
14. Angular 2 setup revisited – this module is unique in the way as it explains how the project we have set up initially actually works with help from npm, system.js and many other libs which make it work magically and show the results on a web browser. This was essential is we want to make any config changes to let say typescript compiler or load another dependent library which may be required by a real world project.
15. Final Words – sets the bounds of horizon angular is covering these days and really pave the path to see what’s more to learn in future. discussing the idea of ionic and material design really made me excited to learn more and more.

I know that’s a lot of modules but on an average, you spend 20 minutes per module so you cover a lot of things really fast.

I really liked the idea of how Deborah has presented the module diagram slides and alongside a demo of how to make them work in real code within each module, it really makes you learn every step of the way. You can see the end product of this course developed by me hosted here on a static site: https://boatman-tiger.netlify.com.

( I would probably dedicate another post about how I created the above static site on request.)

Some screenshots of the same site from my localhost:

Landing Page

Product List Page:

 

I guess for me the next steps would really be to start learning more of CSS and Bootstrap 3 which when combined with angular would give me the best results for websites I want to develop.

I have already compared a few online MOOCs and have decided to go forward with the following courses on plural sight itself:

1. Introduction to CSS by Scott Allen
2. Responsive Websites With Bootstrap 3 by Mark Zamoyta

 

Please feel free to put in your comments on this blog post to let me know about other good angular and CSS courses that you may know about. I will write my experiences with the above-mentioned CSS courses soon.