{"id":59862,"date":"2018-05-03T15:22:01","date_gmt":"2018-05-03T09:52:01","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59862"},"modified":"2024-04-12T14:20:49","modified_gmt":"2024-04-12T08:50:49","slug":"angular-router-imports","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-router-imports\/","title":{"rendered":"Angular Router Imports"},"content":{"rendered":"

Angular Router Imports<\/h1>\n

The Angular Router is what makes an Angular Application a Single Page Application, or SPA. For learning all about the benefits of the SPA architecture, have a look at this post.<\/p>\n

The first thing that we should do is simply write some routing configuration. What we are doing in this initial configuration is to map certain URL paths to Angular components: meaning that if there is a path match then the component gets displayed:
\nexport const routeConfig:Routes = [
\n{
\npath: ‘home’,
\ncomponent: Home
\n},
\n{
\npath: ‘lessons’,
\ncomponent: AllLessons
\n}
\n];<\/p>\n

This configuration means:<\/p>\n

if you navigate to \/home then the Home component gets displayed
\nif you navigate to \/lessons then AllLessons component gets displayed
\nand if you navigate elsewhere you are going to get an error<\/p>\n

But where do these components get displayed?
\nConfiguring a primary router outlet<\/p>\n

Once the router has a URL match, it will try to display the corresponding matching components. for that it will look in the template for a router-outlet component:
\n@Component({
\nselector:’app’,
\ntemplate: `
\n<main>
\n<router-outlet><\/router-outlet>
\n<\/main>
\n`
\n})
\nexport class App {
\n…
\n}<\/p>\n

Router outlet is a dynamic component that the router uses to display in this case either the Home or the AllLessons components. There is nothing special about these components, these could be any component.
\nBootstrapping the router<\/p>\n

To finish the setup of the router, we also need to add its directives and injectables into the Angular bootstrap system. We do so by importing the RouterModule into the application root module:
\nimport {RouterModule} from “@angular\/router”;
\nimport {BrowserModule} from “@angular\/platform-browser”;
\nimport {RouterModule} from “@angular\/router”;<\/p>\n

@NgModule({
\ndeclarations: [App],
\nimports: [BrowserModule, RouterModule.forRoot(routeConfig)],
\nbootstrap: [App]\n})
\nexport class AppModule {
\n}<\/p>\n

platformBrowserDynamic().bootstrapModule(AppModule);<\/p>\n

Notice that we configure the module by using the forRoot function instead of simply adding the RouterModule. To learn more about why this is necessary, have a look at this other post on @NgModule.<\/p>\n

With this, if we access the \/home or \/lessons URLs, we would get the corresponding component displayed.<\/p>\n

But here is where for new users of the router things might start to go wrong.<\/p>\n

 <\/p>\n

IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n

\"\"<\/a><\/p>\n