Hvad er controller i AngularJs?
En controllere i AngularJs tager dataene fra visningen, behandler dataene og sender derefter dataene til den visning, der vises til slutbrugeren. Controlleren har din kerneforretningslogik.
Controlleren bruger datamodellen, udfører den nødvendige behandling og sender derefter output til den visning, som igen vises til slutbrugeren.
I denne vejledning lærer du-
- Hvad Controller gør fra Angular 's perspektiv
- Sådan bygger du en grundlæggende controller
- Sådan defineres metoder i controller
- Brug af ng-controller i eksterne filer
- Den registeransvarliges primære ansvar er at kontrollere de data, der overføres til visningen. Omfanget og udsigten har tovejskommunikation.
- Visningens egenskaber kan kalde "funktioner" i omfanget. Desuden kan begivenheder på visningen kalde "metoder" på omfanget. Nedenstående kodestykke giver et simpelt eksempel på en funktion.
- Funktionen ($ scope), der defineres, når controlleren defineres, og en intern funktion, der bruges til at returnere sammenkædningen af $ scope.firstName og $ scope.lastName.
- I AngularJS, når du definerer en funktion som en variabel, er den kendt som en metode.
- Data på denne måde overføres fra controlleren til omfanget, og derefter går dataene frem og tilbage fra omfanget til visningen.
- Omfanget bruges til at udsætte modellen for visningen. Modellen kan ændres via metoder defineret i omfanget, som kan udløses via begivenheder fra visningen. Vi kan definere tovejs modelbinding fra omfanget til modellen.
- Controllere bør ikke ideelt set bruges til at manipulere DOM. Dette skal ske ved hjælp af de direktiver, som vi senere vil se.
- Bedste praksis er at have controller baseret på funktionalitet. For eksempel, hvis du har en formular til input, og du har brug for en controller til det, skal du oprette en controller kaldet "form controller".
- Vi tilføjer referencer til bootstrap CSS-stilark, som vil blive brugt sammen med bootstrap-bibliotekerne.
- Vi tilføjer referencer til angularjs-bibliotekerne. Så uanset hvad vi gør med angular.js fremad, henvises der til fra dette bibliotek.
- Vi tilføjer referencer til bootstrap-biblioteket for at gøre vores webside mere lydhør over for bestemte kontroller.
- Vi har tilføjet referencer til jquery-biblioteker, som vil blive brugt til DOM-manipulation. Dette kræves af Angular, fordi noget af funktionaliteten i Angular er afhængig af dette bibliotek.
- Først adskiller vi vores filer i 2 mapper, som det gøres med enhver konventionel webapplikation. Vi har mappen "CSS". Den vil indeholde alle vores kaskadefiler til stilark, og så har vi vores "lib" -mappe, som vil have alle vores JavaScript-filer.
- Bootstrap.css-filen placeres i CSS-mappen, og den bruges til at tilføje et godt udseende for vores hjemmeside.
- Angular.js er vores hovedfil, der blev downloadet fra angularJS-webstedet og opbevaret i vores lib-mappe.
- App.js-filen indeholder vores kode til controllerne.
- Bootstrap.js-filen bruges til at supplere bootstrap.cs-filen for at tilføje bootstrap-funktionalitet til vores webapplikation.
- Jquery-filen vil blive brugt til at tilføje DOM-manipulationsfunktionalitet til vores websted.
Hvad Controller gør fra Angular's perspektiv
Følgende er en simpel definition af bearbejdning af Angular JS Controller.
Sådan bygger du en grundlæggende controller
Før vi starter med oprettelsen af en controller, skal vi først have vores grundlæggende HTML-sideopsætning på plads.
Nedenstående kodestykke er en simpel HTML-side, der har titlen "Begivenhedsregistrering" og har referencer til vigtige biblioteker såsom Bootstrap, jquery og Angular.
Som standard vil ovenstående kodestykke være til stede i alle vores eksempler, så vi kun kan vise den specifikke angularJS-kode i de efterfølgende afsnit.
Lad os for det andet se på vores filer og filstruktur, som vi skal starte med i løbet af vores kursus.
Lad os se et eksempel på, hvordan man bruger angular.js,
Hvad vi vil gøre her er bare at vise ordene "AngularJS" i både tekstformat og i et tekstfelt, når siden vises i browseren.
Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kode Forklaring:
- Den ng-app søgeord anvendes til at betegne, at denne ansøgning skal betragtes som en kantet ansøgning. Alt, der starter med præfikset 'ng', er kendt som et direktiv. "DemoApp" er navnet på vores Angular.JS-applikation.
- Vi har oprettet et div-tag, og i dette tag har vi tilføjet et ng-controller-direktiv sammen med navnet på vores Controller "DemoController". Dette gør grundlæggende vores div-tag mulighed for at få adgang til indholdet af Demo Controller. Du skal nævne navnet på controlleren under direktivet for at sikre, at du er i stand til at få adgang til den funktionalitet, der er defineret i controlleren.
- Vi opretter en modelbinding ved hjælp af ng-model direktivet. Hvad dette gør er, at det binder tekstfeltet til Tutorial Name, der skal bindes til medlemsvariablen "tutorialName".
- Vi opretter en medlemsvariabel kaldet "tutorialName", som vil blive brugt til at vise de oplysninger, som brugeren skriver i tekstfeltet til Tutorial Name.
- Vi opretter et modul, der vedhæftes vores DemoApp-applikation. Så dette modul bliver nu en del af vores applikation.
- I modulet definerer vi en funktion, der tildeler en standardværdi på "AngularJS" til vores tutorialName-variabel.
Hvis kommandoen udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Da vi tildelte variablen tutorialName en værdi på "Angular JS", vises dette i tekstfeltet og i tekstlinjen.
Sådan defineres metoder i controller
Normalt vil man definere flere metoder i controlleren til at adskille forretningslogikken.
Antag for eksempel, at hvis du ville have din controller til at gøre 2 grundlæggende ting,
- Udfør tilføjelsen af 2 tal
- Udfør subtraktion af 2 tal
Derefter opretter du ideelt set to metoder inde i din controller, en til at udføre tilføjelsen og den anden til at udføre subtraktionen.
Lad os se et simpelt eksempel på, hvordan du kan definere brugerdefinerede metoder inden for en Angular.JS-controller. Controlleren returnerer simpelthen en streng.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName}}
Kode Forklaring:
- Her definerer vi bare en funktion, der returnerer en streng af "AngularJS". Funktionen er knyttet til omfangsobjektet via en medlemsvariabel kaldet tutorialName.
- Hvis kommandoen udføres med succes, vises følgende output, når du kører din kode i browseren.
Produktion:
Brug af ng-controller i eksterne filer
Lad os se på et eksempel på "HelloWorld", hvor al funktionalitet blev placeret i en enkelt fil. Nu er det tid til at placere koden til controlleren i separate filer.
Lad os følge nedenstående trin for at gøre dette.
Trin 1) I app.js-filen skal du tilføje følgende kode til din controller
angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});
Ovenstående kode gør følgende ting,
- Definer et modul kaldet "app", som holder controlleren sammen med controllerens funktionalitet.
- Opret en controller med navnet "HelloWorldCtrl". Denne controller bruges til at have en funktionalitet til at vise en "Hello World" -meddelelse.
- Scope-objektet bruges til at videregive oplysninger fra controlleren til visningen. Så i vores tilfælde vil omfangsobjektet blive brugt til at indeholde en variabel kaldet "meddelelse".
- Vi definerer den variable besked og tildeler værdien "Hello World" til den.
Trin 2) Tilføj nu en div-klasse i din Sample.html-fil, der indeholder ng-controller-direktivet, og tilføj derefter en reference til medlemsvariablen "meddelelse"
Glem ikke at tilføje en reference til scriptfilen app.js, som har kildekoden til din controller.
Event Registration Guru99 Global Event
{{message}}
Hvis ovenstående kode er indtastet korrekt, vises følgende output, når du kører din kode i browseren.
Produktion:
Resumé
- Controllerens primære ansvar er at skabe et scope-objekt, som igen overføres til visningen
- Sådan oprettes en simpel controller ved hjælp af ng-app-, ng-controller- og ng-modeldirektiverne
- Sådan tilføjes brugerdefinerede metoder til en controller, som kan bruges til at adskille forskellige funktioner inden for et angularjs-modul.
- Controllere kan defineres i eksterne filer for at adskille dette lag fra View-laget. Dette er normalt en god praksis, når du opretter webapplikationer.