Кратки водич који ће вам помоћи да разумете и направите апликације Ангулар 6

Овај пост је подељен у два дела:

Први део показује како створити једноставну апликацију Ангулар 6 помоћу Ангулар ЦЛИ-а и објашњава структуру пројекта.

Други део објашњава постојећи код који сам објавио у ГитХуб-у. Овај код показује употребу компонената, услуга, ХТТП клијента и комуникацију између компоненти.

Део 1

Инсталирајте Ноде.јс ако већ није присутан

Треба вам Ноде.јс, јер се библиотеке потребне за Ангулар преузимају помоћу управитеља пакета чворова (нпм). Погледајте //нодејс.орг/ен/ да бисте инсталирали Ноде.јс.

Инсталирајте Ангулар ЦЛИ

Ангулар ЦЛИ је интерфејс командне линије за Ангулар и веома је користан у брзом креирању Ангулар 6 предлошка пројекта. Инсталирајте Ангулар ЦЛИ нпм пакет глобално помоћу следеће наредбе:

npm install -g @angular/cli

Креирајте пројекат

Кутни ЦЛИ помаже у стварању пројекта врло лако. Да бисте креирали пројекат, користите следећу наредбу.

ng new simple-angular6-app

симпле-ангулар6-апп је назив пројекта. Сада ћете приметити да видите фасциклу названу симпле-ангулар6-апп. Мапа је пројекат који је створен. Да бисте тестирали да ли је све правилно постављено, идите у директоријум пројекта и покрените апликацију помоћу следећих команди:

cd simple-angular6-app npm start

Идите у прегледач и идите на следећу УРЛ адресу: лоцалхост: 4200. Требали бисте бити у могућности да видите да је ваша апликација покренута.

Апликација би изгледала овако:

Објашњена основна структура мапе

Када креирате пројекат, приметићете да он ствара гомилу датотека. Овде ћу навести неке важне датотеке и фасцикле којих бисте требали бити свесни:

  1. пацкаге.јсон: Ова датотека има списак потребних зависности чворова.
  2. срц / стилес.цсс : Ова датотека има глобални ЦСС доступан у целој апликацији.
  3. срц / маин.тс : Ово је главна датотека која покреће апликацију Ангулар (АппМодуле се овде покреће, као што се види у коду). Овде Ектенсион .тс означава ТипеСцрипт.
  4. срц / индек.хтмл : Ово је прва датотека која се извршава заједно са маин.тс када се страница учита.
  5. срц / апп / апп.модуле.тс : Ово је датотека у којој су дефинисане све компоненте, добављачи и модули. Без њиховог дефинисања овде, не могу се користити другде у коду.
  6. срц / апп / апп.цомпонент.хтмл: Ово је главна компонента угаоне апликације, а све остале компоненте су обично присутне у овој компоненти. срц / апп / апп.цомпонент.тс је логика за ову компоненту, а срц / апп / апп.цомпонент.цсс је ЦСС за ову компоненту. Ова компонента сама по себи не ради неку важну логику, већ делује као контејнер за друге компоненте.
  7. дист : У овој фасцикли се налазе уграђене датотеке. ТипеСцрипт се у основи претвара у ЈаваСцрипт и резултујуће датотеке се овде чувају након спајања и умањења. (Ова мапа се појављује само ако је апликација изграђена. Једноставан „нпм старт“ неће створити ову фасциклу.) Будући да веб прегледачи разумеју само ЈаваСцрипт (бар за сада), неопходно је конвертовати ТипеСцрипт у ЈаваСцрипт пре примене кода . Да бисте видели ову фасциклу, у командну линију можете откуцати следеће:
npm run build

Постоји и неколико других датотека, али за почетак је добро знати ове основне

ТипеСцрипт

Ангулар 6 користи ТипеСцрипт за имплементацију логике. Онима који су радили на Јави веома је лако наћи ТипеСцрипт. ТипеСцрипт је језик изграђен на врху ЈаваСцрипт-а, али који је сигуран за тип, а ТипеСцрипт се пак компајлира у ЈаваСцрипт

Креирање компонената и услуга

  1. Компонента : Компонента у Ангулар-у обавља одређену функцију. Апликација Ангулар се прави помоћу различитих компоненти. Кутни ЦЛИ се може користити за лако стварање компонената. Синтакса је нг генеришу компоненту [име]. Користите следећу наредбу за креирање компоненте која се назива „купци“.
ng generate component customers

2. Горња команда креира фасциклу која се зове купци унутар срц / апп . Креирана компонента има:

  • цустомерс.цомпонент.хтмл фајл да одлучи шаблон (како компонента интерфејс треба да изгледа)
  • цустомерс.цомпонент.тс датотека која је где је присутна логика
  • цустомерс.цомпонент.цсс фајл који има садржај ЦСС
  • и датотеку цустомерс.цомпонент.спец.тс која се користи за јединствено тестирање (спецификације неће бити објашњене у овом посту).

3. Услуга : Услуга у основи пружа функционалност коју може користити било која компонента. Услуга се може делити између свих компоненти или може бити ограничена на одређену компоненту (у услугу се може ставити било која логика за вишекратну употребу). Кутни ЦЛИ се такође може користити за стварање услуга. Синтакса је нг генерира услугу [име]. Користите следећу команду да бисте креирали услугу која се зове „подаци“:

ng generate service data

4. Услуга је креирана унутар срц / апп. Створена услуга има датотеку дата.сервице.тс која има логику и датотеку дата.сервице.спец.тс за јединствено тестирање.

Честитамо ?

Успешно сте креирали своју прву апликацију Ангулар 6 и такође сте научили како да креирате компоненте и услуге. Такође сте сада научили основну структуру директоријума пројекта Ангулар 6. Следећи део ће објаснити постојећи ГитХуб код како би показао како се користе компоненте, услуге, ХТТП клијент и комуникација између компоненти.

Део 2

Код

Овде је објашњен овај код, зато клонирајте репо на ваш локални рачунар. Репо садржи упутства како да га клонирате и подесите.

УРЛ апликације

Да бисте видели како изгледа коначна пријава, можете да кликнете на ову УРЛ адресу. Ово ће вам дати добру идеју о томе шта апликација покушава да уради.

Апликација би изгледала овако на мобилном екрану:

Шта ради ова апликација?

Циљ апликације је приказивање листе купаца у облику картица. Када се кликне на податке о купцу, апликација се пребацује на нову страницу која затим приказује детаље о изабраном купцу.

Објашњена структура примене

Створене компоненте су:

  1. ЦустомерсЦомпонент : Ово одговара директоријуму срц / апп / цустомерс . Ова компонента треба да прикаже листу купаца. Тхе цустомерс.цомпонент.тсдатотека има функцију која се зове нгОнИнит () . Ова функција се позива кад год се компонента учита. Дакле, ова функција се може користити за учитавање података за компоненту. Ти подаци се учитавају позивањем функције гетЦустомерЛист () . гетЦустомерЛист () заузврат позива услугу података да би добио потребне податке.
  2. ЦустомердетаилсЦомпонент : Ово одговара директоријуму срц / апп / цустомердетаилс . Ова компонента приказује детаље за једног изабраног купца. Цустомердетаилс.цомпонент.тс фајл има нгОнИнит () функцију која се може користити за учитавање података. За учитавање података позива се функција гетЦустомерДетаилс () . Ова функција упућује позив дата служби да би добила потребне податке. Али овде ћете такође приметити употребу роутеПарамс.ид који се шаље сервису. роутеПарамс се користи за добивање параметара из УРЛ-а апликације и ид-апараметар се користи за откривање за ког купца треба учитати детаље. Ово ће постати јасније када дођем до рутирања.
  3. ДисплаиЦомпонент : Ово одговара директоријуму срц / апп / дисплаи. Ова компонента приказује име купца на које је кликнуто у ЦустомерсЦомпонент. (Цела поента ове компоненте је да демонстрира комуникацију родитеља са дететом.) Ово је подређена компонента ЦустомерсЦомпонент . У купцима.цомпонент.хтмлприметићете то .Ово чини ДисплаиЦомпонент подређеном компонентом ЦустомерсЦомпонент . Подаци се преносе из ЦустомерЦомпонент у ДисплаиЦомпонент помоћу атрибута [цустомер] .

Узорак података

Подаци узорка су присутни у директоријуму срц / ассетс / самплејсон .

Створене услуге су:

  1. ДатаСервице : Ово одговара срц / апп / дата.сервице.тс . Сав ЈСОН који се користи у апликацији чува се у директоријуму срц / ассетс / самплејсон . ДатаСервице помаже у добијању ЈСОН-а из директоријума срц / ассетс / самплејсон помоћу ХТТП захтева. У стварним апликацијама услуга помаже у добијању података из АПИ-ја за одмор или било ког другог АПИ-ја постављањем ХТТП захтева. Ову услугу користе обе компоненте ЦустомерсЦомпоненти ЦустомердетаилсЦомпонент.

Класе модела које се користе су:

  1. Купац : Ово одговара срц / апп / цустомер.тс . Ово је класа модела која се користи за компоненту ЦустомерсЦомпонент да дефинише структуру сваког купца на листи.
  2. ЦустомерДетаилс : Ово одговара срц / апп / цустомердетаилс.тс . Ово је класа модела која се користи за ЦустомердетаилсЦомпонент за дефинисање структуре која садржи све детаље о купцу.

Модул за усмеравање

Модул рутирања дефинисан је у срц / апп / апп-роутинг.модуле.тс . Овај модул се затим примењује на апликацију додавањем у апп.цомпонент.хтмл.

У апликацији су присутне 2 руте:

  1. / купци : Ова УРЛ адреса приказује листу купаца и указује на Корисничку компоненту.
  2. / цустомердетаилс /: ид : Ова УРЛ адреса приказује детаље за сваког купца и указује на ЦустомердетаилсЦомпонент . ИД који је присутан у овој УРЛ је роутеПарам. Овај идзаузврат се користи ЦустомердетаилсЦомпонент да би знао које детаље о купцу треба приказати. За Пример / цустомердетаилс / 1 ће се приказати детаљи првог купца, / цустомердетаилс / 3 ће приказати детаље о трећем купцу, и тако даље.

Честитамо поново ?

Сада знате како се користе компоненте и услуге. Такође знате како да упућујете ХТТП позиве, како да користите рутирање и како да проследите роутеПарамс.

Основни концепти обрађени су у овом посту и надам се да је то било корисно.

Референце:

  1. Да бисте сазнали више о Ангулар-у, можете погледати документацију //ангулар.ио/гуиде/куицкстарт. Документација је врло добра за разумевање даљих концепата угаоне

О аутору

Волим технологију и пратим технолошки напредак. Такође волим да помажем другима било којим знањем које имам у технолошком простору.

Слободно се повежите са мном на свом ЛинкдИн налогу //ввв.линкедин.цом/ин/адитиа1811/

Можете ме пратити и на твиттеру //твиттер.цом/адитиасридхар18

Моја веб локација: //адитиасридхар.цом/

Остале сродне поруке од мене

Кратки водич који ће вам помоћи да разумете и креирате РеацтЈС апликације

Кратки увод у Вуе.јс