პირველი Hello world აპლიკაცია Angular-ში

ნებისმიერი Angular პალიკაციისთვის აუცილებელია პროექტში არსებობდეს მინიმუმ 1 root module, რომელსაც Angular CLI ავტომატურად გვიგენერირებს და მას app.module.ts ფაილის სახით ქმნის.

app.module.ts ფაილში @NgModule() დეკორატორს გადაეცემა ობიქტების მასივი, რომელიც წარმოადგენს მოდულის ე.წ. მეტა ინფორმაციას (meta data).

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

თვისება	მნიშვნელობა
declarations	თვისებაში შენახული უნდა იყოს components, directives, pipes-ების მასივი
imports	თვისებაში შენახული უნდა იყოს სხვა და სხვა მოდულები.
providers	თვისებაში შენახული უნდა იყოს ე.წ. სერვისები
bootstrap	თვისებაში შენახულია ე.წ. საწყისი view, AppComponent-ის სახით

AppComponent

პროექტის ინციალიზაციის მომენტში Angular ავტომატურად აგენერირებს ასევე 3 ფაილს ესენია

1. app.component.html
2. app.component.scss
3. app.component.ts

დავიწყოთ app.component.ts ფაილის გარჩევა

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'hello-world-angular';
}

მოცემულ კომპონენტში გვაქვს @Component() დეკორატორი, რომელსაც გადაეცემა ობიექტი, სადაც გვაქვს მინიმუმ 3 თვისება

1. selector
2. templateUrl
3. styleUrls

selector წარმოადგენს კომპონენტსის selector-ის დასახელებას, templateUrl წარმოადგენს კომპონენტის ხილულს ნაწილს, რომელიც ბრაუზერში გამოჩნდება, ხოლო styleUrl თვისებას გადაეცემა, სტილების ფაილების მასივი