Ако правите Ангулар апликацију са више страница, морате да користите рутирање да бисте се кретали између њих. То можете учинити тако што ћете креирати листу рута са путањом за сваку страницу у модулу за рутирање.
Затим можете да усмерите на друге странице унутар ХТМЛ датотеке помоћу ознаке сидра. Такође можете да усмерите на друге странице унутар ТипеСцрипт датотеке, користећи метод роутер.навигате().
Како направити нову страницу у Ангулар апликацији
Прво направите нову Ангулар апликацију. Можете користити и постојећи. Ако нисте упознати са начином креирања нове Ангулар апликације, можете научити о њој заједно са осталима уводни концепти који се користе у Ангулару.
-
Направите нову компоненту у апликацији Ангулар помоћу нг генератор компонента команда:
нг генерисати компоненту кући - Отвори срц/апп/хоме/хоме.цомпонент.хтмл датотеку и замените тренутни садржај новим садржајем.
<див цласс="садржаја">
<х2> Кућа </h2>
<стр>
Ја сам фотограф који се бави фотографисањем венчања. Погледајте моје пројекте!
</п>
<див цласс="картица">
<х4> Јохн & Ами </h4>
<стр> Плаве планине, Аустралија </п>
</div>
<див цласс="картица">
<х4> Росс & Рацх </h4>
<стр> Вртови долине Хунтер, Аустралија </п>
</div>
</div> - Попуне тхе срц/апп/хоме/хоме.цомпонент.цсс датотека са стиловима за ХТМЛ садржај.
.садржај {
Висина линија: 2рем;
фонт-сизе: 1.2ем;
}.картица {
кутија-сенка: 0 4пк 8пк 0 ргба(0, 0, 0, 0.2);
ширина: 400пк;
паддинг: 16пк;
маргина: 24пк 0пк;
боја позадине: Бели дим;
породица фонтова: Санс Сериф;
} - Направите другу компоненту користећи нг генератор компонента команду у терминалу. Нову компоненту ћете користити као страницу са информацијама.
нг генерише компоненту о - Отвори срц/апп/абоут/абоут.цомпонент.хтмл датотеку и замените тренутни садржај новим садржајем.
<див цласс="садржаја">
<х2> О мени </h2>
<стр>
И'м Џон, и волим да фотографишем. Фотографишем више од 25 година. Посетите ме на мојим друштвеним мрежама:
</п>
<а хреф=""> Фејсбук </а><бр>
<а хреф=""> ЛинкедИн </а><бр>
<а хреф=""> инстаграм </а><бр>
</div> - Попуне тхе срц/апп/абоут/абоут.цомпонент.цсс датотека са стиловима за ХТМЛ садржај.
.садржај {
Висина линија: 2рем;
фонт-сизе: 1.2ем;
}
Како се кретати између две странице
Можете да користите рутирање за навигацију са једне странице на другу. Ово можете да конфигуришете у датотеци за рутирање. Овај пример ће имати једну датотеку за рутирање за целу апликацију, која се налази у срц/апп/апп-роутинг.модуле.тс.
- Ако ваша апликација већ нема датотеку модула за усмеравање апликације, можете је генерисати помоћу нг генератор модула команда. У командној линији или терминалу идите до основног фолдера апликације и покрените следећу команду:
нг генерисање модула апп-роутинг --модуле апп --флат - Ово ће креирати датотеку апп-роутинг.модуле.тс у вашем срц/апп фолдер.
- На врху датотеке додајте додатне увозе за компоненте Почетна и О нама. Уверите се да такође увозите РоутерМодуле и ЦоммонМодуле; на крају, ваше изјаве о увозу треба да изгледају овако:
увоз { ЦоммонМодуле } из '@ангулар/цоммон';
увоз { Роутес, РоутерМодуле } из '@ангулар/роутер';
увоз { ХомеЦомпонент } из './хоме/хоме.цомпонент';
увоз { АбоутЦомпонент } из './абоут/абоут.цомпонент'; - Испод увоза додајте нови низ рута да бисте сачували путање које ћете користити приликом рутирања до сваке странице.
конст руте: Руте = [
{ пут: '', саставни део: ХомеЦомпонент },
{ пут: 'О томе', саставни део: АбоутЦомпонент }
]; - Замените блок НгМодуле следећим, што додаје РоутерМодуле низу увоза и извоза.
@НгМодуле({
декларације: [],
увози: [
ЦоммонМодуле,
РоутерМодуле.форРоот (руте)
],
извози: [РоутерМодуле]
}) - У срц/апп/апп.цомпонент.хтмл датотеку, уклоните тренутни садржај и додајте ознаку рутер-оутлет.
<див цласс="контејнер">
<рутер-утичница></router-outlet>
</div>
Како доћи до нове странице у ХТМЛ датотеци
Да бисте дошли до странице унутар ХТМЛ датотеке, користите ознаку сидра. У атрибут хреф додајте путању коју сте навели у низу рута.
- У срц/апп/апп.цомпонент.хтмл датотеку, додајте две ознаке сидра пре контејнера див. Ово ће вам омогућити да се крећете између почетне и странице О нама.
<див цласс="навбар">
<а цласс="линк" хреф="">Кућа</а>
<а цласс="линк" хреф="/about">О томе</а>
</div> - Додајте мало стила срц/апп/апп.цомпонент.цсс фајл.
.контејнер {
маргина: 48пк 35%;
породица фонтова: &куот;Ариал&куот;, Санс Сериф;
приказ: флек;
флек-дирецтион: колона;
алигн-итемс: центар;
}.навбар {
боја позадине: даркслатеграи;
паддинг: 30пк 50пк;
приказ: флек;
алигн-итемс: центар;
породица фонтова: Санс Сериф;
}.линк:први у врсти {
маргин-десно: 32пк;
}.линк {
боја: бео;
текст-декорација: ниједан;
фонт-сизе: 14пт;
фонт-веигхт: одважан;
} - Додајте мало стила укупној маргини странице срц/стилес.цсс.
тело {
маргина: 0;
паддинг: 0;
} - У командној линији или терминалу идите до коренског фолдера апликације Ангулар. Покрените апликацију користећи нг служе команду и сачекајте да заврши компајлирање.
нг служе - У претраживачу унесите лоцалхостУРЛ у УРЛ траку да бисте видели своју апликацију. Подразумевано, ово је обично http://localhost: 4200/.
- Ваша веб локација ће се учитати на почетну страницу.
- Можете ићи на страницу Абоут тако што ћете кликнути на везу Абоут на траци за навигацију.
Како доћи до нове странице у ТипеСцрипт датотеци
До сада, овај демо користи стандардне ХТМЛ везе за навигацију. Да бисте се кретали користећи ТипеСцрипт датотеку уместо ХТМЛ датотеке, можете да користите роутер.навигате().
- У срц/апп/апп.цомпонент.хтмл датотеку, уклоните ознаке сидра и замените их ознакама дугмади. Ова дугмад ће имати догађај клика који покреће функцију под називом цлицкБуттон(). Када позовете функцију цлицкБуттон(), додајте путању УРЛ руте као аргумент.
<дугме цласс="линк" (клик)="цлицкБуттон('')">Кућа</button>
<дугме цласс="линк" (клик)="цлицкБуттон('/about')">О томе</button> - Додајте мало стила дугмадима у срц/апп/апп.цомпонент.цсс фајл.
дугме {
боја позадине: црн;
паддинг: 4пк 8пк;
курсор: показивач;
} - На врху срц/апп/апп.цомпонент.тс датотеку, увезите рутер.
увоз { рутер } из '@ангулар/роутер'; - Додајте нови конструктор унутар класе АппЦомпонент и унесите рутер унутар параметара.
конструктор(приватни рутер: рутер) {
} - Испод конструктора, направите нову функцију под називом цлицкБуттон(), која ће се кретати до нове странице на основу УРЛ адресе коју проследите.
цлицкБуттон (путња: стринг) {
ово.роутер.навигате([путања]);
} - Поново покрените команду нг серве у командној линији или терминалу.
нг служе - Идите на своју веб локацију у прегледачу. хреф је сада замењен са два дугмета.
- Кликните на О томе дугме. Усмериће се на страницу Абоут.
Креирање више страница у Ангулар апликацији
Можете рутирати између више страница унутар Ангулар апликације користећи рутирање. Ако имате засебне компоненте за сваку страницу, можете да конфигуришете путање за своје руте унутар модула за рутирање.
Да бисте дошли до друге странице преко ХТМЛ датотеке, користите ознаку сидра са атрибутом хреф као путању за рутирање до те странице. Да бисте прешли на другу страницу преко ТипеСцрипт датотеке, можете користити методу роутер.навигате().
Ако правите Ангулар апликацију, можете користити Ангулар директиве. Они вам омогућавају да користите динамичке иф-изјаве, фор-петље или друге логичке операције унутар ХТМЛ датотеке компоненте.
