Co je Controller v AngularJs?
A Controllers in AngularJs takes the data from the View, processing the data, and then send that data across to the view which is displayed to the end user. Správce bude mít vaši hlavní obchodní logiku.
Řídicí jednotka použije datový model, provede požadované zpracování a poté předá výstup do zobrazení, které se zase zobrazí koncovému uživateli.
V tomto výukovém programu se naučíte
- Co Controller dělá z úhlové perspektivy
- Jak sestavit základní ovladač
- Jak definovat metody v řadiči
- Použití ng-controller v externích souborech
- Primární odpovědností správce je kontrola dat, která jsou předávána do zobrazení. Rozsah a pohled mají obousměrnou komunikaci.
- Vlastnosti pohledu mohou v oboru nazývat „funkce“. Události v pohledu mohou navíc v oboru nazývat „metody“. Níže uvedený fragment kódu poskytuje jednoduchý příklad funkce.
- Funkce ($ scope), která je definována při definování řadiče a interní funkce, která se používá k vrácení zřetězení $ scope.firstName a $ scope.lastName.
- Když v AngularJS definujete funkci jako proměnnou, je známá jako metoda.
- Data tímto způsobem procházejí z řadiče do oboru a potom se data předávají tam a zpět z oboru do pohledu.
- Rozsah se používá k vystavení modelu pohledu. Model lze upravit pomocí metod definovaných v oboru, které lze spustit prostřednictvím událostí z pohledu. Můžeme definovat obousměrnou vazbu modelu z oboru na model.
- Řadiče by se v ideálním případě neměly používat pro manipulaci s DOM. To by mělo být provedeno směrnicemi, které uvidíme později.
- Osvědčeným postupem je mít ovladač založený na funkčnosti. Například pokud máte formulář pro vstup a potřebujete k tomu řadič, vytvořte řadič s názvem „řadič formuláře“.
- Přidáváme odkazy na šablony stylů CSS bootstrap, které budou použity ve spojení s knihovnami bootstrap.
- Přidáváme odkazy na knihovny angularjs. Takže teď na cokoli, co budeme dělat s angular.js, budeme v této knihovně odkazovat.
- Přidáváme odkazy na bootstrap knihovnu, aby naše webová stránka lépe reagovala na určité ovládací prvky.
- Přidali jsme odkazy na knihovny jquery, které budou použity pro manipulaci s DOM. To vyžaduje Angular, protože některé funkce v Angular jsou závislé na této knihovně.
- Nejprve rozdělíme naše soubory do 2 složek, jako je tomu u jakékoli běžné webové aplikace. Máme složku „CSS“. Bude obsahovat všechny naše soubory kaskádových stylů a pak budeme mít složku „lib“, která bude obsahovat všechny naše soubory JavaScriptu.
- Soubor bootstrap.css je umístěn ve složce CSS a slouží k přidání dobrého vzhledu a vzhledu našich webových stránek.
- Angular.js je náš hlavní soubor, který byl stažen z webu angularJS a uložen v naší složce lib.
- Soubor app.js bude obsahovat náš kód pro řadiče.
- Soubor bootstrap.js se používá k doplnění souboru bootstrap.cs o přidání funkce bootstrap do naší webové aplikace.
- Soubor jquery bude použit k přidání funkčnosti manipulace DOM na náš web.
Co dělá Controller z pohledu Angular
Následuje jednoduchá definice práce Angular JS Controller.
Jak sestavit základní ovladač
Než začneme s tvorbou řadiče, musíme nejprve mít připraveno základní nastavení stránky HTML.
Níže uvedený fragment kódu je jednoduchá stránka HTML, která má název „Registrace události“ a obsahuje odkazy na důležité knihovny, jako je Bootstrap, jquery a Angular.
Ve výchozím nastavení bude výše uvedený fragment kódu přítomen ve všech našich příkladech, abychom mohli v následujících částech zobrazit pouze konkrétní kód angularJS.
Za druhé se podívejme na naše soubory a strukturu souborů, se kterou začneme po celou dobu našeho kurzu.
Podívejme se na příklad, jak používat angular.js,
To, co zde chceme udělat, je pouze zobrazit slova „AngularJS“ v textovém formátu i v textovém poli při prohlížení stránky v prohlížeči.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Vysvětlení kódu:
- Ng-app klíčové slovo se používá k označení, že tato aplikace je třeba považovat za úhlovou aplikaci. Cokoli, co začíná předponou „ng“, se označuje jako směrnice. „DemoApp“ je název pro naši aplikaci Angular.JS.
- Vytvořili jsme značku div a do této značky jsme přidali směrnici ng-controller spolu s názvem našeho řadiče "DemoController". To v zásadě umožňuje naší značce div přístup k obsahu demo ovladače. Musíte uvést název řadiče podle směrnice, abyste zajistili přístup k funkcím definovaným v řadiči.
- Vytváříme vazbu modelu pomocí direktivy ng-model. Co to dělá, je to, že váže textové pole pro název kurzu, který má být vázán na členskou proměnnou "tutorialName".
- Vytváříme členskou proměnnou nazvanou "tutorialName", která bude použita k zobrazení informací, které uživatel zadá do textového pole pro Název kurzu.
- Vytváříme modul, který se připojí k naší aplikaci DemoApp. Tento modul se nyní stává součástí naší aplikace.
- V modulu definujeme funkci, která přiřadí výchozí hodnotu „AngularJS“ naší proměnné tutorialName.
Pokud je příkaz úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Protože jsme proměnné tutorialName přiřadili hodnotu „Angular JS“, zobrazí se to v textovém poli a v řádku prostého textu.
Jak definovat metody v řadiči
Normálně by člověk chtěl definovat více metod v řadiči, aby oddělil obchodní logiku.
Předpokládejme například, že pokud chcete, aby váš ovladač udělal 2 základní věci,
- Proveďte přidání 2 čísel
- Proveďte odečtení 2 čísel
Pak byste v ideálním případě vytvořili 2 metody uvnitř vašeho řadiče, jednu k provedení sčítání a druhou k provedení odčítání.
Podívejme se na jednoduchý příklad toho, jak můžete definovat vlastní metody v řadiči Angular.JS. Řadič jednoduše vrátí řetězec.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Vysvětlení kódu:
- Zde definujeme pouze funkci, která vrací řetězec „AngularJS“. Funkce je připojena k objektu oboru prostřednictvím členské proměnné s názvem tutorialName.
- Pokud je příkaz úspěšně proveden, při spuštění kódu v prohlížeči se zobrazí následující výstup.
Výstup:
Použití ng-controller v externích souborech
Podívejme se na příklad „HelloWorld“, kde byly všechny funkce umístěny do jednoho souboru. Nyní je čas umístit kód pro řadič do samostatných souborů.
Postupujeme podle níže uvedených kroků.
Krok 1) V souboru app.js přidejte následující kód pro váš řadič
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Výše uvedený kód provádí následující věci,
- Definujte modul s názvem „aplikace“, který bude držet ovladač spolu s funkcemi ovladače.
- Vytvořte řadič s názvem „HelloWorldCtrl“. Tento řadič bude mít funkci pro zobrazení zprávy „Hello World“.
- Objekt oboru se používá k předávání informací z řadiče do pohledu. V našem případě bude objekt oboru použit k uložení proměnné zvané „zpráva“.
- Definujeme proměnnou zprávu a přiřazujeme jí hodnotu „Hello World“.
Krok 2) Nyní do souboru Sample.html přidejte třídu div, která bude obsahovat direktivu ng-controller, a poté přidejte odkaz na členskou proměnnou „message“
Nezapomeňte také přidat odkaz na soubor skriptu app.js, který obsahuje zdrojový kód pro váš řadič.
Event Registration Guru99 Global Event
{{message}}
Pokud je výše uvedený kód zadán správně, zobrazí se při spuštění kódu v prohlížeči následující výstup.
Výstup:
souhrn
- Primární odpovědností správce je vytvořit objekt oboru, který se zase předá do zobrazení
- Jak vytvořit jednoduchý řadič pomocí směrnic ng-app, ng-controller a ng-model
- Jak přidat vlastní metody do řadiče, kterým lze oddělit různé funkce v modulu angularjs.
- Řadiče lze definovat v externích souborech a oddělit tuto vrstvu od vrstvy Zobrazit. Toto je obvykle nejlepší postup při vytváření webových aplikací.