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 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 # or npm install
Open two terminals.
In both cd to the directory where you cloned this repository.
In the first one, run
yarn run server # or npm 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.