Installation and Set up of an Angular Application
Explore how to install and set up an Angular application with detailed steps for local machine installation using Angular CLI as well as using the Educative platform's pre-configured environment. Understand how to create projects, manage routing options, and start the Angular development server.
We have two options available for setting up and installing our Angular application. We can do that on our local machine or through the Educative platform.
Setup on the local machine
To set up an Angular application locally, we need to take the following steps:
Step 1: Install the Angular CLI using a terminal
We need Node downloaded and installed on our local machine to install the Angular CLI.
Once we do that, we can then run the command npm install -g @angular/cli .
Step 2: Create a new Angular project
To create a new project, we can run this command in our terminal:
ng new test
We will get asked to answer a couple of prompts that will allow us to select either yes or no. The first prompt is about the routing option, while the second prompt is about the styling option.
Step 3: Navigate to the project directory
We can navigate to the directory where the Angular project is located by running the command cd test.
Step 4: Start the server and load application
We can start up and compile the Angular project by running the command ng serve
.
Set up using the educative platform
Luckily for us, Educative has a way to directly interact, set up, and run an Angular application.
We do not need to do any setup from the terminal. All the dependencies have already gotten installed. We have to press the RUN button, and our Angular app will run inside the unique environment within the browser.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }