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
HttpandObservables - Smart vs. Dumb components
- Routes, routing, and the
router-outlet - Forms (template-driven and reactive)
- Testing
- Download and install
nodeper this - It is preferred you use
yarn— Installation instructions can be found here - Angular Cli - You will find instructions here
- 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
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
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!
This project is inspired by Monica.