Ng Create New Project With Routing

6 min read Oct 15, 2024

Creating a New Project with Routing in Angular

Angular is a powerful JavaScript framework that makes building web applications easier and more efficient. A fundamental aspect of most web applications is routing, which allows users to navigate between different views or pages within the application. In this article, we will delve into how to create a new Angular project and incorporate routing from the beginning.

1. Getting Started with Angular

To begin, make sure you have Angular CLI installed on your system. If you haven't already, you can install it using npm:

npm install -g @angular/cli

Once you have Angular CLI installed, creating a new project is a simple process. Open your terminal or command prompt and run the following command:

ng new my-routing-app

Replace my-routing-app with your desired project name. The command will create a new Angular project directory with the specified name.

2. Setting Up Routing

Now, let's create the routing module. Navigate to your project directory using the command:

cd my-routing-app

Then, generate a routing module:

ng generate module app-routing --flat --module=app

This command will create a file named app-routing.module.ts within your project's app directory. This module will define the routes of your application.

3. Defining Routes

Open the app-routing.module.ts file and modify its content to include the following code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

In this code:

We import RouterModule and Routes from the @angular/router package.
We create an array of routes called routes.
The first route path: '' specifies the default route, which will be loaded when the application starts.
The second route path: 'about' defines a route for the AboutComponent.

Note: Make sure to create the HomeComponent and AboutComponent files within the app directory if they don't already exist.

4. Importing the Routing Module

To use the routing module, you need to import it into the AppModule. Open the app.module.ts file and add the following import:

import { AppRoutingModule } from './app-routing.module';

Then, include AppRoutingModule in the imports array:

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Navigating Between Routes

With the routing setup in place, you can now navigate between the different routes in your application. In your components, you can use the routerLink directive to create links that will trigger navigation.

For example, in your HomeComponent template (home/home.component.html), add the following to link to the AboutComponent:

About Us

6. Additional Routing Features

Angular routing offers a range of features to enhance your navigation functionality:

Route Parameters: You can use parameters to pass dynamic data to routes.
Child Routes: Define nested routes within a parent route for complex navigation structures.
Route Guards: Control access to routes based on specific conditions.
Lazy Loading: Load modules only when they are needed, improving application performance.

Conclusion

Creating a new Angular project with routing is a straightforward process. By following these steps, you can establish a solid foundation for a well-structured and user-friendly application. Understanding routing is essential for building complex web applications with Angular, enabling smooth navigation and data management.