The APP_BASE_HREF
token represents the base “href” to
be used with the PathLocationStrategy.
The APP_BASE_HREF
token is available when using JIT runtime and APP_BASE_HREF token represents the base “href” and it’s used with the PathLocationStrategy.
If you are using the PathLocationStrategy that means you must provide a provider to a
string representing the URL prefix.
The URLs prefixes are strictly local in Angular
Apps and router navigates to the new component and renders its template and
also updates the history and URL for the view. These all happens in the browser
locally.
Angular supports two Location Strategies and its
looks like -
ü When
you are using HashLocationStrategy that means the URL looks like-“http://localhost:9099/#/user”
ü When
you are using PathLocationStrategy that means the URL looks like-“http://localhost:9099/user”
Example
– Using the APP_BASE_HREF token
import
{Component, NgModule}
from '@angular/core';
import
{APP_BASE_HREF} from
'@angular/common';
@NgModule({
providers: [{provide:
APP_BASE_HREF, useValue:
'/my/app'}]
})
class
AppModule {}
The PathLocationStrategy
is a LocationStrategy used to
configure the location service to represent its state in the path of the
browser's URL.
The PathLocationStrategy is the default strategy
in Angular apps.
<base
href="/">
The HashLocationStrategy supported by all browsers.
This is the great advantages and it will not support server side rendering.
This is the disadvantage.
The Location Strategy is recommended to use the
HTML 5 style as your location strategy.
Example
– Using the PathLocationStrategy and LocationStrategy
import
{Location, LocationStrategy,
PathLocationStrategy}
from '@angular/common';
import
{Component} from
'@angular/core';
@Component({
selector: 'location-strategy',
providers: [Location,
{
provide:
LocationStrategy,
useClass:
PathLocationStrategy}
],
template: `The
Current URL Is - <span>{{PathLocation.path()}}</span>`
})
export
class LocationStrategyComponent
{
PathLocation: Location;
constructor(location:
Location) {
this.PathLocation
= location;
}
}
I hope you are enjoying with this post! Please share with you friends. Thank you!!