ngStockholm Workshop!
Hi! Welcome to ngStockholm! This repo contains our whole sample application.
Requirements
In order use run this code examples you'll need to install node and npm (npm is installed automatically when you install node).
How to run the examples
- Clone the repository
- Run
npm install
to install all necessary packages - Run
npm start
, this will start a simple http server, enable TypeScript compilation on file changes and automagically reload your browser. Wow!! - Start writing Angular 2
- Profit
Note that when you clone the repository you'll get the complete finalized code sample application. If you want to see a specific part just run git tag
to see the available parts. You can use git checkout <tagname>
to checkout any specific version. To go back ot the complete application run git checkout master
.
Part I. Your First Component
- Your First Component (A single view with list of things)
- Bootstrapping an angular 2 app
- Your first component: A star wars people list component
- Listing stuff: Basic template with
*ngFor
- EXERCISES
- Create People component and List people
Detailed Solution Step by Step
Part II. Extracting Responsibilities into Services
- Refactor your people retrieving into a service
- Create a new service that wraps retrieving star wars people
- Use service in your component
- Register service provider in your application
- EXERCISES
- Create star wars service
Detailed Solution Step by Step
Part III. Your Second Component. Learn more templat-y stuff
- Create a second component for person details
- When you click on a person in the list you'll show person details
- event bindings
- interpolation
- Create a person details component to encapsulate person details
- property bindings
- EXERCISES
- Create Person Details component and show person information when you click on a person in the list
- When you click on a person in the list you'll show person details
Detailed Solution Step by Step
Part IV. Routing: Navigating between Master and Detail
- Instead of showing both at once, we'll enable routing between master and detail
- Setup these routes for your app
- Default route: people list
- Person details route with
id
as parameter
- EXERCISES
- Setup a master/detail routing
- Setup these routes for your app
Detailed Solution Step by Step
Part V. Forms and Validation
- Improve your person details so you can edit properties
- Forms and two-way data binding
- Validation
- EXERCISES
- Update person details so you can edit properties
Detailed Solution Step by Step
Part VI. Async: Updating our service to get REAL data!
- Update service to get real data from an API
- Use angular 2 http service to get people
- Use http service to get a single person
- Use http service to save person (the API doesn't allow it but we can do an as-if)
- EXERCISES
- Update star wars service to get real data: get people, get person and save person
Part VII. Styles!
- EXERCISES
- Add some styles!
- See how component based styles don't leak to the whole app!
Part VIII. Bonus!!!!
- EXERCISES
- Add a app level navigation with the people you already have and starships!!
- Add a list of starships
- Add a detail when you click on a starships
- In the person detail display a list of the starships they own
- When you click on the starship go to the starship detail view
Useful References to Learn More
- Getting Started with Angular 2 Step by Step
- Angular 2 full docs
- Angular2 Cheetsheet
- Angular 1 to Angular2 Quick References
- Barbarian Meets Coding Angular 2 Wiki
- Check John Papa's Angular 2 First Look Course and Live Code Samples
Web Services Info
- https://swapi.co
- To get all people: http://swapi.co/api/people/
- Schema of the json: http://swapi.co/api/people/schema
- Documentation: https://swapi.co/documentation
- Javascript wrapper of api: https://github.com/cfjedimaster/SWAPI-Wrapper