This project is designed to use the Angular framework as well as your previous knowledge of...
Fantastic news! We've Found the answer you've been seeking!
Question:
Transcribed Image Text:
This project is designed to use the Angular framework as well as your previous knowledge of HTML, CSS and JS. The goal of this project is for you to practice using modules, components, templates, services, directives, and routing in Angular. In this project, you are asked to create a single-page retail store application using Angular. This app includes a header, a footer, a navigation sidebar on the left part of the page and a content page showing different component views based on the selected URL. Header (logo, time, name of the webpage, home page link) Depend on the url o List of 10 items if the url is /items (each item have a name, price, picture) Detailed information about selected item if the url is /item/:item_id (having more information about the product) Footer (contact information, ...) As always, using CSS to style your work to appeal to the user is very important. (It is considered a feature with 20-30 percent weight) The single-page application you design should include: A header including an app logo+name on the left and the current date+home button on the right part. A Footer including copyright symbol and a sentence like ( All rights reserved, 2022.) + contact information. A content part which changes based on what the URL is. ● ● ● When URL is "/items", the user expects to see a list of products (10 is enough) and some minimal information (pic, name, price, description) about them. You can use a static list of information like what we used in our HEROES app for the information and load it asynchronously for the component. There is a more chance for the customer to buy a recently visited product, so if a customer visits a specific product detail more than the other products, it should be the first in the loaded product list shown on this page. In other words, the loaded product list should be sorted based on the times this user visited each product detail. (hint: you need a counter in your ProductLoaderService for each product) You should redirect the user to the "/items" URL if no URL is provided. The home button, which should be in the header, sends the user to the "/items" page. When one of the products is clicked, the app should send the user to the URL "/items/:id" which the id value is the id of the selected product. On this page, users like to see a detailed version of product info with a bigger picture. Pay attention ● Before starting coding, design your SPA on paper. Think about the structure of your application, such as the number of modules and components in each module. What properties and methods might you need in each component. For example, you need different components for the header, footer, and content. You need various components for the item list and item detail. What are the other components you may need? Should you put all these components in one module or more than one module? What about the Services you need? Once confident you have a good design, start breaking down the work for different team members. If adding an image is hard, do it as the last feature. If sorting is hard, do it as the last feature. ● ● ● ● In creating your application, if you need to use more elements than explained in the lectures, use "angular.io" and "w3schools.com". Use your creativity in designing and implementing the project. Remember, except for only two lines of code which you should figure it out yourself; you almost have everything this project needs in the eclass example project. (understanding the example can make your job much easier) This project is designed to use the Angular framework as well as your previous knowledge of HTML, CSS and JS. The goal of this project is for you to practice using modules, components, templates, services, directives, and routing in Angular. In this project, you are asked to create a single-page retail store application using Angular. This app includes a header, a footer, a navigation sidebar on the left part of the page and a content page showing different component views based on the selected URL. Header (logo, time, name of the webpage, home page link) Depend on the url o List of 10 items if the url is /items (each item have a name, price, picture) Detailed information about selected item if the url is /item/:item_id (having more information about the product) Footer (contact information, ...) As always, using CSS to style your work to appeal to the user is very important. (It is considered a feature with 20-30 percent weight) The single-page application you design should include: A header including an app logo+name on the left and the current date+home button on the right part. A Footer including copyright symbol and a sentence like ( All rights reserved, 2022.) + contact information. A content part which changes based on what the URL is. ● ● ● When URL is "/items", the user expects to see a list of products (10 is enough) and some minimal information (pic, name, price, description) about them. You can use a static list of information like what we used in our HEROES app for the information and load it asynchronously for the component. There is a more chance for the customer to buy a recently visited product, so if a customer visits a specific product detail more than the other products, it should be the first in the loaded product list shown on this page. In other words, the loaded product list should be sorted based on the times this user visited each product detail. (hint: you need a counter in your ProductLoaderService for each product) You should redirect the user to the "/items" URL if no URL is provided. The home button, which should be in the header, sends the user to the "/items" page. When one of the products is clicked, the app should send the user to the URL "/items/:id" which the id value is the id of the selected product. On this page, users like to see a detailed version of product info with a bigger picture. Pay attention ● Before starting coding, design your SPA on paper. Think about the structure of your application, such as the number of modules and components in each module. What properties and methods might you need in each component. For example, you need different components for the header, footer, and content. You need various components for the item list and item detail. What are the other components you may need? Should you put all these components in one module or more than one module? What about the Services you need? Once confident you have a good design, start breaking down the work for different team members. If adding an image is hard, do it as the last feature. If sorting is hard, do it as the last feature. ● ● ● ● In creating your application, if you need to use more elements than explained in the lectures, use "angular.io" and "w3schools.com". Use your creativity in designing and implementing the project. Remember, except for only two lines of code which you should figure it out yourself; you almost have everything this project needs in the eclass example project. (understanding the example can make your job much easier)
Expert Answer:
Answer rating: 100% (QA)
Answer Please do comment if any doubt in that a HTML CSS and JavaScript are the basics of web develo... View the full answer
Related Book For
Research Methods For Business Students
ISBN: 9781292208787
8th Edition
Authors: Mark Saunders, Philip Lewis, Adrian Thornhill
Posted Date:
Students also viewed these programming questions
-
Nuclear reactor uses 'moderator' materials such as graphite to to eliminate thermal neutrons to reduce the speed of fast neutrons increase the number of fast neutrons to cause -235 to split ?Explain
-
Planning is one of the most important management functions in any business. A front office managers first step in planning should involve determine the departments goals. Planning also includes...
-
Googles ease of use and superior search results have propelled the search engine to its num- ber one status, ousting the early dominance of competitors such as WebCrawler and Infos- eek. Even later...
-
In Problems 4358, (a) Find the vertex and the axis of symmetry of each quadratic function, and determine whether the graph is concave up or concave down. (b) Find the y-intercept and the...
-
In its first month of operations, Cisler Company made three purchases of merchandise in the following sequence: (1) 300 units at $6, (2) 400 units at $8, and (3) 500 units at $9. Assuming there are...
-
Give the type of colloid (aerosol, foam, emulsion, sol, or gel) that each of the following represents. a. Rain cloud b. Milk of magnesia c. Soapsuds d. Silt in water
-
a. Two balls move as shown in Figure Q27.3. What are the speed and direction of each ball in a reference frame that moves with ball 1 ? b. What are the speed and direction of each ball in a reference...
-
Safe Travel produces car seats for children from newborn to 2 years old. The company is worried because one of its competitors has recently come under public scrutiny because of product failure....
-
A "six-sigma" capable process is pursued by many electronics manufacturers. Consider a mobile phone accessory manufacturer that produces a power supply in a production process. The specification for...
-
The cash account for Highlander Diamond Co. on April 1, 20Y5, indicated a balance of $35,400. During April, the total cash deposited was $120,255, and checks written totaled $109,200. The bank...
-
What is the VARO
-
Hank Allbright purchased a previously owned, two year old Ford Taurus for $8,900. Since he purchased the car, he has already invested the following amounts in the car: New stereo system New high...
-
Internal Audit Can Play An Important Role In Corporate Governance. Explain
-
A company is depreciating 9 8 8 0 0 0 building using a straight - line rate of 5 % . The building has an estimated residual value of 1 9 7 6 0 0 . what would the amount depreciation be in the first...
-
Credit Suisse In Crisis Switzerland's second-largest bank and the world's eighth-largest bank, Credit Suisse is on the verge of collapsing. How did Credit Suisse's situation got out of hand? In 2022...
-
You owe $7,000 to a credit card. You decide to pay more than the minimum required and you want to repay the balance in 60 months. The loan charges an interest rate of 1.3% every month. What is the...
-
Question 1 (40 marks) The Income And Expenditure Account of Woodbine Country Club for the year ended December 31, 2021 and the Balance Sheet as at December 31, 2021 are as follows: Bar Sales Less:...
-
Which task is performed by a book-keeper? A. Analysing the trading results B. Entering transactions in the ledger C. Preparing year-end financial statements D. Providing information for...
-
Look through several of the academic journals that relate to your subject area. Choose an article which is based upon primary research. Assuming that the research question and objectives are not made...
-
What are the advantages of using semi-structured and in-depth interviews?
-
You have been granted access to conduct observation in the department of an organisation where you previously undertook a work placement. You are considering seeking permission to video-record some...
-
In the cooling tower of Example 8.7, to what temperature would the water be cooled if, after the tower was built and operated at the design water and air rates, the air entered at a dry-bulb...
-
Water is to be cooled at the rate of \(10 \mathrm{~kg} / \mathrm{s}\) from \(317 \mathrm{~K}\) to \(300 \mathrm{~K}\) in a countercurrent cooling tower under conditions such that \(H_{t O G}=2.5...
-
Modify the Mathcad program developed in Problem 3.16 to estimate the minimum gas flow rate in strippers so that it can be used to estimate the minimum air flow required for water cooling. Test your...
Study smarter with the SolutionInn App