•Create a new Angular project called

• Create a header component and a footer component

 Format both header and footer components (tags to be used; ex. h1 and h3) to the same formatting in regard to background and text colour plus any other formatting of your choice; You can format each .css for header and footer or use the [login to view URL] to create global styles for your tags

• Create a file in the app folder called [login to view URL] in the app folder. In this file, create a class called YourLoginName that includes the following definition with your choice of label and type (see [login to view URL] file in our in-class example as a reference):

 Your student number, your name, your login name, your campus, and assignment title

 In both the header and footer component .ts files, import and create a variable to fill in the class data with your information.

Note: For this task, you will duplicate the data in the header and footer components; we will learn later how to set it once and use in multiple components

 In the header component html file, use string interpolation from your personal class data to display task title / your name in an HTML header tag (not hard-coded).

 In the footer component html file, use string interpolation from your personal class data to display your name / your student number / your login name / your campus in an HTML header tag (not hard-coded)

 Note: You may need to stop the node server and start up again after creating a class. Use Ctrl+C to terminate batch job then "ng serve" again after class file is created.

• Be sure to update your [login to view URL] with the components you want to display

• Create another .ts (example: [login to view URL]) file in your app folder to hold another class for books that will include the following definition (your choice of file name and class name):

 book name / author / genre / year published / picture

• Create a data file (hard-coded) called myBooks.ts. Create data for 4 of your favourite books with the data from the class created (use [login to view URL] in our in-class exercise for reference)

 Note: Pictures will need to be included in the images folder created for the default setup. The picture itself can be anything you want.

• Create a component called detail. Create a structure using a grid-area that include a navigation section that goes across the screen with 2 areas (one on the left and one on the right) under the navigation section. One side will hold a picture and the other will hold book details. For Portrait mode, display all sections vertically (Navigation on top of picture on top of book details)

• Be sure to import your book data into the [login to view URL] and setup a variable to hold the data (see [login to view URL] in our in-class project for reference)

• In the [login to view URL], setup a directive (*ngFor) to create 4 buttons for the 4 books in the nav section; be sure to include an index so you can capture which is selected so you can display detail data and the picture from the data file based on the button clicked; also be sure to include a (click) event to call a function to find correct book data.

• Note: Use *ngFor not only with list items (as we did in our in-class exercise) but also with buttons or any other HTML tag (NO hard-coding).

AngularJS Mobile App Development Web Development AJAX HTML5

ID do Projeto: #26781567

Sobre o projeto