This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Table of Contents
Introduction
What are Components?
Scott Moss begins the course by briefly introducing himself and providing links to the slides and course files. Then dives into the component approach in Angular.
Using ES6/ES2015
Scott gives a quick overview of the technology he’ll be using throughout this course. The ES2015 (ES6) code will be transpiled with Babel. Scott will be using Webpack and Gulp for automation.
Introduction to Webpack
Webpack treats all files as modules. Scott explains how Webpack will be used to load, transpile, and bundle the code. He also goes into a little more detail about how Gulp will be used to orchestrate Webpack, copy files, and serve the application.
Exercise 1
In this exercise, you will configure the Webpack JavaScript loader. You’ll also write the Gulp build task. Once these tasks are complete, you should be able to run “npm start,” open the application, and see an alert.
Exercise 1 Solution
Scott walks through the solution to exercise 1.
Exercise 1 Solution, continued
Scott continues his explaining of the solution to exercise 1 by answering a few additional audience questions.
Dependencies
Using Dependencies
Since Webpack allows the use of commonJS in the browser, node modules and NPM can be used to manage frontend dependencies. Scott introduces the ES2015 syntax for importing modules. He also overviews the import/export patterns used throughout the course.
Aliasing Dependencies
Scott continues his demonstration on how to import dependencies. He spends a few minutes talking about aliasing and shares some instances where it’s useful. Scott also covers using the ES2015 module system alongside Angular’s module system.
Exercise 2
In this exercise, you will import a some dependencies into your project including Angular and lodash. You will also add code to export the home module.
Exercise 2 Solution
Scott begins the solution to exercise 2 by explaining the code in app.js.
Exercise 2 Solution, continued
Scott continues his exercise 2 solution demonstration by discussing the code in home.js.
ES2015 Syntax
Better Variables
Along with the var keyword, ES2015 provides developers with two new keywords when declaring variables: const and let. Scott discusses the differences between const, var and let and shares how and when he uses these keywords.
Components of a Component
A component, in this context, is the composition of functionality, UI, state, and tests. Scott gives an example directory structure for a component and overviews the many files that may exist in that directory.
Getting Classy
ES2015 classes will be used when defining any controllers. Classes have a constructor function which will be called upon instantiation. They are also able to be extended similarly to other programming languages.
Object Shortcuts
Scott shares some new syntax in ES2015. He looks at shortcuts for defining objects, destructuring, and creating functions.
Exercise 3
In this exercise, you will create a blog component for the application.
Exercise 3 Solution
Scott goes through the solution to exercise 3.
Unit Testing
Testing Components
Before getting into the exercise, Scott dives into how to unit test components. Because the application is modular, each component can be tested without loading the full application. The tools Scott will be using are Karma, Mocha, and Chai.
Exercise 4
In this exercise, you will write unit tests for the blog component. The tests will be added to blog.spec.js.
Exercise 4 Solution
Scott begins walking through the solution to the fourth exercise. He starts in the karma.conf.js configuration file and moves to the spec.bundle.js file.
Exercise 4 Solution, continued
Scott continues demonstrating the solution to exercise 4 by looking at the specific tests written in this exercise.
Testing Q & A
Before moving on to the next section, Scott answers a few remaining questions about testing frameworks. He clarifies some of the Webpack configuration and talks about the differences between Jasmine, Mocha, and Chai.
Services
Service Definition
In Angular 1.0, services were loosely defined. Scott describes the differences between services and factories in Angular 2.0. Because services must return a newable function, he prefers factories which can return an object of any type.
Using Services
Scott stresses that state should not be stored in components. He demonstrates how to use services to manage state and create an API for exposing state methods to components needing access. Scott also talks a little about how to organize services within a project.
Destructuring
ES2015 provides developers with a syntax for pulling properties off an object and creating local variables. This technique is called destructuring. While destructuring is most commonly used with objects, Scott demonstrates it can also apply to array values.
Exercise 5
In this exercise, you will create a shared factory for getting blog posts from the JSON API server. You will also create all the CRUD methods necessary for interacting with the data.
Exercise 5 Solution
Scott walks through the solution for exercise 5.
Exercise 5 Solution, continued
Scott continues the solution to exercise 5. He also answers a few ES2015 syntax questions from the audience.
Component Architecture
Decorators
Decorators are JavaScript mix-ins that add syntactical sugar to classes and object literals. Decorators can take parameters and are often used to overload an existing function call. Scott demonstrates how to create a decorator and shares some of his favorite use cases. - Audio was out of sync during this video through the rest of this chunk
Component Comparison
Scott takes some time to compare components across a variety of frameworks. He looks at Angular 1 & 2, React and Polymer and shares a few of thoughts on each.
Exercise 6
In this exercise, you will create the BlogPostComponent directive. This exercise contains less help than previous exercises and is intended to reinforce some concepts from earlier exercises.
Exercise 6 Solution
Scott walks through the solution to exercise 6.
Recap
Since there is no standard component architecture in Angular 1.x, Scott reviews a number of points to remember when using a component approach.
Exercise 7
While responding to an audience question, Scott segue ways into exercise 7. This exercise requires you to create your component from scratch. This component allows the user to create a post for the blog.
Exercise 7 Solution
Scott demonstrates the solution to exercise 7.
Automation
Templating
Before getting into automation, Scott explains how templating engines work. Most templating engines combine a template string with a set of options to create dynamic output.
Exercise 8
Scott dives right into exercise 8. In this exercise, you will add automation to the component creation process. Scott walks through a few of the files as well as the Gulp task to give a context for what needs to be done and how the command line arguments will be used.
Exercise 8 Solution
Scott walks through the solution to exercise 8. He also gives a few ideas for ways to extend automation similar to scaffolding tools like Yeoman.
Q & A
Final Q&A, part 1
Scott begins wrapping up the course with a lengthy Q&A session. In the first part of the Q&A, he answers questions about using the Ionic framework, scaling shared services, and systemJS.
Final Q&A, part 2
Scott continues the audience Q&A by answering questions about server-side technologies, reducing dependency injection in controllers, Webpack vs. JSPM, and UI frameworks for Angular.
Final Q&A, part 3
Scott wraps up the course answering one last audience question about tips for beginners. He also leaves the group with a few useful animation resources for components and SVG files.