Comprehensive Angular CLI Tutorial

You are currently viewing Comprehensive Angular CLI Tutorial

Comprehensive Angular CLI Tutorial

Angular CLI (Command Line Interface) is a powerful tool for initializing, developing, scaffolding, and maintaining Angular applications. In this comprehensive tutorial, we’ll cover everything you need to know to get started with Angular CLI. We’ll walk through installation, project creation, generating components, services, routing, building, and deploying an Angular application.

Table of Contents

  1. Installing Angular CLI
  2. Creating a New Angular Project
  3. Understanding Project Structure
  4. Generating Components and Services
  5. Adding Routing to the Application
  6. Building the Application
  7. Deploying the Application
  8. Conclusion

1. Installing Angular CLI

Before you can start using Angular CLI, you need to have Node.js and npm (Node Package Manager) installed on your machine. To install Angular CLI globally, open your terminal and run:

npm install -g @angular/cli

This command installs Angular CLI globally, allowing you to access it from any directory.

2. Creating a New Angular Project

Once Angular CLI is installed, you can create a new Angular project with a simple command:

ng new my-angular-app

This command will create a new Angular project named my-angular-app in a directory of the same name. It will prompt you to choose additional features like routing and CSS preprocessor. For this tutorial, we’ll keep the defaults.

Navigate into your new project directory:

cd my-angular-app

3. Understanding Project Structure

When you create a new Angular project using Angular CLI, it generates a basic project structure for you. Here’s a brief overview:

  • src/: Contains the source code for your Angular application.
  • app/: Contains the components, services, and other modules.
  • assets/: Contains static files like images, fonts, etc.
  • environments/: Contains environment-specific configurations.
  • angular.json: Angular CLI configuration file.
  • package.json: Contains project dependencies and scripts.
  • tsconfig.json: TypeScript configuration file.

4. Generating Components and Services

Angular CLI provides commands to generate components, services, modules, and more. Let’s generate a new component and service:

Generating a Component

ng generate component hello-world

This command creates a new component named HelloWorldComponent in the app directory. It also updates the necessary module file (app.module.ts) to include the new component.

Generating a Service

ng generate service data

This command creates a new service named DataService in the app directory.

5. Adding Routing to the Application

Angular applications often use routing for navigating between different views. Let’s add routing to our application:

Generate Routing Module

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

This command generates a new module named AppRoutingModule and adds it to the app module (app.module.ts). The --flat flag tells Angular CLI not to create a new folder, and --module=app specifies the module to import the routing module into.

Define Routes

Edit src/app/app-routing.module.ts to define your routes:

// src/app/app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';

const routes: Routes = [
  { path: '', component: HelloWorldComponent },
  // Add more routes here if needed
];

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

Update App Module

Make sure to import and include AppRoutingModule in src/app/app.module.ts:

// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world/hello-world.component';

@NgModule({
  declarations: [
    AppComponent,
    HelloWorldComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. Building the Application

To build your Angular application, run the following command:

ng build

This will compile your application into the dist/ directory. You can also specify a production build with the --prod flag:

ng build --prod

7. Deploying the Application

To deploy your application to a hosting server, you can use the contents of the dist/ directory. For example, if you’re using GitHub Pages:

  1. Build your application for production:
ng build --prod
  1. Deploy to GitHub Pages:
ngh --dir=dist/my-angular-app

This assumes you have angular-cli-ghpages installed (npm install -g angular-cli-ghpages). Adjust the paths and commands as needed for your hosting platform.

8. Conclusion

Congratulations! You’ve completed a comprehensive Angular CLI tutorial. You learned how to install Angular CLI, create a new Angular project, generate components and services, add routing to your application, build the application, and deploy it to a hosting server.

Angular CLI is a powerful tool that streamlines the development

process for Angular applications. As you continue to work with Angular, explore additional features and commands provided by Angular CLI to further enhance your development workflow.

Additional Resources:

Leave a Reply