Skip to content

Home

Jump to bottom
bacn edited this page Sep 16, 2020 · 2 revisions

Step by step Tutorial for an Auction App with Angular 10

Welcome to the ase2-angular-education wiki!

This wiki contains the tasks and hints of the Angular introduction lectures. The tasks allow exercising the theorie described in the slide desk. The result of each step can be analyzed in the source code by using the branches git checkout -b <branch>. Each result of an individual task is available in this code repository.

  • Task#00: Install the tooling like and create the project structure. Adjust some files for achieving a browser compatibility.

  • Task#01: Create a AuctionList component with ng(-cli) and use the new component in the AppComponent view

  • Task#02: Create a MouseEventDisplay component with ng(-cli) and display the mouse coordinates

  • Task#03: Add a headerTitle: string input to your AuctionList Component.

  • Task#04: Add a titleClicked event to the AuctionListComponent. An EventBinding for Title <h3> shall be added. The titleClicked Event shall be written to the console.

  • Task#05: An auctions variable shall be initialized by an array of five auction-items. The array shall be written to the browser by using the structure syntax *ngFor.

  • Task#06: Create an interface for a single auction in the shared folder. The auction interface consists of the depending interfaces based on the domain model from the requirement analysis. Create the file auction-data.ts in the shared folder, which contains at least 3 objects of auctions. Initialize the auctions field in the AuctionListComponent with the AUCTION_DATA constant.

  • Task#07: Create a AuctionDataService in the shared folder. Create a method getAuctions() that returns an array of Auctions Load the data from the AuctionDataService through the DI into the class AuctionListComponent.

  • Task#08: Define sccs as the Default style to your project. Install and configure Bootstrap Version 4.0. Install and configure Font Awesome.

  • Task#09: . Create a AuctionListDetails component with ng(-cli) . Use the new component in the AuctionListComponent view.

  • Task#10: Create the getObservableAuctions() method in the AuctionDataService class. Subscribe to it in the AuctionList component by adapting the constructor() method.

  • Task#11: Refactor components: they should load data in ngOnInit()-method. Unsubscribe in the ngOnDestroy()-method.

  • Task#12 Inject Http in AuctionDataService and load data from local API in AuctionData service via http.get(URL). The data is served from a test-auction-api which can be installed by npm.

  • Task#13 Add the file app.routing.ts in folder ./src/app

  • Task#14 Add a route /auctions for the AuctionListComponent.

  • Task#15 Add the routerOutlet to the template of the AppComponent and define a Default route to /auctions

  • Task#16 Create a new component AuctionDetail with angular-cli and display all necessary data of a specific auction in the view. Extend AuctionList with routerLink (and id) and extend the routes.

  • Task#17 Read the ActiveRoute params and display it in the console log.

  • Task#18 Load one auction item from the backend and display some fields. Expand the AuctionDataService with the CRUD methods.

  • Task#19 Add view functionality to the auction detail view. Create a HelperService class for the date and time computations.

  • Task#20 Add a layout with a menu and a home page.

  • Task#21 Refactor the project with an auction module and a module specific router.

  • Task#22 Introduce an intelligent mock server.

  • Task#23 Introduce a jwt signing, decoding and verifying service for the mock server.

  • Task#24 Create a user service.

  • Task#25 Create an authentication service. The goal of this task is to create an authentication service, which handles the login and logout procedure.

  • Task#26 Create an alert service

  • Task#27 Build a simple login dialog

  • Task#28 Build a registration dialog

  • Task#29 build a JWT interceptor

  • Task#30 Access a protected resource

  • Task#31 Build a simple can activate guard

Clone this wiki locally