Angular: How to do the Components Architecture the right way?

Cptain_Whitebeard

I'm currently trying to create a Angular-Webpage for a Uni-Project. Therefore i've built up a Webshop-MockUp with several different Pages like

  • Startscreen
  • Productscreen
  • Register/Loginscreen
  • Shopping-Cart Screen
  • Order-Screen
  • and Profile-Screen.

But as I'm now trying to develop the Webshop with Angular, I'm not quite sure, how the Architecture of the Component-Concept of Angular will fit to my needs.

As long as I understand for now it's working like that: You create a Page with several (reusable) Components which all define different areas of one page.

For the example of the Startscreen, i've created the components:

  • hero-banner
  • header
  • filtering
  • product-overview
  • shopping-cart (will be shown on the right side)

These 5 Components can then be added to the app.components.html to show the first page.

But now I have no idea, how to create the other 5 pages and display them inside the app.component.

I've heard about the Routing to switch between components..

But does that mean I have to create one parent-component for every page where I tipe in these different components I've been creating?

And if so, what do I write into the app.component.html if I can Route between the different components anyways?

I just got a big knot in the head right now and I really hope you can help me out here!

Thanks in Advance!

Andrew Allen

Yep parent component for each page to act as manager component to talk to services, get data, and pass it down to dumb components and handle events from child components. Make your children dumb. This is known as container-component.

Yep learn routing. Also lazy load whenever you can but you can refactor this in later.

<router-outlet></router-outlet> goes in app.component.html.

Possibly something like

<app-navbar>
    Text to display via ng-content
</app-navbar> <!-- Common to all routes/pages --!>

<router-outlet></router-outlet>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to design the right structure of Angular components?

How to work with components in Angular in more advance way

How to do two way data stream between parent and child components? (Angular 5)

How to do Test Driven Development right way?

How to do repeatedKfold CV the right way?

How to do instancing the right way in OpenGL.

php how to do include right way

How to do this Lexicography Lc problem the right way

How do I stick to the button right in header using styled components?

Sharing components right with Angular Modules

is this the right way to do a sequence?

Is it the right way to do that?

Using SASS in Vue components the right way

Right way to manage components functionality in React

How is this JavaScript pattern called and how do I use it in the right way?

How to use two way data binding between components in angular 2?

How to implement two way binding for Angular and Polymer web components?

how to decide the best way to communicate between components in Angular 2?

How to share data between controllers in angular app in the right way

How to add plain javascript functions to angular service the right way?

Rails Asset Pipeline precompile, how to do it the right way?

How do you get the contextPath from JavaScript, the right way?

How do I create an array of objects the right way?

Swift: how do I concatenate a [[String]] to a [String] the right way?

How do I dispatch functions in Swift the right way?

WPF - how to do binding the right way for a particular scenario?

How do I implement std::thread the right way with loops?

How to do this the right way? Declaring static object in function

How do I find the right architecture for my fully connected neural network?