Angular 2 getting started with jokes. Using API from http://www.icndb.com/api/.
- Setup your environment follow the instruction in https://angular.io/docs/ts/latest/quickstart.html#!#devenv.
- Run npm install to install required dependencies.
- Run npm start to launch a dev server and watch mode.
Angular 2 Joke Checklist Getting started with jokes checklist. joke api explanation: http://www.icndb.com/api/
- Setup
- npm start
- brief project structure explain
- Bootstrapping application
- bootstrapping
- file naming
- 1st component - joke-app: display title on page
- introduce selector, template
- Display joke of the day on joke-app.
- using constant
- create interface using according to api http://api.icndb.com/jokes/random
- extend interface
- import interface
- refactor to joke service
- introduce constructor
- implement OnInit life cycle hook
- introduce providers
- using promise
- introduce *ngIf directive
- using http and observable, and HTTP_PROVIDERS, and include src file
- 2nd component - joke: move joke of the day to this new component
- introduce templateUrl
- introduce styles and styleUrls
- Routing - adding routing to joke-app
- introduce route config, use as default and include src file
- base href strategy
- introduce route-outlet, routeLink in html
- refactor joke in joke-app to “dashboard” route
- 3rd component - categories: display joke categories and list of joke under the selected category
- create category interface according to api http://api.icndb.com/categories
- categories list service according to http://api.icndb.com/categories
- create routing link
- introduce async pipe
- introduce *ngFor directive and #
- introduce event (), o’clock show joke list under the selected category
- joke list api http://api.icndb.com/jokes/random/5?limitTo=[nerdy]
- 4th component - jokes - move the joke list to jokes component
- introduce inputs
- 5th component - custom-joke: allow customisation of joke with user first name and last name
- create form
- create Person interface
- introduce ngModel [()]
- create custom joke according to api http://api.icndb.com/jokes/random?firstName=Adam&lastName=Sandler
- add reset button
- introduce ngSubmit()
- introduce ngForm
- introduce ngControl and validation
- introduce #spy and validation css class
- introduce uppercase pipe
- introduce [innerHtml]
- Custom pipe - highlight: bold the selected text on the fly
- implement PipeTransform
- use this pipe in custom joke
- Side challenge for yourself
- refactor hyperlinks of the categories component
- make a new route to call /categories/:selectedCategory
- when clicks on the hyperlink, redirect user to new page with list of joke, pass only category name
- add a back button on the joke list page
- style it nicely with responsive framework of your choice. e.g. bootstrap, mdl, foundation, etc.
- refactor hyperlinks of the categories component