Skip to content

acn-ama/angular

Repository files navigation

Angular Starter Kit + Exercises

This project was generated with Angular CLI version 7.2.3.

Exercises

Introduction

The goal of this exercise is to develop a web application for conference management and organization. Application should show different pages which can include a list of speakers and/or talks.

Set up and run

In your terminal execute following commands:

  • npm install
  • npm run start

Beginner

Goal: Show details of a single talk

  • Show talk details:
    • Name
    • Speaker name
    • Topic
    • Location
  • Show participation status
  • Show a button to change participation status (follow/unfollow)

Technical details:

  • Generate new component (you can use Angular CLI):
    • talk-details.component.ts
  • Add data-bindings to pass data from parent
  • Make sure data is shown on the screen
  • Add new button element
  • Make sure button does change participation status

All data could be contained in *.component.ts files.

All data should be coming from an angular variable and NOT HARDCODED in the HTML

Expected output:

drawing

Intermediate

Goal: Enhance application with routing (split by pages) and add navigation header.

  • Routes:
    • /speakers
    • /talks
  • Pages:
    • Speakers
    • Talks
  • Header:
    • Home
    • Speakers
    • Talks

Technical details:

  • Generate new components:
    • speakers.component.ts
    • talks.component.ts
  • Components above should use its children components to list details
    • speakers.component.ts should show 1-N speaker-details.component.ts
    • talks.component.ts should show 1-N talk-details.component.ts
    • listing should be generated dynamically using appropriate angular directives, see the code below to generate your stub
  • Configure angular router (use RouterModule)
  • Add routes:
    • /speakers -> component: speakers.component.ts
    • /talks -> component: talks.component.ts
  • Add header component to the top of the page:
    • header.component.ts
  • Click on header item should redirect to corresponding page

Expected output:

drawing

Stubbed data

const talks = [
  {
    event_name: "Angular Today and Tomorrow",
    author: "John Doe",
    topic: "Front-End",
    description: "Ubi est fortis tata? Est teres classis, cesaris."
  },
  {
    event_name: "How To Hack an Angular app?",
    author: "Jim Jones ",
    topic: "Front-End",
    description: "Why does the lubber die?"
  },
  {
    event_name: "Docker in Production",
    author: "Ringo Starr",
    topic: "Back-End",
    description: "Never trade a kraken."
  },
  {
    event_name: "Angular vs Vue",
    author: "Chuck Norris",
    topic: "Front-End",
    description: "Yellow fever, love, and malaria.."
  }
];

const speakers = [
  {
    name: "Pinco",
    surname: "Pallo",
    country: "Moldavia",
    age: "42"
  },
  {
    name: "Jack",
    surname: "Sparrow",
    country: "Cayman Islands",
    age: "17"
  },
  {
    name: "Jesus",
    surname: "Christ",
    country: "Palestine",
    age: "33"
  }
];

Advanced

Step 1

Goal: Enhance application with angular services and retrieve data from API.

Technical details:

  • Generate new services:
    • speakers-data.service.ts
    • talks-data.service.ts
  • Implement services:
    • use angular http client
    • add services into app.module
  • Update components implementation:
    • dispatch fetch action (one that triggers request to API) during ngOnInit phase
    • speakers.component and talks.component should use services to retrieve data

Expected output:

  • Components should not use TBD.json and TBD.json data

Step 2

Goal: Enhance application with ngRx store.

Technical details:

  • Add new dependencies:
    • @ngrx/effects
    • @ngrx/store
    • TBD if needs more
  • Create corresponding:
    • Actions
    • Reducers
    • Effects
  • Update components implementation:
    • speakers.component and talks.component should use ngRx store to retrieve data

Expected output:

  • Components should not use services directly, but read data from ngRx store service using subscriptions

Step 3

Goal: Enhance application with delete talk/speaker functionality.

Technical details:

  • Add new DELETE button to:
    • speaker-details.component.ts
    • talk-details.component.ts
  • Click on DELETE button should:
    • dispatch delete speaker/talk action
    • data in ngRx store should be updated (should not contain deleted speaker/talk)
    • speakers.component/talks.component should reflect updated data (show listings without deleted speaker/talk)

Expected output:

TBD Preview

Bonus

Goal: Enhance application with translations/i18n.

Technical details:

  • Create language selector component:
    • generate language-selector.component.ts
  • Add language selector to header:
    • update header.component.ts
  • Add required dependencies and translation data (en, it)
    • Translations: TBD TABLE

Expected output:

TBD Preview

References

Dev Tools