Angular app

Angular app.md

Preconditions

• node with npm installed
• @angular/cli installed or run npm i -g @angular/cli@latest
• vscode , webstorm or other editor installed
• feeling adventurous :)

• We'll be using https://jsonplaceholder.typicode.com/ as a data source

Tips

• use ng generate command from @angular/cli to generate anything quickly

Create App

• create new angular app, for how it's done visit https://cli.angular.io/
• try to experiment with various options of new command
• app should be generated and all dependencies installed, if not - switch to folder and run npm i

App requirements

• Overall look and feel:

  • there is home page with link to users page
  • page/route structure should look like this:
  • /users - lists all users available from api
    • /user/:userId lists user info and albums at the top and posts below
      • /user/:userId/albums lists same albums as user/:userId page
        • /user/:userId/albums/:albumId/photos lists photos by albumId
      • /user/:userId/posts list of posts by that user & contains link load replies to load replies by that postId
        • should contain text field and a button to add posts and/or comment, handle response and append that post and/or comment

• Feature usage:

  • Must include following:
    • ngIf to show/hide add comment component
    • ngFor with optimisations (as you load replies there might be performance issues like freezing)
    • components that are reused: albums component on /users/:userId route and albums on /albums route
    • Directive to highlight odd/even post
    • Resolve that loads data when route is activated
    • Guard to check whether album or post belongs to that user
    • HttpClient to load data
    • HttpInterceptor to handle 404 error
    • @Injectable service to use HttpClient inside
    • Lazy modules for at least one route
    • routerLink for navigation
    • rxjs operators like filter, map etc.
    • FormGroup & FormControl to add comment
    • Validators and view validation messages

• Well-defined structure:

  • each module in separate folder
  • each module folder should contain separate folders for components, services, directives, child modules if any etc .
  • there should be separate module for routing, and module that contains all declarations/providers that also imports routing module
  • every feature (like posts, photos, albums) should be contained in separate feature module with it's own routing
  • every feature module should be lazy-loaded from main app.module's routing module
  • components should follow SOLID-like principle - be as granular as possible