What is Angular Routing?

I'm new to this topic. In my linuxmint 17, I'm trying to start creating Firebase web app using Angular CLI. It asks me about Angular routing.

What is Angular routing? What do I have to answer?

64150 次浏览

The Angular Router enables navigation from one view to the next as users perform application tasks.

Check https://angular.io/guide/router for more details about routing in Angular.

If you say "Yes" then CLI will automatically add router configuration to your project.

Angular routing enables navigation from one view to another as user perform task. It will route(navigate)you as per your instruction. Ex.If you want to go from page1 to page2 on button click then route will help you.

Read angular documentation. https://angular.io/guide/router

You can try this ..

ng new demo-app --routing --style=sass

Which will add the routing module and set the style to sass ahead-of-time, so it will just do it without asking.

Note: you can also add --strict to avoid it asking for stricter type checking ng new demo-app --routing --style=sass --strict

As they already said, routing enables navigation to different views of your application. It is the main way of taking users to different destinations within the web app. From home page to the contact page, for example, you need a route, meaning a path or a way to take you there.The concept is not particular to Angular. You see this approach in most of the MVC frameworks (ASP.Net, Ruby on Rails, Django, Laravel, etc)

What you should answer. Answer yes. You are starting so it is good because you will have a basic structure to start. As you mature, you will able to set your own routes and manage them using middlewares

If you are creating an Angular project with the latest CLI, It asks you for adding angular routing to your project, which is a newly introduced feature by Angular CLI. If you type 'Y' while creating a project it adds 'app-routing.module.ts' otherwise no such file will be added. But routing feature will be embedded in the 'app.module.ts' file.

So both options will not affect much when you are a fresher to the Angular. Once you learn Angular Routing concept you will be having a better Idea.

For more information about Angular Routing visit angular official routing document.

You can also try this

ng new app --routing

Angular applications are built as a hierarchy of components (or a tree of components) that communicate with each other using inputs and outputs. A component controls a patch of the screen which is rendered using the component’s template specified as a meta-information in the @Component decorator.

A @Component decorator marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

Angular routing allows having multiple views mapped to URLs thanks to the Angular router which is an essential element of the Angular platform. It allows developers to build Single Page Applications with multiple states and views using routes and components and allows client-side navigation and routing between the various components. It’s built and maintained by the core team behind Angular development and it’s contained in the @angular/router package.

Routing in Angular is also referred to as component routing because the Router maps a single or a hierarchy of components to a specific URL.

Angular routing is the method to direct the users to the relevant page that they want to perform their actions. In other words, There may be multiple components in a single angular app. Routing is the way to implement the connection between those components. If you say yes Angular will add app-routing.module.ts file to your app folder. You can add your component information and URL settings to that file as below example.

import { Routes, RouterModule } from '@angular/router';
import { AdminOrganizationComponent } from './admin-organization/admin-organization.component';
import { LoginComponent } from './login/login.component';


const routes: Routes = [
{
path: '',
component: LoginComponent,  //Go to login page
},
{
path: 'organizations',
component: AdminOrganizationComponent, //Go to organization page
},
{ path: '**', redirectTo: 'login', pathMatch: 'full' } //If path is not match to, redirect to login page
];


@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}

At the basic level, routing allows angular to display different "pages" or components. You probably want to have it, if you want to navigate across pages in your application. It shouldn't hurt anything if you add it, but don't use it. You're app will just be marginally larger.