Angular render component depending on url - javascript

I have an Angular 9 single page website. This page contain multiple component rendered with angular universal. All blocks are rendered one after another.
Let's say I have these component: header, services, contact, footer.
In my header I have a link to all component as anchor.
To optimize my SEO, I would like to render all block for users, but only the block linked to the anchor for search engine crawlers.
For example,on mywebsite.com/contact :
As an user I would render all component but I would be at the contact anchor.
As a crawler, I would only render header, contact and footer
I searched everywhere but I cant find a way to do that properly, even that it seems like a thing everyone who want to optimize their SEO should do.
Am I missing something or do you have a way to do that ?
EDIT :
By using ng-template I can show one component or all with a condition.
For this condition I need to get the user agent but I cant find a way to get it with Angular Universal.
navigator.userAgent doesn't work since it's the website is rendered by the server.
Since I'm new to Angular I dont know how to get that information. Any help ?

Related

How to add load more pagination to blogposts in homepage on blogger?

I'm using Blogger and trying to make a Blogger speed and SEO friendly template from scratch but I have a problem with the blogposts pagination:-
I want to display all the posts in the same grid with load more posts button but without that big load slowing javascripts so the type of load more posts button that I want is just like mogu template.
No need for links Google it and you'll find it because it's the only blogger template with that name and they have it on the template's home page.
My question here is that any chance to get all posts to display as a grid with a functional load more posts pagination button like the one on mogu template and how to do it without getting big javascripts to slow my blog down ?
Sorry in advance for disturbing because I'm totally a newbie to blogger.
PS: for the Blog1 widget I'm using the default generated code once we type this:-
<b:section id='example'>
<b:widget type='Blog' id='Blog1'/>
</b:section>
Any help would be highly appreciated and thank you for reading
I have tried to use mogu template's Blog1 widget code entirely using the necessary <b:defaultmarkups> to work and it worked except for the load more posts pagination button and after a couple of tests it turns out that the pagination is connected to a hidden javascripts from the template's owners outside the given template's code.
( expected but I just checked it as I thought maybe the load more pagination javascript was there some where in the template). So I don't want to have that slow speed as it's really important for me to make it fast and seo friendly as much as possible and also according to my blog design to make my project works

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

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!
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>

How to create multiple Html subpages without writing redundant code?

everyone currently I am working on a project which a Financial web application. But as I'm moving forward code redundancy is increasing & particularly for HTML code.
I have multiple Html pages on my website such as Dashboard, EditProfile, AccountStatistics, etc. For Eg.
DashBorad - enter image description here
EditProfile - enter image description here
AccountStats - enter image description here
Now judging from the above pics you guys can see every time we navigate from one page to another only the main section content is changing but the body structure & design of the website remains the same.
Problem: If i want to create a new page I have to include code for header, sub-header, sideBar, footer which is repetitive. I just want the main-section code to change. For eg - Made one file like Body.html which contains code for header, sidebar, etc & every time I want to create a new page then only code for the main-section has to written which be can later merge with the body.
How can we achieve this?
(Tech used - Html, Css & JavaScript)
Note: I can also attach code if anyone wants more clear understanding!
Thank You!
Cheers to coding :)
You can use Frontend Frameworks like React/Vue.
Depending on if it's a static site, you can use stuff like Jekyl/Hugo.
If you want to go the SSR way, then you have Angular Universal/ ASP.NET Core/ PHP way.
Depending on your use case, you can't really go wrong either way. If you're new, pick either one and get started Learning.
Have fun!
This is an excellent use-case for a library like ReactJS (and other similar alternatives). Using React you can define 'components' for your header, sidebar and other common parts of your webpages that can be reused in different places. You can also update each of these components separately.

What is the best way to ensure a component's client lib files only load on the page when the component is present?

I'm new to AEM. Currently we have one template for each page on our site. All components have the category "project_name.components" and I am calling the client libs in a header file with:
<sly data-sly-call="${clientLib.css # categories='project_name.components'}" />
<sly data-sly-call="${clientLib.js # categories='project_name.components'}" />
However, I have a breadcrumbs component that isn't on every page, but, as expected, the client libs files for it are showing up regardless and causing some issues with the existing default breadcrumbs's styles/scripts.
I have given the new breadcrumb component a test category name of "project_name.breadcrumbs". Is there a way to use this category name in some type of an if/else statement in the same header file that will only call the breadcrumb client lib files if the breadcrumb has been dragged onto the page?
A few thoughts:
The easiest way is to include the client library as part of the component that uses it rather than including it somewhere else. The downside of this is that the CSS you may want to load early in the HEAD section of a page won't be present until somewhere in the BODY.
If your CSS styling is impacting things it shouldn't, then the CSS styling needs to have sufficient selectors so that it won't break things to which it shouldn't apply. Perhaps you can add a class to the breadcrumbs and make all the styling only be applied to stuff under a tag that has the class. If you changed the CSS this way, it wouldn't negatively affect pages when they don't use the breadcrumb (though it could have a downside of bloating your page footprint if it isn't something that will be loaded and browser cached to be used in the future).
Otherwise, you could add logic that runs at the page level that will examine the node and see which components are included and then add conditional logic to only add the client library when the page is using the component. But that is more back-end work. So you can add the if/else statement as you suggested, but it is up to you to write the code behind it--there is nothing built-in that will conditionally do that check to my knowledge.

navigation bar in single page app using angular

I've tried to find the answer to my problem with no luck. I'm new to web development and I've been trying to create a simple app using angularjs and bootstrap. There's no much content on my pages, only a couple of inputs and buttons that do nothing.
I placed ng-view in the index.html page as I saw in many tutorials and that allows me to navigate to all my pages. I'm trying to add a navigation bar to all my pages once a user logs in, so I placed another ng-view on my home(page after user logs in), but it seems that angular allows only one view for each app. And also it doesn't allow nested app. If I'm wrong, please correct me (that's what I understood from my Google 'research').
So, my question is: how can I add a navigation bar(or any same html content) to all my pages after the user logs in without copying the same code in each html page?
Btw, I had this working with jQuery, but I don't know how to do it using angularjs
Thanks!
You can use Angular Directive that use a template to create a custom tag and you can use a controller only for this directive. Call this tag to all pages when logging.

Categories