AngularJS-kontrollere med ng-kontroller eksempel

Hva er kontroller i AngularJS?

A controller i AngularJS tar dataene fra visningen, behandler dataene og sender deretter disse dataene til visningen som vises til sluttbrukeren. Kontrolleren vil ha din kjernevirksomhetslogikk. Kontrolløren vil bruke datamodellen, utføre den nødvendige behandlingen og deretter sende utdataene til visningen som igjen vises til sluttbrukeren.

Hva kontrollerer gjør fra Angulars perspektiv?

Følgende er en enkel definisjon av hvordan AngularJS-kontrolleren fungerer:

Arbeid med AngularJS-kontrolleren
Arbeid med AngularJS-kontrolleren
  • Den behandlingsansvarliges primære ansvar er å kontrollere dataene som sendes til visningen. Omfanget og utsikten har toveiskommunikasjon.
  • Egenskapene til visningen kan kalle "funksjoner" på skopet. Dessuten kan hendelser på visningen kalle "metoder" på omfanget. Kodebiten nedenfor gir et enkelt eksempel på en funksjon.
    • De funksjon($omfang) som er definert ved definering av kontrolleren og en intern funksjon som brukes til å returnere sammenkoblingen av $scope.firstName og $scope.lastName.
    • In AngularJS, når du definerer en funksjon som en variabel, er den kjent som en metode.

Arbeid med AngularJS-kontrolleren

  • Data går på denne måten fra kontrolløren til scope, og deretter går dataene frem og tilbake fra scope til visningen.
  • Omfanget brukes til å eksponere modellen for utsikten. Modellen kan modifiseres via metoder definert i scope som kan utløses via hendelser fra visningen. Vi kan definere toveis modellbinding fra omfanget til modellen.
  • Kontrollere bør ideelt sett ikke brukes til å manipulere DOM. Dette bør gjøres av direktivene som vi vil se senere.
  • Beste praksis er å ha kontroller basert på funksjonalitet. For eksempel, hvis du har et skjema for inndata og du trenger en kontroller for det, lag en kontroller kalt "skjemakontroller".

Hvordan bygge en grunnleggende kontroller i AngularJS

Nedenfor er trinnene for å lage en kontroller i AngularJS:

Trinn 1) Lag en grunnleggende HTML-side

Før vi starter med å lage en kontroller, må vi først ha vårt grunnleggende HTML-sideoppsett på plass.

Kodebiten nedenfor er en enkel HTML-side som har tittelen "Event Registration" og har referanser til viktige biblioteker som f.eks. Bootstrap, jquery og Angular.

Bygg en grunnleggende kontroller i AngularJS

  1. Vi legger til referanser til bootstrap CSS-stilarkene, som vil bli brukt sammen med bootstrap-bibliotekene.
  2. Vi legger til referanser til angularjs-bibliotekene. Så nå vil det vi gjør med angular.js fremover bli referert fra dette biblioteket.
  3. Vi legger til referanser til bootstrap-biblioteket for å gjøre nettsiden vår mer responsiv for visse kontroller.
  4. Vi har lagt til referanser til jquery-biblioteker som vil bli brukt til DOM-manipulasjon. Dette kreves av Angular fordi noe av funksjonaliteten i Angular er avhengig av dette biblioteket.

Som standard vil kodebiten ovenfor være til stede i alle eksemplene våre, slik at vi bare kan vise den spesifikke angularJS-koden i de påfølgende delene.

Trinn 2) Sjekk filene og filstrukturen

For det andre, la oss se på filene og filstrukturen som vi skal begynne med under hele kurset.

Bygg en grunnleggende kontroller i AngularJS

  1. Først deler vi filene våre i 2 mapper, slik det gjøres med alle konvensjonelle nettapplikasjoner. Vi har mappen "CSS". Den vil inneholde alle våre overlappende stilarkfiler, og så vil vi ha vår "lib"-mapp som vil ha alle våre JavaScript filer.
  2. Bootstrap.css-filen er plassert i CSS-mappen og den brukes til å legge til et godt utseende og følelse for nettstedet vårt.
  3. angular.js er hovedfilen vår som ble lastet ned fra angularJS-siden og holdt i lib-mappen vår.
  4. App.js-filen vil inneholde koden vår for kontrollerene.
  5. Bootstrap.js-filen brukes til å supplere bootstrap.cs-filen for å legge til bootstrap-funksjonalitet til webapplikasjonen vår.
  6. jquery-filen vil bli brukt til å legge til DOM-manipulasjonsfunksjonalitet til nettstedet vårt.

Trinn 3) Bruk AngularJS-koden for å vise utdataene

Det vi ønsker å gjøre her er bare å vise ordene "AngularJS" i både tekstformat og i en tekstboks når siden vises i nettleseren. La oss se et eksempel på hvordan du bruker angular.js for å gjøre dette:

Bygg en grunnleggende kontroller i AngularJS

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

Kodeforklaring:

  1. De ng-app nøkkelord brukes for å angi at denne applikasjonen bør betraktes som en vinkelapplikasjon. Alt som begynner med prefikset 'ng' er kjent som en Direktiver. "DemoApp" er navnet som er gitt til vår Angular.JS-applikasjon.
  2. Vi har laget en div-tag og i denne taggen har vi lagt til et ng-controller-direktiv sammen med navnet på vår Controller "DemoController". Dette gjør i utgangspunktet vår div-tag til å få tilgang til innholdet i demokontrolleren. Du må nevne navnet på kontrolleren i henhold til direktivet for å sikre at du har tilgang til funksjonaliteten som er definert i kontrolleren.
  3. Vi lager en modellbinding ved å bruke ng-modelldirektivet. Det dette gjør er at det binder tekstboksen for Tutorial Name for å være bundet til medlemsvariabelen "tutorialName".
  4. Vi lager en medlemsvariabel kalt "tutorialName" som vil bli brukt til å vise informasjonen som brukeren skriver inn i tekstboksen for Tutorial Name.
  5. Vi lager en modul som skal legges til vår DemoApp-applikasjon. Så denne modulen blir nå en del av vår applikasjon.
  6. I modulen definerer vi en funksjon som tildeler en standardverdi på "AngularJS" til vår tutorialName-variabel.

Hvis kommandoen utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Bygg en grunnleggende kontroller i AngularJS

Siden vi tildelte variabelen tutorialName en verdi på "Angular JS", blir dette vist i tekstboksen og i ren tekstlinjen.

Hvordan definere metoder i AngularJS-kontrollere

Normalt vil man definere flere metoder i kontrolleren for å skille forretningslogikken.

Tenk deg for eksempel at hvis du ønsker å få kontrolleren til å gjøre to grunnleggende ting,

  1. Legg til 2 tall
  2. Utfør subtraksjon av 2 tall

Du vil da ideelt sett lage 2 metoder inne i kontrolleren, en for å utføre addisjonen og den andre for å utføre subtraksjonen.

La oss se et enkelt eksempel på hvordan du kan definere tilpassede metoder i en Angular.JS-kontroller. Kontrolleren vil ganske enkelt returnere en streng.

Definer metoder i AngularJS-kontrollere

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

Kodeforklaring:

  1. Her definerer vi bare en funksjon som returnerer en streng med "AngularJS". Funksjonen er knyttet til scope-objektet via en medlemsvariabel kalt tutorialName.
  2. Hvis kommandoen utføres vellykket, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

Definer metoder i AngularJS-kontrollere

AngularJS Controller med ng-Controller Eksempel

La oss se på et eksempel på "HelloWorld" der all funksjonalitet ble plassert i en enkelt fil. Nå er det på tide å plassere koden for kontrolleren i separate filer.

La oss følge trinnene nedenfor for å gjøre dette:

Trinn 1) I app.js-filen legger du til følgende kode for kontrolleren din

AngularJS-kontroller med ng-kontroller

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

Koden ovenfor gjør følgende ting:

  1. Definer en modul kalt "app" som vil holde kontrolleren sammen med kontrollerens funksjonalitet.
  2. Lag en kontroller med navnet "HelloWorldCtrl". Denne kontrolleren vil bli brukt til å ha en funksjonalitet for å vise en "Hello World"-melding.
  3. Omfangsobjektet brukes til å sende informasjon fra kontrolleren til visningen. Så i vårt tilfelle vil scope-objektet bli brukt til å holde en variabel kalt "melding".
  4. Vi definerer variabelmeldingen og tildeler verdien "Hello World" til den.

Trinn 2) Legg nå til en div-klasse i Sample.html-filen som vil inneholde ng-controller-direktivet og legg deretter til en referanse til medlemsvariabelen "melding"

Ikke glem å legge til en referanse til skriptfilen app.js som har kildekoden til kontrolleren din.

AngularJS-kontroller med ng-kontroller

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

Hvis koden ovenfor er skrevet inn riktig, vil følgende utdata vises når du kjører koden i nettleseren.

Utgang:

AngularJS-kontroller med ng-kontroller

Oppsummering

  • Kontrollørens primære ansvar er å lage et scope-objekt som igjen overføres til visningen
  • Hvordan bygge en enkel kontroller ved å bruke direktivene ng-app, ng-controller og ng-modell
  • Hvordan legge til tilpassede metoder til en kontroller som kan brukes til å skille ulike funksjonaliteter i en angularjs-modul.
  • Kontrollere kan defineres i eksterne filer for å skille dette laget fra View-laget. Dette er vanligvis en god praksis når du lager nettapplikasjoner.