Building Your First Angular Application

Overview

If you are new to angular, had done setup and eager to start building your first web app, this article will guide you through the process, step by step.

Prerequisites

Before diving into Angular development, make sure you have setup the development environment and have installed angular CLI. If you didn't then visit the previous article where I given the detailed steps to setup the development environment.

Create a New Angular Project

Since we already installed Angular CLI, we can now create a new Angular project by running the following command:

ng new my-angular-project

Replace my-angular-app with your preferred project name.

Now it will prompt you to choose various project configuration options, such as whether to include Angular routing and which stylesheet format to use (CSS, SCSS, etc.). 

image-3.png

Navigate to Your Project Folder

Use the cd command to navigate to the newly created project folder:

cd my-angular-project

Serve Your Angular Application

To run your Angular Application in a development server and see it in action, use the command:

ng serve

This command compiles your Angular app and launches a local development server. You will see output indicating that the app is running, typically at http://localhost:4200/.

image-4.png

Explore Your Angular Application

Open your web browser and navigate to http://localhost:4200/. You will see you Angular app's default homepage.

Angular CLI generates a basic project structure with sample components and templates, allowing you to start coding immediately. You can explore and modify the code in the src directory, particularly the app subdirectory, which contains the core components and templates of your application.

image-5.png

 

Conclusion

Congratulations! You have successfully created your first angular application. This is just the beginning of your Angular journey. As we go through the course we will explore advanced topics like routing, services, forms, and much to build powerful and feature-rich web applications.

Happy Coding!