Angular е платформа и рамка за разработка на TypeScript, която се използва за създаване на приложения с една страница.

Angular има сложна история. Разработчиците са използвали JavaScript, за да изградят първата версия на тази рамка (AngularJS). По-късно Angular разработчиците използваха TypeScript за изграждане на всички последователни версии на Angular (поради броя на грешките в първата версия).

От 2021 г. последната версия на Angular е 12.0. В тази статия ще научите всичко, което трябва да знаете за Angularframework.

Какво е Angular?

Много хора описват Angularas като рамка и въпреки че тази дефиниция не е неправилна, Angular не е просто рамка. Angular също е платформа за разработка. Това означава, че има хардуерна и софтуерна система, която работи с Angular приложения.

Въпреки че е изграден на TypeScript, можете да напишете по-голямата част от кода на платформата в JavaScript. Подобно на повечето рамки, Angular е базиран на компоненти. Това означава, че всеки раздел от потребителския интерфейс на Angular се третира като независим обект, което води до създаването на код за повторно използване и мащабируеми приложения.

За да използвате Angular, ще трябва да сте запознати с HTML, CSS и JavaScript (да знаете TypeScript е предимство, но не и изискване). Angularis често се сравнява с VueJS и ReactJS и едно от основните оплаквания е, че Angular има по-стръмна крива на обучение.

Свързани: Какво е ReactJS и за какво може да се използва?

Това не е изненада, тъй като Angular (като платформа за разработка) има по-голям брой основни структури, с които да се запознаете. Тези структури включват:

• модули
• Компоненти
• Шаблони

И разбирането на тези основни функции ще гарантира, че сте на път да станете Angular разработчик.

Изследване на ъглови файлове

Приложението Angular генерира много файлове в новата ви папка на проекта (както можете да видите на изображението по-долу). Проверете официалния уебсайт на Angular за инструкции как да инсталирате Angular на вашия компютър.

Един от по-важните файлове в основната папка на проекта е package.json файл. Този файл ви казва името на вашия проект, как да стартирате проекта си (ng служи), как да изградите своя проект (ng build) и как да тествате своя проект (ng тест) наред с други неща.

Основната ви папка на проекта също съдържа две папки –модули_възел и src. В src папката е мястото, където ще извършвате цялата си разработка; съдържа няколко файла и папки.

Папката src

В styles.css файл е мястото, където ще поставите всичките си глобални предпочитания за стил и index.html файлът е единствената страница, която изобразява във вашия браузър.

Разглеждане на файла index.html

Единственото нещо, което бихте искали да промените в index.html файла по-горе е заглавието на приложението. В таг в тялото на HTML файла по-горе връзки към app.component.ts файл, който се намира в папката на приложението (както можете да видите на изображението по-долу).

Разглеждане на файла app.component.ts

импортирайте {Component } от '@angular/core';
@Съставна част({
селектор: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
експортен клас AppComponent {
заглавие = 'моето приложение';
}

В app.component.ts файл използва корен на приложението селектор, който се намира в index.html файл по-горе. Той използва app.component.html файл като шаблон и app.component.css файл за стил.

В app.component.css файлът е празен, когато е генериран, тъй като всички предпочитания за стил, заедно с HTML оформлението, са в рамките на app.component.html файл.

Стартиране на приложението Angular с ng service --отворен командата ще покаже следното във вашия браузър:

За да промените това, което се показва в браузъра ви, ще трябва да редактирате app.component.html файл.

Замяна на съдържанието на този файл със следния код:

Здравей свят

Ще произведе следния изход във вашия браузър:

Разбиране на ъглови модули

Всеки Ъглова приложението е изградено върху основна модулна система, известна като NgModules. Всяко приложение съдържа поне едно NgModule. Ъглова генерира два модула от нов команда (app-routing.module.ts и app.module.ts).

В app.module.ts файл съдържа основния модул, който трябва да присъства, за да може приложението да работи.

Разглеждане на файла app.module.ts

импортирайте { NgModule } от '@angular/core';
импортирайте { BrowserModule } от '@angular/platform-browser';
импортирайте { AppRoutingModule } от './app-routing.module';
импортирайте { AppComponent } от './app.component';
@NgModule({
декларации: [
AppComponent
],
внос: [
модул за браузър,
AppRoutingModule
],
доставчици: [],
bootstrap: [AppComponent]
})
експортиране на клас AppModule { }

Файлът по-горе използва JavaScript внос изявление за импортиране на NgModule, на BrowserModule, на AppComponent, и на AppRoutingModule (което е вторият NgModule в проекта).

В @NgModule декоратор идва след вноса. То показва, че app.module.ts файлът наистина е a NgModule. В @NgModule декоратор след това конфигурира няколко масива: the декларации, на внос, на доставчици, и на bootstrap.

В декларации масивът съхранява компонентите, директивите и каналите, които принадлежат на конкретен NgModule. Въпреки това, в случай на root модул само AppComponent се съхранява в декларация масив (както можете да видите в кода по-горе).

В внос array импортира другия NgModules които използвате в приложението. В внос масив в кода по-горе импортира BrowserModule (което му позволява да използва специфични за браузъра услуги, като DOM изобразяване) и AppRoutingModule (което позволява на приложението да използва Ъглова рутер).

Свързани: Скритият герой на уебсайтовете: Разбиране на DOM

В доставчици масивът трябва да съдържа услуги, които компоненти в други NgModules може да използва.

В bootstrap масивът е много важен, защото съдържа входния компонент, който Angular създава и вмъква в index.html файл в основната папка на проекта. Всяко приложение на Angular се стартира от bootstrap масив в корена NgModule от bootstrapping на NgModule (който включва процес, който вмъква всеки компонент в bootstrap масив в DOM на браузъра).

Разбиране на ъгловите компоненти

Всеки компонент на Angular се генерира с четири специфични файла. Ако погледнете изображението на папката на приложението по-горе, ще видите следните файлове:

• app.component.css (CSS файл)
• app.component.html (шаблонен файл)
• app.component.spec.ts (файл със спецификация за тестване)
• app.component.ts (компонентен файл)

Всички горепосочени файлове са свързани с един и същ компонент. Ако използвате ng генерира команда за генериране на нов компонент, ще бъдат генерирани четири подобни файла на горните. В app.component.ts файл съдържа коренен компонент, който свързва различните аспекти на компонента (като шаблона и стила).

Разглеждане на файла app.component.ts

импортирайте { Component } от '@angular/core';
@Съставна част({
селектор: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
експортен клас AppComponent {
заглавие = 'моето приложение';
}

В app.component.ts файл използва израза за импортиране на JavaScript, за да импортира „Компонент“ от ядрото на Angular. Тогава @Съставна част декоратор идентифицира класа като компонент. В @Съставна част декораторът съдържа обект, състоящ се от a селектор, а templateUrl, и а styleUrls масив.

В селектор разказва Ъглова за да вмъкнете екземпляр от компонента на приложението във всеки HTML шаблон, който има маркер, съответстващ на селектор (така че етикет). И ако погледнете назад към кода в index.html файл по-горе ще намерите етикет.

Основният файл с компонент на приложението също се свързва към файла с шаблона, като се използва templateUrl Имот. Това е app.component.html файл, който очертава как конкретен компонент трябва да бъде изобразен в приложение на Angular.

Крайното свойство в обекта е styleUrls. Това свойство препраща към масив от таблици със стилове, което означава, че можете да приложите множество стилови таблици един компонент (така че можете да добавите глобалния стилов лист в папката src към масива styleUrls като добре).

Разбиране на ъглови шаблони

В app.component.html файл е пример за ъглов шаблон. Този файл е HTML файл, както и файл на компонент (компонентът на приложението). Следователно всеки компонент трябва да има HTML шаблон, просто защото очертава как даден компонент се изобразява в DOM.

Какво следва?

Разбирането на DOM е следващият ви най-добър ход. Поемането на платформата и рамката Angular несъмнено е предизвикателство. Въпреки това е възможно и като се има предвид, че Angular изобразява своите компоненти в DOM, научаването за DOM - докато се опитвате да овладеете Angular - е друг страхотен ход.

Скритият герой на уебсайтовете: Разбиране на DOM

Изучавате уеб дизайн и трябва да знаете повече за обектния модел на документ? Ето какво трябва да знаете за DOM.

Прочетете Следващото

За автора