AngularJS ng-view s příkladem: Jak implementovat View

V dnešní době by každý slyšel o „jednostránkových aplikacích“. Mnoho známých webových stránek, jako je Gmail, používá koncept jednostránkových aplikací (SPA).

SPA je koncept, kdy když uživatel požádá o jinou stránku, aplikace na tuto stránku nepřejde, ale místo toho zobrazí pohled na novou stránku v rámci stávající stránky samotné.

Dává uživateli pocit, že stránku nikdy neopustil. Toho lze dosáhnout v Angular pomocí Views ve spojení s Routes.

V tomto tutoriálu se naučíte-

• Co je pohled?
• Směrnice ng-view v AngularJS
• Jak implementovat ng-view v AngularJS s příkladem

Co je pohled?

Zobrazení je obsah, který je zobrazen uživateli. V zásadě to, co chce uživatel vidět, se uživateli zobrazí pohled na aplikaci.

Kombinace pohledů a tras pomáhá rozdělit aplikaci do logických pohledů a svázat různé pohledy s ovladači.

Rozdělení aplikace do různých pohledů a použití směrování k načtení různých částí aplikace pomáhá při logickém rozdělení aplikace a její snadnější 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í namísto dvou různých webových stránek, jedné pro „Zobrazit objednávky“ a druhé pro „Nové objednávky“. AngularJSmísto toho byste na stejné stránce vytvořili dvě různá zobrazení 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.

• Když tedy aplikace přejde na MyApp/#show, zobrazí pohled na Objednávky zobrazení, zároveň neopustí stránku. Pouze obnoví sekci stávající stránky s informacemi „Zobrazit objednávky“. Totéž platí pro zobrazení „Nové objednávky“.

Tímto způsobem je tedy snazší rozdělit aplikaci do různých pohledů, aby byla lépe ovladatelná a snáze provádět změny, kdykoli je to potřeba.

A každý pohled bude mít odpovídající ovladač pro řízení obchodní logiky pro danou funkci.

Směrnice ng-view v AngularJS

„ngView“ je direktiva, která doplňuje službu $route tím, že zahrnuje vykreslenou šablonu aktuální trasy do hlavního souboru rozvržení (index.html).

Pokaždé, když se aktuální trasa změní, pohled zahrnoval její změny podle konfigurace služby $route, aniž by se změnila samotná stránka.

Budeme krýt tras v pozdější kapitole se prozatím zaměříme na přidání více pohledů do naší aplikace.

Níže je celý vývojový diagram, jak celý proces funguje. Projdeme si podrobně každý proces v našem příkladu uvedeném níže.

Jak implementovat ng-view v AngularJS

Pojďme se podívat na příklad, jak můžeme implementovat ng-view v AngularJS. V našem příkladu představíme uživateli dvě možnosti,

• Jedním 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 zobrazení pro „Přidat událost“ a totéž platí pro „Zobrazit událost“.

Chcete-li tento příklad použít, postupujte podle níže uvedených kroků.

Krok 1) Zahrňte soubor angular-route jako referenci skriptu.

Tento soubor trasy je nezbytný pro využití funkcí více tras a zobrazení. Tento soubor lze stáhnout z webu angularJS.

Krok 2) Přidejte značky href a značku div.

V tomto kroku,

1. Přidejte značky href, které budou představovat odkazy na „Přidání nové události“ a „Zobrazení události“.
2. Přidejte také značku div s direktivou ng-view, která bude reprezentovat pohled. To umožní vložit odpovídající pohled, kdykoli uživatel klikne buď na odkaz „Přidat novou událost“ nebo „Zobrazit odkaz na událost“.

Krok 3) Do značky skriptu pro Angular JS přidejte následující kód.

Nedělejme si starosti se směrováním, zatím to uvidíme v pozdější kapitole. Podívejme se zatím na kód zobrazení.

1. 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řejde na webovou stránku add_event.html a převezme kód odtud a vloží jej do zobrazení. Za druhé, chcete-li zpracovat obchodní logiku pro tento pohled, přejděte na „AddEventController“.
2. 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řejde na webovou stránku show_event.html, vezme odtud kód a vloží jej do zobrazení. Za druhé, pro zpracování obchodní logiky pro toto zobrazení přejděte na „ShowDisplayController“.
3. Tato část kódu znamená, že výchozí zobrazení zobrazené uživateli je zobrazení DisplayEvent

   

Krok 4) Přidejte řadiče pro zpracování obchodní logiky.

Dále je třeba přidat řadiče pro zpracování obchodní logiky pro funkce „DisplayEvent“ a „Add New Event“.

Jednoduše přidáváme proměnnou zprávy ke každému objektu rozsahu pro každý ovladač. Tato zpráva se zobrazí, když se uživateli zobrazí příslušný pohled.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
    <script src="https://code.angularjs.org/1.5.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.5.9/angular.min.js"></script>
    <script src="lib/bootstrap.js"></script>

</head>
<body ng-app="sampleApp">

<h1> Guru99 Global Event</h1>

<div class="container">
    <ul><li><a href="#!NewEvent"> Add New Event</a></li>
        <li><a href="#!DisplayEvent"> Display Event</a></li>
    </ul>
    <div ng-view></div>
</div>

<script>
    var app = angular.module('sampleApp',["ngRoute"]);
    app.config(function($routeProvider){
        $routeProvider.
        when("/NewEvent",{
            templateUrl : "add_event.html",
            controller: "AddEventController"
        }).
        when("/DisplayEvent", {
            templateUrl: "show_event.html",
            controller: "ShowDisplayController"
        }).
        otherwise ({
            redirectTo: '/DisplayEvent'
        });
    });
    app.controller("AddEventController", function($scope) {

        $scope.message = "This is to Add a new Event";

    });
    app.controller("ShowDisplayController",function($scope){

        $scope.message = "This is display an Event";

    });
</script>
</body>
</html>

Krok 5) Vytvořte stránky s názvem add_event.html a show_event.html

Dále 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 hlavičku spolu s textem „Přidat novou událost“ a výraz pro zobrazení zprávy „Toto je přidat novou událost“.

Podobně bude mít stránka show_event.html také značku záhlaví, která bude obsahovat text „Zobrazit událost“, a také výraz zprávy pro zobrazení zprávy „Toto je zobrazení události“.

Hodnota proměnné zprávy bude vložena na základě ovladače, který je připojen k pohledu.

Pro každou stránku přidáme proměnnou zprávy, která bude injektována z každého příslušného ovladače.

• add_event.html

<h2>Add New Event</h2>

{{message}}

• show_event.html

<h2>Show Event</h2>
	
{{message}}

Pokud je kód úspěšně spuštěn, 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í

1. Adresní řádek bude odrážet aktuální zobrazení. Vzhledem k tomu, že výchozí zobrazení zobrazuje obrazovku Show Event, v adresním řádku se zobrazuje adresa pro „DisplayEvent“.
2. Tato sekce je pohled, který se vytváří za běhu. Protože výchozí zobrazení je Zobrazit událost, zobrazí se uživateli právě 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:

1. V adresním řádku se nyní zobrazí, ž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.
2. Tato sekce je zobrazení a nyní se změní na zobrazení HTML pro funkci „Přidat novou událost“. Nyní se tedy v této sekci uživateli zobrazí záhlaví „Přidat novou událost“ a text „Toto je přidat novou událost“.