kapang/friendshq-workshop

FriendsHq

This is an Angular workshop using TypeScript. It attempts to demonstrate creating a simple web application.

The constructs that we see being employed in this workshop are

• Creating Angular components
• Creating component hierarchies
• Using the Angular style guide for naming and project layout
• @Inputs and @Outputs
• Services
• Dependency Injection
• Ajax using Http and Observables
• Smart vs. Dumb components
• Routes, routing, and the router-outlet
• Forms (template-driven and reactive)
• Testing

Prerequisites

• Download and install node per this
• It is preferred you use yarn — Installation instructions can be found here
• Angular Cli - You will find instructions here

Optional (but highly recommended)

• Install Git
• Install Visual Studio Code
  • Install the EditorConfig extension
  • Install the Angular v4 TypeScript Snippets extension by John Papa
• Install Google Chrome
  • Install the Augury Extension

Getting started

First git-clone or download this repository (Though it's preferred you clone)

Then open a terminal, cd to the directory where you cloned this repository.

Make sure node/npm are in your path!

yarn install

Testing the installation

Open two terminals. In both cd to the directory where you cloned this repository.

In the first one, run

yarn run server

You should see something to the effect of

> [email protected] server /Users/raju/Documents/presentations/Angular-with-TypeScript-Workshop/friendsHq
> json-server --watch server/api/db.json


  \{^_^}/ hi!

  Loading server/api/db.json
  Done

  Resources
  http://localhost:3000/friends

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

In the second terminal run

ng serve

Once the console is settled, visit http://localhost:4200/ and you should see a http://localhost:4200/ with followed by the Angular Logo.

You are all set!

Credits

This project is inspired by Monica.