AngularJS ng-view с Пример: Как да внедрим View

В наши дни всеки би чул за „Приложенията с една страница“. Много от добре познатите уебсайтове като Gmail използват концепцията за едностранични приложения (SPA).

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

Това дава усещането на потребителя, че той никога не е напускал страницата на първо място. Същото може да се постигне в Angular с помощта на Views във връзка с Routes.

В този урок ще научите-

Какво е изглед?
Директива ng-view в AngularJS
Как да внедрите ng-view в AngularJS с пример

Какво е изглед?

Изгледът е съдържанието, което се показва на потребителя. По принцип това, което потребителят иска да види, съответно този изглед на приложението ще бъде показан на потребителя.

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

Разделянето на приложението на различни изгледи и използването на Routing за зареждане на различни части от приложението помага за логическото разделяне на приложението и го прави по-управляемо.

Да приемем, че имаме приложение за поръчка, в което клиент може да преглежда поръчки и да прави нови.

Диаграмата по-долу и последващото обяснение демонстрират как да направите това приложение като едностранично приложение.

Сега, вместо да имате две различни уеб страници, една за „Преглед на поръчките“ и друга за „Нови поръчки“, в AngularJS, вместо това ще създадете два различни изгледа, наречени „Преглед на поръчки“ и „Нови поръчки“ на една и съща страница.

Ще имаме също 2 връзки за справка в нашето приложение, наречени #show и #new.

Така че, когато приложението отиде в MyApp/#show, то ще покаже изгледа на Преглед на поръчките, като в същото време няма да напусне страницата. Той просто ще опресни секцията на съществуващата страница с информацията за „Преглед на поръчките“. Същото важи и за изгледа „Нови поръчки“.

Така че по този начин просто става по-лесно да разделите приложението на различни изгледи, за да го направите по-управляемо и лесно да правите промени, когато е необходимо.

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

Директива ng-view в AngularJS

„ngView“ е директива, която допълва услугата $route, като включва изобразения шаблон на текущия маршрут в основния файл с оформление (index.html).

Всеки път, когато текущият маршрут се промени, изгледът включваше промени в него според конфигурацията на услугата $route, без да променя самата страница.

Ние ще покриваме маршрути в по-късна глава засега ще се съсредоточим върху добавянето на множество изгледи към нашето приложение.

По-долу е цялата блок-схема на това как работи целият процес. Ще разгледаме подробно всеки процес в нашия пример, показан по-долу.

Как да внедрите ng-view в AngularJS

Нека да разгледаме пример за това как можем да имплементираме ng-view в AngularJS. В нашия пример ще представим две опции на потребителя,

Единият е да се покаже „Събитие“, а другият е да се добави „Събитие“.
Когато потребителят щракне върху връзката Добавяне на събитие, ще му бъде показан изгледът за „Добавяне на събитие“, а същото важи и за „Показване на събитие“.

Моля, следвайте стъпките по-долу, за да получите този пример на място.

Стъпка 1) Включете файла angular-route като препратка към скрипт.

Този файл с маршрути е необходим, за да се използват функциите на множество маршрути и изгледи. Този файл може да бъде изтеглен от уебсайта на angularJS.

Стъпка 2) Добавете href тагове и div таг.

В този етап,

Добавете href тагове, които ще представляват връзки към „Добавяне на ново събитие“ и „Показване на събитие“.
Също така добавете етикет div с директивата ng-view, която ще представлява изгледа. Това ще позволи на съответния изглед да бъде инжектиран всеки път, когато потребителят щракне върху „Добавяне на връзка за ново събитие“ или върху „Показване на връзка за събитие“.

Стъпка 3) Във вашия таг на скрипт за Angular JS добавете следния код.

Нека не се тревожим за маршрутизирането, засега ще видим това в по-късна глава. Нека засега просто видим кода за изгледите.

Тази част от кода означава, че когато потребителят кликне върху href тага „NewEvent“, който е дефиниран в div тага по-рано. Той ще отиде на уеб страницата add_event.html и ще вземе кода от там и ще го инжектира в изгледа. Второ, за обработка на бизнес логиката за този изглед отидете на „AddEventController“.
Тази част от кода означава, че когато потребителят щракне върху етикета href „DisplayEvent“, който беше дефиниран в тага div по-рано. Той ще отиде на уеб страницата show_event.html, ще вземе кода от там и ще го инжектира в изгледа. Второ, за обработка на бизнес логиката за този изглед отидете на „ShowDisplayController“.
Този раздел от код означава, че изгледът по подразбиране, показван на потребителя, е изгледът DisplayEvent

Стъпка 4) Добавете контролери за обработка на бизнес логиката.

Следва добавяне на контролери за обработка на бизнес логиката както за функционалността „DisplayEvent“, така и „Добавяне на ново събитие“.

Ние просто добавяме променлива за съобщение към всеки обект на обхват за всеки контролер. Това съобщение ще се покаже, когато съответният изглед се покаже на потребителя.

<!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>

Стъпка 5) Създайте страници, наречени add_event.html и show_event.html

След това създайте страници, наречени add_event.html и show_event.html. Поддържайте страниците прости, както е показано по-долу.

В нашия случай страницата add_event.html ще има заглавен таг заедно с текста „Добавяне на ново събитие“ и ще има израз за показване на съобщението „Това е за добавяне на ново събитие“.

По същия начин страницата show_event.html също ще има заглавен таг, който да съдържа текста „Покажи събитие“ и също така ще има израз на съобщение за показване на съобщението „Това е за показване на събитие“.

Стойността на променливата на съобщението ще бъде инжектирана въз основа на контролера, който е прикрепен към изгледа.

За всяка страница ще добавим променливата съобщение, която ще бъде инжектирана от всеки съответен контролер.

add_event.html

<h2>Add New Event</h2>

{{message}}

show_event.html

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

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От изхода можем да забележим 2 неща

Адресната лента ще отразява какъв е текущият изглед, който се показва. Тъй като изгледът по подразбиране е да показва екрана за показване на събитие, адресната лента показва адреса за „DisplayEvent“.
Този раздел е изгледът, който се създава в движение. Тъй като изгледът по подразбиране е Показване на събитие, това е, което се показва на потребителя.

Сега щракнете върху връзката Добавяне на ново събитие в показаната страница. Сега ще получите резултата по-долу.

Изход:

Адресната лента вече ще отразява, че текущият изглед вече е изглед „Добавяне на ново събитие“. Забележете, че все още ще бъдете на същата страница за кандидатстване. Няма да бъдете насочени към нова страница за кандидатстване.
Този раздел е изгледът и сега ще се промени, за да покаже HTML за функцията „Добавяне на ново събитие“. Сега в този раздел заглавният таг „Добавяне на ново събитие“ и текстът „Това е за добавяне на ново събитие“ се показват на потребителя.

Какво е изглед?

Директива ng-view в AngularJS

Как да внедрите ng-view в AngularJS

СВЪРЗАНИ СТАТИИ

Регистрирайте се за бюлетина