V dnešní době by každý slyšel o „jednostránkových aplikacích“. Mnoho známých webů, jako je Gmail, používá koncept jednostránkových aplikací (SPA).
SPA je koncept, kdy když uživatel požaduje jinou stránku, aplikace nebude navigovat na tuto stránku, ale místo toho zobrazí pohled na novou stránku v rámci samotné existující stránky.
Dává uživateli pocit, že nikdy neopustil stránku. Totéž lze dosáhnout v úhlu pomocí pohledů ve spojení s trasami.
V tomto výukovém programu se naučíte
- Co je to pohled?
- Směrnice ng-view v AngularJS
- Příklad ng-view
Co je to pohled?
Pohled je obsah, který se zobrazí uživateli. V zásadě to, co chce uživatel vidět, se mu příslušně zobrazí ten pohled na aplikaci.
Kombinace pohledů a tras pomáhá člověku rozdělit aplikaci na logická zobrazení a svázat různé pohledy s řadiči.
Rozdělení aplikace do různých pohledů a použití směrování k načtení jiné části aplikace pomáhá při logickém rozdělení aplikace a její lepší ovladatelnosti.
Předpokládejme, že máme objednávkovou aplikaci, kde si zákazník může prohlížet objednávky a zadávat nové.
Níže uvedený diagram a následné vysvětlení ukazují, jak vytvořit tuto aplikaci jako jednostránkovou aplikaci.
Nyní byste místo dvou různých webových stránek, jedné pro „Zobrazit objednávky“ a druhé pro „Nové objednávky“, v AngularJS vytvořili na stejné stránce dva různé pohledy s názvem „Zobrazit objednávky“ a „Nové objednávky“.
V naší aplikaci budeme mít také 2 referenční odkazy s názvem #show a #new.
- Takže když aplikace přejde na MyApp / # show, zobrazí pohled na View Orders, zároveň neopustí stránku. Obnoví pouze část stávající stránky s informacemi „Zobrazit objednávky“. Totéž platí pro pohled „Nové objednávky“.
Tímto způsobem je tedy jednodušší rozdělit aplikaci do různých pohledů, aby byla lépe ovladatelná a snadno proveditelné změny, kdykoli je potřeba.
A každý pohled bude mít odpovídající řadič pro řízení obchodní logiky pro tuto funkci.
Směrnice ng-view v AngularJS
„NgView“ je směrnice, která doplňuje službu $ route tím, že do hlavního souboru (index.html) obsahuje vykreslenou šablonu aktuální trasy.
Pokaždé, když se aktuální trasa změní, zobrazení zahrnovalo její změny podle konfigurace služby $ route beze změny samotné stránky.
V další kapitole se budeme věnovat trasám, zatím se zaměříme na přidání více pohledů do naší aplikace.
Níže je uveden celý vývojový diagram fungování celého procesu. Podrobně projdeme každý proces v našem příkladu uvedeném níže.
Příklad ng-view
Pojďme se podívat na příklad toho, jak můžeme implementovat pohledy.
V našem příkladu představíme uživateli dvě možnosti,
- Jedním z nich je zobrazení „události“ a druhým přidání „události“.
- Když uživatel klikne na odkaz Přidat událost, zobrazí se mu pohled „Přidat událost“ a totéž platí pro „Zobrazit událost“.
Postupujte podle následujících kroků, aby byl tento příklad na místě.
Krok 1) Zahrňte soubor úhlové trasy jako odkaz na skript.
Tento soubor trasy je nezbytný, aby bylo možné využívat funkce více tras a zobrazení. Tento soubor lze stáhnout z webových stránek angularJS.
Krok 2) V tomto kroku
- Přidejte značky href, které budou představovat odkazy na „Přidání nové události“ a „Zobrazení události“.
- Přidejte také značku div se směrnicí ng-view, která bude představovat zobrazení.
To umožní, aby byl odpovídající pohled vložen, kdykoli uživatel klikne na odkaz „Přidat novou událost“ nebo „Zobrazit odkaz na událost“.
Krok 3) Ve značce skriptu pro Angular JS přidejte následující kód.
Nebojme se o směrování, zatím to uvidíme v pozdější kapitole. Podívejme se zatím na kód pro zobrazení.
- Tato část kódu znamená, že když uživatel klikne na značku href "NewEvent", která byla dříve definována ve značce div. Půjde na webovou stránku add_event.html a odtud vezme kód a vloží jej do zobrazení. Zadruhé pro zpracování obchodní logiky pro toto zobrazení přejděte do části „AddEventController“.
- Tato část kódu znamená, že když uživatel klikne na značku href „DisplayEvent“, která byla dříve definována ve značce div. Půjde na webovou stránku show_event.html, odtud vezme kód a vloží jej do zobrazení. Za druhé, pro zpracování obchodní logiky pro toto zobrazení přejděte na "ShowDisplayController".
- Tato část kódu znamená, že výchozím zobrazením zobrazeným uživateli je zobrazení DisplayEvent
Krok 4) Dalším krokem je přidání řadičů ke zpracování obchodní logiky pro funkce „DisplayEvent“ a „Přidat novou událost“.
Jednoduše přidáváme proměnnou zprávy do každého objektu oboru pro každý řadič. Tato zpráva se zobrazí, když se uživateli zobrazí příslušné zobrazení.
Event Registration Guru99 Global Event
Krok 5) Vytvořte stránky s názvem add_event.html a show_event.html. Udržujte stránky jednoduché, jak je znázorněno níže.
V našem případě bude mít stránka add_event.html značku záhlaví spolu s textem „Přidat novou událost“ a bude mít výraz pro zobrazení zprávy „Toto je přidání nové události“.
Podobně bude mít stránka show_event.html také značku záhlaví, která bude obsahovat text „Zobrazit událost“, a také bude mít výraz zprávy pro zobrazení zprávy „Toto je zobrazení události.“
Hodnota proměnné zprávy bude vložena na základě řadiče, který je připojen k zobrazení.
Pro každou stránku přidáme proměnnou zprávy, která bude vložena z každého příslušného řadiče.
- add_event.html
Add New Event
{{message}}
- show_event.html
Show Event
{{message}}
Pokud je kód úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Z výstupu si můžeme všimnout 2 věcí
- Lišta adresy bude odrážet aktuální zobrazení, které se zobrazuje. Jelikož je výchozím zobrazením zobrazení obrazovky Zobrazit událost, zobrazuje se v adresním řádku adresa „DisplayEvent“.
- Tato část je Pohled, který se vytváří za běhu. Protože výchozím zobrazením je Show Event, zobrazí se uživateli toto.
Nyní klikněte na odkaz Přidat novou událost na zobrazené stránce. Nyní získáte níže uvedený výstup.
Výstup:
- Lišta adresy nyní bude odrážet, že aktuální zobrazení je nyní zobrazení „Přidat novou událost“. Všimněte si, že budete stále na stejné stránce aplikace. Nebudete přesměrováni na novou stránku aplikace.
- Tato část je Pohled a nyní se změní, aby zobrazovala HTML pro funkci „Přidat novou událost“. Nyní se tedy v této části uživateli zobrazí značka záhlaví „Přidat novou událost“ a text „Toto je přidat novou událost“.