{"id":14382,"date":"2025-05-15T19:32:21","date_gmt":"2025-05-15T19:32:21","guid":{"rendered":"https:\/\/kmfinfotech.com\/blogs\/creating-your-first-angular-application-a-beginners-tutorial\/"},"modified":"2025-05-15T19:32:21","modified_gmt":"2025-05-15T19:32:21","slug":"creating-your-first-angular-application-a-beginners-tutorial","status":"publish","type":"post","link":"https:\/\/kmfinfotech.com\/blogs\/creating-your-first-angular-application-a-beginners-tutorial\/","title":{"rendered":"Creating Your First Angular Application: A Beginner\u2019s Tutorial"},"content":{"rendered":"


\n<\/p>\n

<\/header>\n

<\/p>\n

<\/p>\n

Introduction<\/h2>\n

<\/p>\n

Welcome to the world of Angular! Angular is a platform for building mobile and desktop web applications using TypeScript\/JavaScript and other languages. It provides a holistic framework for you to develop single-page applications that are dynamic, scalable, and maintainable.<\/p>\n

<\/p>\n

This tutorial is geared towards beginners who wish to step into the realm of developing a basic Angular application. By the end of this guide, you will know how to initiate an Angular project, understand its basic components, and create your first Angular application.<\/p>\n

<\/p>\n

Prerequisites<\/h2>\n

<\/p>\n

To follow along, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you should have Node.js and npm (Node Package Manager) installed on your machine. You can verify this by running node -v<\/code> and npm -v<\/code> in your command line interface. If you haven’t installed them yet, head over to Node.js official website<\/a> and download the latest stable version.<\/p>\n

<\/p>\n

Setting Up Your Development Environment<\/h2>\n

<\/p>\n

Before diving into application development, you need to set up your workspace. Below are steps to get started:<\/p>\n

<\/p>\n

Installing Angular CLI<\/h3>\n

<\/p>\n

The Angular Command Line Interface (CLI) is a powerful tool that allows you to streamline your development workflow. To install Angular CLI, open your terminal or command line interface and type the following command:<\/p>\n

<\/p>\n

npm install -g @angular\/cli<\/code><\/pre>\n
<\/p>\n
The above command will globally install Angular CLI on your machine.<\/p>\n
<\/p>\n
Creating a New Angular Project<\/h3>\n
<\/p>\n
Once the CLI is installed, you can set up a new Angular project. Navigate to the directory where you want your project to reside and type the following command:<\/p>\n
<\/p>\n
ng new my-first-angular-app<\/code><\/pre>\n
<\/p>\n
This initiates the creation of a new Angular project named my-first-angular-app<\/strong>. You\u2019ll be prompted to choose options about routing and style sheets, make your selections, and let the CLI configure the project.<\/p>\n
<\/p>\n
Serving Your Application<\/h3>\n
<\/p>\n
After creating your project, the CLI will set up a basic Angular application structure for you. Navigate into your project directory:<\/p>\n
<\/p>\n
cd my-first-angular-app<\/code><\/pre>\n
<\/p>\n
You can serve the application using:<\/p>\n
<\/p>\n
ng serve<\/code><\/pre>\n
<\/p>\n
This command will build the application and start a local server at http:\/\/localhost:4200<\/code>. Open your web browser and go to this URL. You should see the default Angular welcome page.<\/p>\n
<\/p>\n
Understanding Angular Project Structure<\/h2>\n
<\/p>\n
Let’s take a look at the project structure generated by Angular CLI:<\/p>\n
<\/p>\n
    <\/p>\n
  • e2e\/<\/strong>: Contains end-to-end tests.<\/li>\n
    <\/p>\n
  • node_modules\/<\/strong>: Contains the npm packages we’re using.<\/li>\n
    <\/p>\n
  • src\/<\/strong>: Contains the application code.<\/li>\n
    <\/p>\n
  • angular.json<\/strong>: Configuration for Angular CLI.<\/li>\n
    <\/p>\n
  • package.json<\/strong>: Handles npm package dependencies.<\/li>\n
    \n        <\/ul>\n
    <\/p>\n
    The src\/<\/strong> directory is where you will find the core files for your application:<\/p>\n
    <\/p>\n
      <\/p>\n
    • app\/<\/strong>: The application root directory.<\/li>\n
      <\/p>\n
    • assets\/<\/strong>: Stores images and other assets.<\/li>\n
      <\/p>\n
    • environments\/<\/strong>: Environment-specific settings.<\/li>\n
      <\/p>\n
    • index.html<\/strong>: The main HTML file.<\/li>\n
      <\/p>\n
    • main.ts<\/strong>: The entry point of the application.<\/li>\n
      <\/p>\n
    • styles.css<\/strong>: Global styles.<\/li>\n
      \n        <\/ul>\n
      <\/p>\n
      Building Your First Component<\/h2>\n
      <\/p>\n
      Angular applications are composed of components. A component consists of three main elements: an HTML template, a CSS style, and a TypeScript class.<\/p>\n
      <\/p>\n
      Generating a Component<\/h3>\n
      <\/p>\n
      Using Angular CLI, you can generate a new component easily. In the terminal, run the following command:<\/p>\n
      <\/p>\n
      ng generate component hello-world<\/code><\/pre>\n
      <\/p>\n
      This command will create a new directory hello-world\/<\/strong> in src\/app\/<\/strong>, containing the following files:<\/p>\n
      <\/p>\n
        <\/p>\n
      • hello-world.component.ts<\/code> – The TypeScript file defining the component class.<\/li>\n
        <\/p>\n
      • hello-world.component.html<\/code> – The template file.<\/li>\n
        <\/p>\n
      • hello-world.component.css<\/code> – The CSS styles specific to the component.<\/li>\n
        <\/p>\n
      • hello-world.component.spec.ts<\/code> – The test file.<\/li>\n
        \n        <\/ul>\n
        <\/p>\n
        Editing the Hello World Component<\/h3>\n
        <\/p>\n
        Open the hello-world.component.html<\/code> file and add a simple message:<\/p>\n
        <\/p>\n
        <h1>Hello World!<\/h1><\/code><\/pre>\n
        <\/p>\n
        Next, modify app.component.html<\/code> to include the hello-world<\/code> component:<\/p>\n
        <\/p>\n
        <app-hello-world><\/app-hello-world><\/code><\/pre>\n
        <\/p>\n
        Save your changes and check your application in the browser. You should see the “Hello World!” heading displayed.<\/p>\n
        <\/p>\n
        Adding Interactivity<\/h2>\n
        <\/p>\n
        Components can hold data and respond to user actions. Let’s add some interactivity by creating a button that changes a message when clicked.<\/p>\n
        <\/p>\n
        Updating Component Class<\/h3>\n
        <\/p>\n
        Edit the hello-world.component.ts<\/code> file to include a message and a method to change it:<\/p>\n
        <\/p>\n
        import { Component } from '@angular\/core';
        @Component({
        \n  selector: 'app-hello-world',
        \n  templateUrl: '.\/hello-world.component.html',
        \n  styleUrls: ['.\/hello-world.component.css']
        \n})
        \nexport class HelloWorldComponent {
        \n  message: string = 'Hello World!';
        changeMessage() {
        \n    this.message = 'You clicked the button!';
        \n  }
        \n}
        \n        <\/code><\/pre>\n
        <\/p>\n
        Updating Template<\/h3>\n
        <\/p>\n
        Modify the hello-world.component.html<\/code> to include a button and display the message:<\/p>\n
        <\/p>\n
        <h1>{{ message }}<\/h1>
        \n<button (click)=\"changeMessage()\">Click me<\/button>
        \n        <\/code><\/pre>\n
        <\/p>\n
        With these changes, when you click the button, the message will update!<\/p>\n
        <\/p>\n
        Styling Your Application<\/h2>\n
        <\/p>\n
        Styling in Angular can be handled through component-specific styles or global styles. Let’s add some basic styling.<\/p>\n
        <\/p>\n
        Adding Component Styles<\/h3>\n
        <\/p>\n
        Edit the hello-world.component.css<\/code> to style the button and heading:<\/p>\n
        <\/p>\n
        h1 {
        \n  color: #1976d2;
        \n}
        button {
        \n  background-color: #1976d2;
        \n  color: white;
        \n  border: none;
        \n  padding: 0.5em 1em;
        \n  cursor: pointer;
        \n  margin-top: 10px;
        \n}
        button:hover {
        \n  background-color: #155a9e;
        \n}
        \n        <\/code><\/pre>\n
        <\/p>\n
        Conclusion<\/h2>\n
        <\/p>\n
        Congratulations! You’ve successfully created your first Angular application, built a component, and added interactivity and styling to it. Angular is a vast framework with many capabilities, and this tutorial is just the beginning of your journey. As you advance, you\u2019ll discover Angular’s powerful features such as routing, services, and state management through RxJS.<\/p>\n
        <\/p>\n
        Continue exploring and practicing by adding new components, creating services for shared data, and experimenting with Angular\u2019s extensive CLI commands. Happy coding!<\/p>\n
        \n    <\/article>\n
        <\/p>\n\n","protected":false},"excerpt":{"rendered":"
        Introduction Welcome to the world of Angular! Angular is a platform for building mobile and desktop web applications using TypeScript\/JavaScript and other languages. It provides a holistic framework for you to develop single-page applications that are dynamic, scalable, and maintainable. This tutorial is geared towards beginners who wish to step into the realm of developing […]<\/p>\n","protected":false},"author":2,"featured_media":14383,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[132],"tags":[254,110,210,303,405],"class_list":["post-14382","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile-app","tag-angular","tag-application","tag-beginners","tag-creating","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/14382","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/comments?post=14382"}],"version-history":[{"count":0,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/posts\/14382\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media\/14383"}],"wp:attachment":[{"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/media?parent=14382"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/categories?post=14382"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kmfinfotech.com\/blogs\/wp-json\/wp\/v2\/tags?post=14382"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}