Exercise Monday

Goal: Take time to familiarize yourself with Angular CLI, the differences between creating Angular applications from scratch and creating them with the CLI tool, and the Angular routing process.

Warm Up


  • What is a <router-outlet></router-outlet> responsible for? How do we determine where to place it?
  • Walk through the process of defining a new route with your partner. What needs to change? Where?
  • How can we navigate to a new route? What's different about navigating to a page in Angular, versus other web frameworks?

Code


Online Store

Begin today by following along with this weekend’s homework to create the online marketplace application.

Re-Create a Site

Choose one of the following popular types of site to create in Angular.

Discussion Forum

Sites like Reddit, HackerNews and many more all have a similar design: They offer a collection of different pages or forums where users may post news, pictures, and other information around a certain topic. Recreate a basic version of these sites. Here are some user stories to get you started:

  • As a user, I want to see several discussion categories (sub-reddits, boards, etc.) on the main page.
  • As a user, I want to click a category to visit its collection of posts.
  • As a user, I want to click a post to view its contents (For now simply hide/show contents. Routing to a page for a specific post requires concepts from tonight's homework).
  • As a user, I want to click on a post to expand/collapse it, so I can view whatever funny picture, link, or news article other users have posted.
  • As a user, I want to add new posts to a discussion category.
  • As a user, I want to update my post as necessary.
  • As a user, I want the option to delete my post.

Further Exploration

If you complete the user stories above, consider tackling the following bonus objectives:

  • As a user, I want to upvote posts I particularly enjoy.
  • As a user, I want to downvote posts I don't like, or find inappropriate.
  • As a user, I want my new posts to include a timestamp. And I want to see when other listings were posted, too. (Hint: Check out some of Angular's built-in pipes!)

Craigslist

Craigslist is a hugely popular classified advertising website for buying and selling, jobs, events, personals, forums, etc. For this project, explore Craigslist and then re-create a similar online marketplace. Here are some user stories to get you started:

  • As a user, I want to see all of the categories on the main page.
  • As a user, I want to click a category to navigate to a page with all its listings.
  • As a user, I want to click a listing to see its contents (For now just hide/show listing details. Routing to a page for a specific listing requires concepts from tonight's homework).
  • As a user, I want to click on a listing to view its details.
  • As a user, I want to add a new listing to a category of my choosing.
  • As a user, I want the option to update my listing, if I need to.
  • As a user, I want the option to delete my listing if I no longer need it.

Further Exploration

If you complete the user stories above, consider tackling the following bonus objectives:

  • As a user, I want to "favorite" listings I like, and view my favorites later.
  • As a user, I want my listings to automatically be assigned a timestamp. And I want to see when other listings were posted, too. (Hint: Check out some of Angular's built-in pipes!)

Peer Code Review


  • Is a router is used to successfully navigate between multiple pages and routes?
  • Has the project been created successfully with Angular CLI?
  • Is the app structured in a logical way, including a model, multiple components, and TypeScript?
  • Can the application successfully create and edit instances of a model?
  • Does the application work as expected?
  • Are event bindings used to create interactivity throughout the site?
  • Do components manage the appearance and behavior of the site?