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
@Input
s and@Output
s- Services
- Dependency Injection
- Ajax using
Http
andObservables
- Smart vs. Dumb components
- Routes, routing, and the
router-outlet
- Download and install
node
(v7.6.0
or greater) per this- This will install
npm
as well
- This will install
- 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!
npm install
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
> [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.