Overzicht van AngularJS
Bij Brat Tech LLC in 2009 ontwikkelden ontwikkelaars Misko Hevery en Adam Abrons een AngularJS-raamwerk waarna een revolutie plaatsvond in front-end ontwikkeling en het bouwen van applicaties met één pagina. AngularJS is een JavaScript-raamwerk dat HTML-elementen bindt aan JavaScript-objecten. Gegevensbinding en afhankelijkheidsinjectie zijn enkele van de toonaangevende functies van AngularJ's die tijd besparen bij het schrijven van lange codes, waardoor ontwikkelaars en browsers gemakkelijker kunnen werken. Hoe dat wordt bereikt, zal diepgaand verder worden uitgelegd, maar voor nu herinner je je deze terminologieën. In dit onderwerp gaan we meer te weten over de AngularJS-versie.
Versies van AngularJS
AngularJS is de Angular 1.x-versie en daarna wordt Angular 2 ontwikkeld die verschilt van Angular 1.x. werken.
Waarom AngularJS-versie en hoe werkt het?
AngularJS helpt ons om interactieve applicaties met één pagina te ontwikkelen. Met toepassingen met één pagina bedoel ik dat de enkele pagina die u hebt bezocht alle andere inhoud zal laden met behulp van javascript. Deze functie helpt de applicatie snel en effectief te zijn.
Wanneer we Javascript en HTML gebruiken om applicaties te bouwen, moet u de weergave aan het model binden met behulp van JS-functies en objecten. Maar als u denkt dat deze tweerichtingsgegevensbinding in een praktische industriële toepassing dezelfde aanpak is, wordt het moeizaam met lange codes. Dat is een van de belangrijkste redenen waarom AngularJS moest worden geleerd en ontwikkeld.
Tijd om enkele basisconcepten te leren voordat u begint met het ontwikkelen van applicaties waarop AngularJS is gebouwd:
- Model: het model bevat gegevens, objecten en logica.
- Weergave: dit is de visuele presentatie van de toepassing die ook een gebruikersinterface wordt genoemd.
- View to Model tweerichtingsbinding: Het javascript-object, dwz het object dat u wilt binden aan een HTML-DOM voor bijvoorbeeld een tekstvak, invoer of eventuele HTML-tags en vice versa kan eenvoudig worden gedaan met behulp van een aantal vooraf gedefinieerde AngularJS-bibliotheken.
- Controllers: Controllers zijn javascript-functies die het model en de weergave verbinden.
- Services: AngularJS-services zijn javascript-functies die een specifieke taak of functionaliteit uitvoeren die worden onderhouden en getest door javascript. Enkele voorbeelden van services zijn $ scope, $ http, $ rootScope.
- Uitdrukkingen: Uitdrukkingen worden gebruikt om gegevens te binden met HTML. Deze functie wordt ook wel interpolatie genoemd. Uitdrukkingen worden geschreven met ((expression)) accolades. Uitdrukkingen worden geëvalueerd en kunnen zonder html-tags worden geschreven.
- Modules: Modules werken als een container die verschillende delen van de hoekapplicatie bevat, zoals controller, services, richtlijnen, etc.
Richtlijnen en toepassingsgebied
Laten we ons concentreren op enkele van de vooraf gedefinieerde richtlijnen en hoe deze daadwerkelijk werken. Het grootste deel van deze richtlijn begint met 'ng' uit Angular
1. Reikwijdte
- Het bereik definieert het javascript-object waarmee gegevens toegankelijk zijn van Model tot HTML. Scope werkt als een connector tussen de twee.
- Sommige scoopservices zijn $ scope, $ rootScope. '$' definieert dat deze services vooraf zijn gedefinieerd en niet kunnen worden gewijzigd. Vergeet niet dat HTML niet hoofdlettergevoelig is, maar AngularJS is hoofdlettergevoelig, dus $ Scope geeft een foutmelding als ongedefinieerd.
- Het is vereist om deze aan te geven in onze controllerfunctie en Angular zal het automatisch injecteren.
2. ng-controller
- Deze richtlijn wordt gebruikt om een instantie / object van de controller te maken waarmee HTML DOM communiceert met de werkelijke logica.
- HTML zegt dat elke tag met een '-' wordt genegeerd tijdens het maken van HTML DOM.
- Zodra DOM is gemaakt, vindt Angular Interpreter een ng-controllerrichtlijn en maakt een instantie van de specifieke controller die ook een $ scope-service biedt.
- Er kunnen veel ng-controller in een enkele HTML-pagina zijn.
3. ng-app
- Deze richtlijn fungeert als een container met controllers, richtlijnen, filters, uitdrukkingen, enz. Het registreert of start de toepassing of de module.
- Er bestaat slechts één ng-app in uw HTML. Onder één ng-app kunnen er veel ng-controllers zijn.
Dit instantieert een applicatieobject met $ rootScope-service.
- Zo zijn $ rootScope-variabelen / functies toegankelijk in een complete applicatie.
4. ng-model
- ng-model wordt gebruikt om de gegevens van html aan modelobject te binden. Het biedt tweezijdige binding.
5. ng-als
- Voorwaardelijke instructies uitvoeren op HTML-tags ng-if wordt gebruikt. Als de voorwaarde vals wordt, bevat de DOM die div niet op DOM.
6. ng-binden
- In plaats van (()) te gebruiken voor interpolatie, kan ng-bind ook worden gebruikt.
7. ng-uitgeschakeld
- Op basis van een voorwaarde kan een element in de weergave worden uitgeschakeld.
8. ng-show
- Als de gegeven voorwaarde voor ng-show waar is, wordt het specifieke element weergegeven op de DOM.
9. verbergen
- Als de gegeven voorwaarde voor ng-hide waar is, blijft het specifieke element verborgen in de DOM.
10. ng-herhalen
- Het zal de specifieke div of span op HTML herhalen met de lengte van de array of de lijst.
11. ng-klikken
- Bij een klikgebeurtenis op het html-element voert het de aangeboden functionaliteit of taak uit.
Tip: de beste manier om elke taal te leren, is deze te coderen. Dus laten we onze eerste code bekijken.
Voorbeelden van AngularJS-versie
Hier zijn enkele van de onderstaande voorbeelden
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
First Name:
Last Name:
Your name is: (( fname +" "+ lname))
Output:
Voornaam: Joseph
Achternaam: Alex
Uw naam is: Joseph Alex
Er zijn enkele aandachtspunten van het bovenstaande codefragment:
- Op regel 3 wordt een angular.min.js-bestand aan de pagina toegevoegd dat alle vereiste bibliotheken laadt voor het uitvoeren van de AngularJS-toepassing.
- AngularJS heeft voornamelijk 2 bibliotheken angular.js en een gecomprimeerde versie van dit bestand als angular.min.js.
- Op regel 5 kunt u de richtlijn zien als ng-app die wordt genegeerd door HTML terwijl Html DOM wordt gemaakt en door AngularJS wordt gebruikt als een van de richtlijnen om de toepassing te starten.
- Op regel 6, 7 wordt ng-model gebruikt dat de tekst die u in het tekstvak invoert zal binden aan de variabelen fname en lname. Onthoud dat deze variabelen hoofdlettergevoelig zijn.
- Op regel 8 ziet u de uitdrukking ((fname + ”“ + lname)) welke hoek de gegevens die u invoert in tekstvakken evalueert en weergeeft. Dit staat bekend als interpolatie.
Laten we nog een voorbeeld bekijken:
var app = angular.module('CustomerApp', ());
controller('firstController', function($scope)(
$scope.customerName = 'Joe';
$scope.customerAge = '26';
));
Voornaam:
Achternaam:
Klantnaam is ((customerName)) en leeftijd is ((customerAge))
In dit voorbeeld wordt op regel 5 een app gemaakt met de naam CustomerApp die alle delen van de applicatie bevat. Bij de volgende regel wordt een controller gemaakt en krijgt deze de naam FirstController. $ scope wordt gedeclareerd als een functieparameter. AngularJS injecteert het automatisch in de applicatie voor direct gebruik, de ontwikkelaar hoeft het niet expliciet te maken.
Deze functie staat bekend als afhankelijkheidsinjectie. Op dezelfde manier wordt de ng-controller gebruikt voor dezelfde controller onder de tag ng-app. Vergeet niet dat het bereik van de app of controller zal zijn waar de div eindigt of alles waar je een app of controller in definieert. In dit geval hebt u na regel 16 geen toegang meer tot de controller of applicatie.
Aanbevolen artikelen
Dit is een gids voor Wat is AngularJS-versie. Hier bespreken we de versies van AngularJS met richtlijnen, toepassingsgebied en hoe werkt AngularJS. U kunt ook de volgende artikelen bekijken voor meer informatie -
- AngularJS-architectuur
- Hoekige JS-toepassing
- AngularJS Unit testen
- Carrière in AngularJS
- Wat is hoek 2?