Consider the following mock-up as the landing experience for LemonMart:
LemonMart Landing Experience
Unlike the LocalCastWeather
app, we don't want all this markup to be in the App
component. The App
component is the root element of your entire application; therefore, it should only contain elements that will persistently appear throughout your application. In the following annotated mock-up, the toolbar marked as 1
will be persistent throughout the app.
The area marked as 2
will house the home component, which itself will contain a login user control, marked as 3:
LemonMart Layout Structure
It is a best practice to create your default or landing component as a separate element in Angular. This helps reduce the amount of code that must be loaded and logic executed in every page, but it also results in a more flexible architecture when utilizing the router:
Generate the home
component with inline template and styles:
$ npx ng g c home -m app --inline-template --inline-style...