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

Дата публикации: 2017-11-09

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

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

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

Классов — это как классы C ++ или Java, которые содержат свойства и методы.

Метаданные — используется для оформления класса и расширения его функционала.

Бесплатный курс «Laravel + Angular. Быстрый старт»

Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel

Получить курс

Шаблон — используется для определения представления HTML, отображаемого в приложении.

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

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

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   appTitle: string = 'Welcome';
}

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 { }

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 — Архитектура