Menu
I have an Angular project with 3 components country, region, home. When I load the home page, I have route setup to HomeComponent, which hyperlinks for routes. Everything works just fine and behaving like a single page (SPA). Now, I want to add a static HTML page and route to it. I looked at Angular Route documentation, I couldn't find a way to do this. Here are the questions I have
app-routing.module.ts Github Repository: SpringTestingUI
305
You can navigate one to another page in Angular in Two ways. (both are same at wrapper level but the implementation from our side bit diff so.) routerLink directive gives you absolute path match like navigateByUrl() of Router class.
import { RouterModule} from '@angular/router' RouterModule refers to the forRoot which takes an input as an array, which in turn has the object of the path and the component. Path is the name of the router and component is the name of the class, i.e., the component created.
First, add links to the two components. Assign the anchor tag that you want to add the route to the routerLink attribute. Set the value of the attribute to the component to show when a user clicks on each link. Next, update your component template to include <router-outlet> .
Angular Routinglink To handle the navigation from one view to the next, you use the Angular Router . The Router enables navigation by interpreting a browser URL as an instruction to change the view.
A little late on this one, was googling around for an Angular to static html generator and came across this and figured I'd pop in. I actually learned how to do this exact thing today.
A static html page is basically no different than another static asset such as a stylesheet or image, so we can treat those pages the exact same.
Following the Angular asset configuration docs, we can create our html files and reference them in the application through the .angular-cli.json or angular.json as appropriate.
One thing I found particularly useful was being able to manually configure the reference path for the html page when it is resolved by the browser.
For example if we have a html in the directory src/static-pages/page1.html, by default if you add that path to the assets section of your angular.json, it will exist at the route http://hostname/static-pages/page1.html. Angular allows you to change the resolve path for this asset to be whatever you want by providing a few extra pieces of information into the assets section when referencing your static html or other asset.
Ex:
// angular.json
{
...
"assets": [
// This page is routed /static-pages/page1.html
"src/static-pages/page1.html",
// This page is routed /home/page1.html
{ "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
],
...
}
The main difference between doing this and creating a visual component that only renders static html, is that this allows a web crawler to index that html page. If you simply just want to render static html text, I would create an additional SPA component in Angular, and do the routing as normal in your HomeComponent.
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
