HPL Tutorials

Instructions for Download

1. In terminal, go to your work directory (using cd) and type git clone [email protected]:ijlee2/hpl-tutorials.git.
2. Type cd hpl-tutorials.
3. Each folder inside hpl-tutorials is an Ember app that you can install and run locally. For example, to run the first tutorial, you can type cd hpl-tutorial-01, then ember s.
4. Once an app is running, visit localhost:4200 on Chrome or Firefox.

Summary

#01 (Dec. 9th, 2018)

• Use ember new to create an Ember project
• Use ember serve (or ember s) to start the Ember app
• Understand Component-Driven Design (templates, components)
• Investigate why the default welcome page is rendered (see app/templates/application.hbs)
• Use ember generate component (or ember g component) to create 2 components, my-list and my-list-item
• Display the name of 1 person using my-list and my-list-item components
• Display the names of 3 people using {{each}} helper
• Update the stylesheet (app/styles/app.css)

To learn more, visit:

• Handlebars (double curly brace notation, each helper)
• Ember Templates 1 (skip section on helpers)
• Ember Templates 2
• Ember Component 1 (init method)

#02 (Dec. 11th, 2018)

• Use ember g route to create members and officers routes
• Use {{link-to}} helper to navigate between routes
• Understand the purpose of {{outlet}}
• Use a route's model() to display data
• Use ember install to install addons (e.g. ember-cli-sass)

To learn more, visit:

• Ember Route 1
• Ember Route 2

#03 (Dec. 20th, 2018)

• Use a controller to filter data from a route's model()
• Define a model's attributes
• Understand the purpose of an adapter and a serializer
• Use Mirage and Faker.js to create mock data
• Use ember-test-selectors to write integration and acceptance tests

To learn more, visit:

• Ember Controller
• Ember Model
• Ember CLI Mirage
• Faker.js
• Ember Test Selectors