How to build website with Angular

Start with Angular starter to learn how work with Angular

Angular Source Code Project Free Download →

Step 1: Install Angular CLI

The Angular CLI is a powerful tool that simplifies the process of creating and managing Angular projects. To install it, use the following command in your terminal:

npm install -g @angular/cli

This command installs the Angular CLI globally on your system.

Step 2: Create a New Angular Project

Navigate to the directory where you want to create your project and run the following command:

ng new your-project-name

You will be prompted to answer a few questions about your project, such as whether you want to include Angular routing and which stylesheet format you prefer. You can accept the defaults by pressing Enter for each prompt.

Step 3: Navigate to Your Project Directory

Once the project is created, navigate into the project directory:

cd your-project-name

Step 4: Run Your Application

To see your application in action, start the development server using:

ng serve

or

npm start

Your application will be served on http://localhost:4200. If another application is using this port, you can specify a different port with:

ng serve --port 4201

Open your browser and navigate to the specified URL to see your application running.

Step 5: Create Components

Components are the building blocks of an Angular application. To create a new component, use the Angular CLI:

ng generate component your-component-name

or use the shorthand:

ng g component your-component-name

This command generates a new folder in the src/app directory with the necessary files for your component, including an HTML template, a CSS file, and a TypeScript file.

Example Component Structure

Here is an example of what a component might look like:

// src/app/your-component/your-component.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

<!-- src/app/your-component/your-component.component.html -->
<div>
  <h1>Your Component</h1>
  <p>This is your component.</p>
</div>

/* src/app/your-component/your-component.component.css */
/* Add your component-specific CSS here */

Step 6: Add Components to Your Application Module

When you generate a component using the CLI, it automatically adds the component to the declarations array in your application module (app.module.ts). Here’s an example:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { YourComponentComponent } from './your-component/your-component.component';

@NgModule({
  declarations: [
    AppComponent,
    YourComponentComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 7: Use Components in Your Templates

To display your component in the application, you need to include its selector in one of your templates. For example, you can add it to the main app.component.html file:

<!-- src/app/app.component.html -->
<app-your-component></app-your-component>

Step 8: Implement Routing (Optional)

If you want to navigate between different pages in your application, you need to set up routing. You can generate a routing module using:

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

Then, define your routes in the app-routing.module.ts file:

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { YourComponentComponent } from './your-component/your-component.component';

const routes: Routes = [
  { path: 'your-component', component: YourComponentComponent }
];

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

And include the routing module in your application module:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { YourComponentComponent } from './your-component/your-component.component';
import { AppRoutingModule } from './app-routing.module';

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

Step 9: Add Styling and Theming

You can add global styles to your application by editing the styles.css file. For example, to include an Angular Material theme:

/* src/styles.css */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

You can also add component-specific styles in the CSS files generated for each component.

Step 10: Test and Deploy Your Application

Before deploying your application, make sure to test it thoroughly. You can run unit tests and end-to-end tests using the commands:

ng test
ng e2e

To deploy your application, you can use various methods such as deploying to a server, using a CDN, or integrating with a CI/CD pipeline. Here is a simple way to build your application for production:

ng build --prod

This command generates a production-ready build of your application in the dist directory.

By following these steps, you can create a fully functional website using Angular, leveraging its powerful features and tools to build a robust and scalable web application.

Angular Source Code Project Free Download →