Kickstarting Your Angular Journey: Creating a New Project with a Sample Hello World Application

Introduction

Angular, the powerful open-source framework from Google, is an excellent choice for creating dynamic and scalable web applications. Angular uses TypeScript, a statically-typed superset of JavaScript, making your code more robust and manageable. In this blog post, we will guide you through creating a new Angular project and building a simple Hello World application.

Prerequisites

Ensure you have these prerequisites installed:

1. Node.js and npm (Node Package Manager) : Node.js version 10.9.0 or later and npm (which comes with Node.js) are necessary for managing Angular dependencies.

2. Angular CLI : The Angular Command Line Interface (CLI) streamlines the process of initializing, developing, scaffolding, and maintaining Angular applications. Install it globally using npm:

codenpm install -g @angular/cli 

Creating a New Angular Project

Once you have the prerequisites set up, you can create a new Angular project by following these steps:

1. Open a new terminal window and navigate to the directory where you want to create your new project.

2. Run the following command to create a new Angular project. Replace my-app with your desired project name.

codeng new my-app 

3. The CLI will prompt you with a couple of questions:

   • Would you like to add Angular routing? Routing enables navigation from one view to another as users perform tasks in your application. For now, you can choose "Yes" if you plan on adding multiple pages to your app.

   • Which stylesheet format would you like to use? You can choose between CSS, SCSS, SASS, LESS, or Stylus. Choose the one you're most comfortable with.

4. After answering the prompts, Angular CLI will set up a new project with your chosen configuration and install the necessary npm packages. This process might take a few minutes.

Exploring the Project Structure

Angular CLI creates the initial directory structure for your project. Navigate into the project directory (e.g., cd my-app ), and you'll find a setup similar to this:

• e2e/ : Contains end-to-end tests.
• node_modules/ : Contains the npm packages for the tools and libraries your project depends on.
• src/ : Holds your application's source code. Your Angular components, templates, styles, images, and anything else your app needs go here. It also contains the main TypeScript file ( main.ts ) that bootstraps your application.
• .editorconfig : Configuration for your code editor.
• .gitignore : Specifies the files that Git should ignore.
• angular.json : Angular CLI configuration file.
• package.json : Lists the package dependencies for your project.
• README.md : Basic documentation for your project.
• tsconfig.json : TypeScript compiler configuration file.

Creating a Simple Hello World Application

Let's build a simple Hello World application using our new Angular project:

1. Navigate to src/app/app.component.ts and modify the AppComponent class as follows:

codeimport { Component } from '@angular/core'; 
        
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'Hello, World!'; 
} 

2. Next, replace the content of src/app/app.component.html with the following code:

code<div style="text-align:center"> 
    <h1> 
        { {title}} 
    </h1> 
</div> 

In the HTML code, { {title}} is a binding to the title property defined in the AppComponent class.

Serving Your Application

To serve your application, use the Angular CLI command:

codeng serve 

Navigate to http://localhost:4200/ in your web browser. You should see the message: "Hello, World!"

Conclusion

Congratulations! You've just set up a new Angular project and created a simple "Hello, World!" application. Although this application is simple, it forms a strong foundation for a more complex application. Angular is a powerful framework for building complex web applications, and we have only scratched the surface. In future blog posts, we'll delve deeper into Angular and build more complex applications. Stay tuned!