Course Progress 11%

Angular First App

← Angular Project Structure Angular Standalone vs NgModule →

अब हम Angular में पहला functional application बनाएँगे। यह chapter आपको step-by-step guide देगा कि कैसे एक simple Angular application create, build और run किया जाता है।

इस example के साथ आप समझेंगे कि components, templates और data binding कैसे काम करते हैं।

Step 1: Angular Project Create करना

अगर आपने पहले से Angular CLI install कर लिया है, तो नया project create करें:

ng new first-app

CLI कुछ questions पूछेगा:

  • Routing: Yes या No
  • Stylesheet format: CSS, SCSS, या अन्य

Example selection:

Would you like to add Angular routing? Yes
Which stylesheet format would you like to use? CSS

फिर project setup complete होने पर:

cd first-app

Step 2: Development Server Start करना

ng serve
  • Local server start होगा
  • Default URL: http://localhost:4200
  • Browser में open करें

अब Angular welcome page दिखेगा।

Step 3: Root Component समझना

Project create होते ही Angular CLI root component generate करता है:

src/app/app.component.ts
src/app/app.component.html
src/app/app.component.css

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My First Angular App';
}

Explanation

  • @Component decorator Angular को बताता है कि यह class component है
  • selector HTML tag की तरह use होता है
  • templateUrl component का HTML template define करता है
  • styleUrls component-specific CSS link करता है
  • title component property है जो template में use होगी

Step 4: Template में Data Bind करना

app.component.html open करें और इसे update करें:

<h1>{{ title }}</h1>
<p>Welcome to Angular!</p>

Explanation

  • {{ title }} interpolation syntax है
  • Component class की title property automatically template में दिखती है

Step 5: Add Another Component

Angular में हर feature component बनाकर project modular रहता है।

New component generate करें:

ng generate component hello

CLI automatically folder और files generate करेगा:

src/app/hello/hello.component.ts
src/app/hello/hello.component.html
src/app/hello/hello.component.css

hello.component.ts Example

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  message = 'Hello from HelloComponent!';
}

hello.component.html Example

<p>{{ message }}</p>

Step 6: New Component को App में Include करना

app.component.html में:

<h1>{{ title }}</h1>
<p>Welcome to Angular!</p>

<app-hello></app-hello>

Explanation

  • <app-hello> selector new component को embed करता है
  • Component modular और reusable होता है

Step 7: Run the App

ng serve

Browser open करें और URL http://localhost:4200 देखें।

Output:

My First Angular App
Welcome to Angular!
Hello from HelloComponent!

Step 8: Styling Add करना

app.component.css या hello.component.css में simple CSS add करें:

h1 {
  color: blue;
}

p {
  font-size: 18px;
}

Browser में changes live reload होंगे।

Summary

इस chapter में आपने सीखा:

  • Angular project create करना
  • Development server run करना
  • Root component और template समझना
  • Data binding के लिए interpolation use करना
  • नया component generate करना और app में include करना
  • Basic styling apply करना

अब आप Angular में functional application build करने के लिए ready हैं।

← Angular Project Structure Angular Standalone vs NgModule →
  • Home