Component-Based Architecture in AngularJS 1.x and ES6
This course has been updated! We now recommend you take the Angular Core course.
Table of Contents
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/ES2015Scott 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 WebpackWebpack 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 SolutionScott walks through the solution to exercise 1.
Exercise 1 Solution, continuedScott continues his explaining of the solution to exercise 1 by answering a few additional audience questions.
Using DependenciesSince 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 DependenciesScott 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 2In 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 SolutionScott begins the solution to exercise 2 by explaining the code in app.js.
Exercise 2 Solution, continuedScott continues his exercise 2 solution demonstration by discussing the code in home.js.
Better VariablesAlong 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 ComponentA 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 ClassyES2015 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 ShortcutsScott shares some new syntax in ES2015. He looks at shortcuts for defining objects, destructuring, and creating functions.
Exercise 3In this exercise, you will create a blog component for the application.
Exercise 3 SolutionScott goes through the solution to exercise 3.
Testing ComponentsBefore 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 4In this exercise, you will write unit tests for the blog component. The tests will be added to blog.spec.js.
Exercise 4 SolutionScott 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, continuedScott continues demonstrating the solution to exercise 4 by looking at the specific tests written in this exercise.
Testing Q & ABefore 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.
Service DefinitionIn 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 ServicesScott 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.
DestructuringES2015 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 5In 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 SolutionScott walks through the solution for exercise 5.
Exercise 5 Solution, continuedScott continues the solution to exercise 5. He also answers a few ES2015 syntax questions from the audience.
Component ComparisonScott 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 6In 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 SolutionScott walks through the solution to exercise 6.
RecapSince there is no standard component architecture in Angular 1.x, Scott reviews a number of points to remember when using a component approach.
Exercise 7While 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 SolutionScott demonstrates the solution to exercise 7.
TemplatingBefore 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 8Scott 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 SolutionScott 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 1Scott 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 2Scott 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 3Scott 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.