AngularJS Controllers s příkladem ng-Controller

Co je Controller v AngularJS?

A kontrolor v AngularJS převezme data z pohledu, zpracuje data a poté je odešle do pohledu, který se zobrazí koncovému uživateli. Controller bude mít vaši hlavní obchodní logiku. Správce použije datový model, provede požadované zpracování a poté předá výstup do pohledu, který se následně zobrazí koncovému uživateli.

Co dělá Controller z pohledu Angular?

Následuje jednoduchá definice fungování AngularJS Controller:

Primární odpovědností správce je kontrolovat data, která jsou předávána pohledu. Rozsah a pohled mají obousměrnou komunikaci.
Vlastnosti pohledu mohou volat „funkce“ v rozsahu. Navíc události na pohledu mohou volat „metody“ na rozsahu. Níže uvedený fragment kódu poskytuje jednoduchý příklad funkce.

Jedno funkce ($scope) který je definován při definování řadiče a interní funkce, která se používá k vrácení zřetězení $scope.firstName a $scope.lastName.
In AngularJS, když definujete funkci jako proměnnou, je známá jako metoda.

Data tímto způsobem přecházejí od správce do rozsahu a poté data přecházejí tam a zpět z rozsahu do zobrazení.
Rozsah se používá k vystavení modelu pohledu. Model lze upravovat pomocí metod definovaných v rozsahu, které lze spouštět prostřednictvím událostí z pohledu. Můžeme definovat obousměrnou vazbu modelu z rozsahu na model.
Ovladače by v ideálním případě neměly být používány pro manipulaci s DOM. To by mělo být provedeno pomocí direktiv, které uvidíme později.
Nejlepší praxí je mít ovladače založené na funkčnosti. Pokud máte například formulář pro vstup a potřebujete k tomu ovladač, vytvořte ovladač nazvaný „řadič formuláře“.

Jak vytvořit základní ovladač v AngularJS

Níže jsou uvedeny kroky k vytvoření ovladače v AngularJS:

Krok 1) Vytvořte základní HTML stránku

Než začneme s vytvářením kontroleru, musíme mít nejprve připraveno naše základní nastavení HTML stránky.

Níže uvedený úryvek kódu je jednoduchá stránka HTML, která má název „Registrace události“ a obsahuje odkazy na důležité knihovny, např. Bootstrap, jquery a Angular.

Přidáváme odkazy na bootstrap CSS styly, které budou použity ve spojení s bootstrap knihovnami.
Přidáváme odkazy na knihovny angularjs. Takže cokoli, co v budoucnu uděláme s angular.js, bude odkazováno z této knihovny.
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ě.

Ve výchozím nastavení bude výše uvedený fragment kódu přítomen ve všech našich příkladech, takže v následujících částech můžeme zobrazit pouze konkrétní kód angularJS.

Krok 2) Zkontrolujte soubory a strukturu souborů

Za druhé, podívejme se na naše soubory a strukturu souborů, kterými začneme po dobu trvání našeho kurzu.

Nejprve rozdělíme naše soubory do 2 složek, jak se to dělá s jakoukoli běžnou webovou aplikací. Máme složku „CSS“. Bude obsahovat všechny naše soubory kaskádových stylů a pak budeme mít naši složku „lib“, která bude mít všechny naše JavaScénář soubory.
Soubor bootstrap.css je umístěn ve složce CSS a používá se pro přidání dobrého vzhledu a chování našeho webu.
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 ovladače.
Soubor bootstrap.js se používá k doplnění souboru bootstrap.cs a přidává do naší webové aplikace funkci bootstrap.
Soubor jquery bude použit k přidání funkcí manipulace DOM na naše stránky.

Krok 3) Pro zobrazení výstupu použijte kód AngularJS

Chceme zde pouze zobrazit slova „AngularJS“ v textovém formátu i v textovém poli, když je stránka zobrazena v prohlížeči. Podívejme se na příklad, jak k tomu použít angular.js:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Vysvětlení kódu:

Jedno ng-app Klíčové slovo se používá k označení, že tato aplikace by měla být považována za úhlovou aplikaci. Cokoli, co začíná předponou 'ng' je známý jako Směrnice. „DemoApp“ je název naší aplikace Angular.JS.
Vytvořili jsme tag div a do tohoto tagu jsme přidali direktivu ng-controller spolu s názvem našeho Controlleru „DemoController“. Díky tomu v podstatě naše značka div umožňuje přístup k obsahu Demo Controlleru. V rámci směrnice musíte uvést jméno řídicí jednotky, abyste zajistili, že budete mít přístup k funkcím definovaným v řídicí jednotce.
Vytváříme modelovou vazbu pomocí direktivy ng-model. To dělá to, že sváže textové pole pro název výukového programu, aby bylo svázáno s členskou proměnnou „název výukového programu“.
Vytváříme členskou proměnnou nazvanou „tutorialName“, která bude sloužit 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 tedy nyní stává součástí naší aplikace.
V modulu definujeme funkci, která naší proměnné tutorialName přiřadí výchozí hodnotu „AngularJS“.

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 ovladačích AngularJS

Normálně by bylo vhodné definovat více metod v řadiči pro oddělení obchodní logiky.

Předpokládejme například, že byste chtěli, aby váš ovladač dělal 2 základní věci,

Proveďte sečtení 2 čísel
Proveďte odčítání 2 čísel

Pak byste ideálně vytvořili 2 metody uvnitř vašeho kontroléru, jednu pro provádění sčítání a druhou pro provádění odečítání.

Podívejme se na jednoduchý příklad, jak můžete definovat vlastní metody v rámci ovladače Angular.JS. Ovladač jednoduše vrátí řetězec.

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Vysvětlení kódu:

Zde právě definujeme 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:

Příklad AngularJS Controller s ng-Controller

Podívejme se na příklad „HelloWorld“, kde byly všechny funkce umístěny v jediném souboru. Nyní je čas umístit kód ovladače do samostatných souborů.

Postupujte podle níže uvedených kroků:

Krok 1) Do souboru app.js přidejte následující kód pro váš ovladač

angular.module('app',[]).controller('HelloWorldCtrl',function($scope)
{
	$scope.message = "Hello World"
});

Výše uvedený kód dělá následující věci:

Definujte modul nazvaný „app“, který bude držet ovladač spolu s funkcí ovladače.
Vytvořte ovladač s názvem „HelloWorldCtrl“. Tento ovladač bude sloužit k tomu, aby měl funkci pro zobrazení zprávy „Ahoj světe“.
Objekt rozsahu se používá k předávání informací z řadiče do pohledu. Takže v našem případě bude objekt scope použit k uložení proměnné nazvané „zpráva“.
Definujeme proměnnou zprávu a přiřadíme 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 vašeho ovladače.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

Pokud je výše uvedený kód zadán správně, po spuštění kódu v prohlížeči se zobrazí následující výstup.

Výstup:

Shrnutí

Primární odpovědností správce je vytvořit objekt rozsahu, který se následně předá pohledu
Jak vytvořit jednoduchý ovladač pomocí direktiv ng-app, ng-controller a ng-model
Jak přidat vlastní metody do ovladače, které lze použít k oddělení různých funkcí v modulu angularjs.
V externích souborech lze definovat ovladače pro oddělení této vrstvy od vrstvy Pohled. To je obvykle osvědčený postup při vytváření webových aplikací.

Co je Controller v AngularJS?

Co dělá Controller z pohledu Angular?

Jak vytvořit základní ovladač v AngularJS

SOUVISEJÍCÍ ČLÁNKY

Jak definovat metody v ovladačích AngularJS

Příklad AngularJS Controller s ng-Controller

Shrnutí

Přihlaste se k odběru newsletteru