Angular 2 — Архітектура

326

Від автора: на скріншоті нижче наведена архітектура Angular 2. Кожна програма складається з компонентів. Кожен компонент є логічним розділом функцій додатка. Для цього необхідно побудувати багаторівневі служби, які використовуються для спільного використання функцій між компонентами.

Angular 2 — Архітектура

Нижче наведена структура Компонента. Компонент складається з:

Класів — це класи C ++ або Java, які містять властивості і методи.

Метадані — використовується для оформлення класу і розширення його функціоналу.

Шаблон використовується для визначення подання HTML, який відображається в додатку.

Angular 2 — Архітектура

Нижче наведено приклад компонента.

import { Component } from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
templateUrl: ‘app/app.component.html’
})
export class AppComponent {
appTitle: string = ‘Welcome’;
}

Кожна програма складається з модулів. Кожне додаток Angular 2 повинно містити один кореневий модуль Angular. Кореневий модуль Angular може містити декілька компонентів для поділу функціоналу.

Angular 2 — Архітектура

Нижче наведено приклад кореневого модуля.

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { AppComponent } from ‘./app.component’;
@NgModule ({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Кожна програма складається з функціональних модулів, кожен модуль містить окрему функцію додатка. Модуль функцій Angular може містити декілька компонентів для поділу функцій.

Angular 2 — Архітектура