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

Prerequisites

Download and install node (v7.6.0 or greater) per this
- This will install npm as well
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!

npm install

Testing the installation

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

In the first one, run

npm run server

You should see something to the effect of

> friends-hq@0.0.0 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.

theloom / friendsapp