Angular Fundamentals by Joe Eames and Jim Cooper

5 min readAug 3, 2019

Welcome to this review of the Pluralsight course Angular Fundamentals by Joe Eames and Jim Cooper.

This is the 5th course on the Angular learning path, however it is possible to skip the previous courses and start right here learning Angular. Although it is considered to be an intermediate level course, the authors have tried to make to understandable to viewers with no prior experience of Angular. The only prerequisites are some experience of JavaScript and HTML.

If you want to learn JavaScript check out the JavaScript learning path.

If you want to learn HTML see the HTML5 learning path.

Or learn both with the Programming in HTML5 with JavaScript and CSS learning path.

The Angular Fundamentals course uses Node and NPM, but you do not need a lot of experience with these in order to follow along.

If you want a more gentle introduction to Angular, you can watch some or all of the beginner level Angular courses. These are:

John Papa has also produced Angular: First Look

Still with me? Great, let’s get started!

Getting Started with Angular

Jim Cooper presents the first module. A couple of other courses that he recommends are NPM playbook by Joe Eames (58 mins long) and JavaScript Fundamentals for ES6 by Joe Eames and Scott Allen (4 hours 51 mins).

Practice Exercises

Jim and Joe have created Practice Exercises for you. These exercises are published on plunkr to make it easy for you to experiment.

Introduction to TypeScript

Jim also says we’ll be using TypeScript for this course. This is a different language than JavaScript (if you consider it to be a language, that’s another discussion). You should be able to follow along without having learned it before, but if you decide to learn it first there are a few different options.

The beginner level Angular courses (listed above) teach a bit of TypeScript as they go, although that’s not the focus of those courses. There are several Pluralsight courses that are focused purely on TypeScript, such as Practical TypeScript Migration by Steve Ognibene.

In this clip, Jim covers some of the high level TypeScript concepts. It’s a superset of JavaScript that transpiles into regular JavaScript. We learn about TypeScript interfaces, class properties, and public and private accessibility here.

Comparing Angular to Angular JS

Jim explains the main differences between the newer Angular and its earlier incarnation, Angular JS.

Angular JS is mainly an MVC framework. A view refers to a controller, and the controller exposes models representing data. (Angular components were also introduced in Angular JS v1.5).

Angular uses components. Components are associated with templates. We have models representing our data.

Jim says in Angular JS a template would often reference multiple controllers. This differs in Angular because there’s a 1:1 mapping between templates and components, in fact we can consider the template to be part of the component.

I have written extensively about Angular vs Angular JS and other frameworks in the popular article Choosing a JavaScript Framework in 2019.

A Conceptual Overview of Angular

Jim talks about the Angular component hierarchy, and the concept of modules, which is different to the modules that ES2015 offers.

What We’ll be Building

We’ll be building an application that displays upcoming Angular conference events. It will allow users to create new sessions for these events.

This is basically the same app that is built in the Angular JS Fundamentals course.

Installing Git and Node

If you don’t already have these tools installed on your machine, this clip shows you how to do that. Jim recommends using Node 8.11.2 for following along with this course.

Getting Started with the Angular CLI

Jim recommends always starting your projects with the CLI. We can install it globally like this:

npm install -g @angular/cli

Then we can create our project like this:

ng new ng-fundamentals

And we generate the default tour of heroes Angular app.

For further information on the Angular CLI, see my review of John Papa’s course.

Bootstrapping an Angular App

Earlier we mentioned that a template can be considered part of a component. In this clip we see that a component is made up of 3 parts:

The component code, usually a TypeScript file
The template
The CSS file (or other style file)

Our component has a selector with the value ‘app-root’. This defines the HTML tag that is used in our index.html file.

The tag is a placeholder for our entire app component, and when the app is running, instead of the HTML containing <app-root></app-root>, it will contain the HTML code that is generated from our component code and template.

In this clip Jim makes an Events App “Hello World” component.

Accessing static files

In this clip we learn that the code for this course is found on GitHub (don’t forget to star it if you appreciate it!)

We can download the basic-shield.png and other image files and save them into our own project.

We see that we can easily display these files by updating the template. The image paths are relative to the index.html file

Then Jim adds code for using Bootstrap and jQuery in the app, and is using Webpack (Joe Eames has also produced a Webpack Fundamentals course if you want to learn that.)

This concludes the first module. The next module “Creating and Communicating between Angular Components” is covered here.

Also see:

Exploring the Angular Template Syntax

Creating Reusable Angular Services

Routing and Navigating Pages

Collecting Data with Angular Forms and Validation

Communicating Between Components

Reusing Components with Content Projection

Displaying Data with Pipes

Understanding Angular’s Dependency Injection

Creating Directives and Advanced Components in Angular

More Components and Custom Validators