Course Content
ANGULAR Tutorial
About Lesson

Creating a new Angular project

Angular, a powerful and versatile framework for building dynamic web applications, offers a streamlined process for initializing new projects. Let’s explore the essential steps to kickstart your Angular journey by creating a new project.

Step 1: Installing Angular CLI

Angular CLI (Command Line Interface) simplifies project creation and management. Ensure you have Node.js installed, then open your terminal or command prompt and install Angular CLI globally:

npm install -g @angular/cli

Step 2: Generating a New Angular Project

Navigate to the directory where you want to create your Angular project. Use Angular CLI’s ng new command followed by your project name:

ng new my-angular-project

Step 3: Project Configuration

Angular CLI provides a set of prompts to configure your project:

  • Routing: Choose whether to set up Angular routing for navigation between pages.
  • Stylesheet Format: Select between CSS, SCSS, SASS, Less, or Stylus for styling your project.

Step 4: Running the Development Server

Move into your newly created project directory:

cd my-angular-project

Launch the development server using Angular CLI’s ng serve command:

ng serve

Visit http://localhost:4200 in your web browser to view your Angular application running locally.

Step 5: Exploring the Project Structure

Your Angular project structure comprises various folders and files:

  • src: Contains the source code of your application.
  • app: The main folder where you’ll build your application components.
  • index.html: The entry point HTML file.
  • main.ts: The main TypeScript file where the application gets bootstrapped.

Step 6: Additional Configurations (Optional)

  • IDE or Code Editor: Utilize preferred code editors like Visual Studio Code, Atom, or WebStorm for a smoother development experience.
  • Dependencies and Packages: Install additional packages or libraries using npm if needed for your project