Menu

AngularJS-richtlijn met ons eerste AngularJS-voorbeeld

  • Hoofd
  • Andere
  • AngularJS-richtlijn met ons eerste AngularJS-voorbeeld

angularjs directive with our first angularjs example

Probeer Ons Instrument Voor Het Oplossen Van Problemen

AngularJS-richtlijn met eerste AngularJS-voorbeeld:

We hadden een korte inleiding tot AngularJS in onze vorige tutorial. Deze tutorial legt je de belangrijke feiten uit die je over AngularJS moet weten.

AngularJS is een open-source framework voor webtoepassingen op basis van JavaScript.

Het wordt onderhouden door Google Corporation en een grote gemeenschap. AngularJS is een antwoord op de verschillende nadelen die zich voordoen bij het formuleren van single-page applicaties.

Lees onze Gehele AngularJS-serie voor diepgaande kennis van het AngularJS-concept.

gedragsinterviewvragen en antwoorden voor bedrijfsanalisten

AngularJS-richtlijn en voorbeeld

Het AngularJS-toepassingsframework fungeert als een sjabloon en kan de uitdagingen verminderen waarmee u wordt geconfronteerd tijdens de ontwikkeling van web-apps.

Wat je leert:

Overzicht van AngularJS

AngularJS werd op 20 uitgebracht door GooglethOktober 2010, en vandaag is het een belangrijk raamwerk geworden voor verschillende interfacetoepassingen van één pagina.

Dat is de reden waarom AngularJS zijn mannetje staat ondanks de razendsnelle technologische ontwikkeling. Het platformonafhankelijke interface-gebaseerde systeem maakt het ook efficiënter.

AngularJS is een aanvulling op en biedt voordelen voor Apache Cordova, een framework dat wordt gebruikt voor platformonafhankelijke mobiele apps. Het heeft een visie om de ervaring te verbeteren en het testen en ontwikkelen van web-apps te vereenvoudigen en biedt een robuust raamwerk voor de ontwikkeling van hun AngularJS-applicatie.

Waarom AngularJS gebruiken?

Hieronder staan ​​de verschillende functies en redenen vermeld waarvoor AngularJS moet worden gebruikt bij de ontwikkeling van webtoepassingen.

  1. Dataverbinding: Het platform zorgt voor automatische synchronisatie van gegevens tussen het model en de inhoud van de weergave, en als resultaat bespaart het u zowel tijd als moeite in grote mate.
  2. Verantwoordelijke: Dit zijn JavaScript dat is gebonden aan een bepaald bereik.
  3. Diensten: AngularJS heeft veel ingebouwde services. Bijv $ https
  4. Filters: Dit helpt bij het selecteren van een subset van items uit een array en keert deze terug naar een nieuwe array.
  5. Richtlijnen: Het zijn markeringen op DOM-elementen zoals attributen, CSS-elementen, enz. Deze kunnen worden gebruikt als aangepaste tags van HTML.
  6. Routing: Helpt bij het maken van applicaties met één pagina. Het wordt gespecificeerd in de URL na het # -teken en stelt u in staat verschillende URL's aan te maken voor verschillende inhoud in uw applicatie.
  7. MVC: Staat voor Model, View en Controller. Het is een ontwerppatroon en wordt gebruikt voor de verdeling van een app in verschillende delen, d.w.z. Model, View en Controller.
  8. Deep Linking: Deze functie van het app-framework helpt u bij het coderen van de status van de applicatie in de URL voor bladwijzers. Later kan de app ook worden hersteld vanaf de URL in dezelfde staat.
  9. Afhankelijkheidsinjectie: AngularJS heeft ook een ingebouwd subsysteem voor afhankelijkheidsinjectie dat nuttig kan zijn voor de ontwikkelaar om het ontwikkelings- en testproces gemakkelijker, samenhangend en ongecompliceerd te maken.
  10. Toepassingsgebied: Dit zijn de objecten die fungeren als lijm tussen de controller en het uitzicht.

Hoe AngularJS te gebruiken?

Persoonlijk geloof ik dat er momenteel nauwelijks een beter front-end webapp-ontwikkelraamwerk op de markt beschikbaar is dan AngularJS.

De tutorials over het gebruik van AngularJS zijn niet frustrerend complex, en ik vond ze inderdaad ook vrij gemakkelijk te volgen. U kunt profiteren van een bidirectioneel bindsysteem, sjabloonfaciliteiten, modularisatie, afhankelijkheidsinjectiesysteem, AJAX Handling-functie en ook de andere kenmerken van dit framework.

Voordat u begint met coderen, moet u op de hoogte zijn van het MVC-concept (Model, View en Controller), het 'Hello World' -script en de verschillende functies van AngularJS.

AngularJS-richtlijnen

AngularJS biedt u een groot aantal richtlijnen waarmee u de verschillende HTML-elementen aan applicatiegegevens kunt koppelen. Het zijn de basiskenmerken die beginnen met het trefwoord ng- ​

De belangrijkste richtlijn die u op elke pagina moet opnemen tijdens het gebruik van AngularJS wordt hieronder gegeven.

​

Het is het startpunt van de AngularJS-applicatie en moet worden toegevoegd aan elk element dat de rest van de pagina omhult, zoals het lichaamsdeelelement. AngularJS zoekt naar dit aspect wanneer de pagina wordt geladen en heeft de neiging om alle verschillende richtlijnen in de code automatisch te evalueren.

De richtlijnen van AngularJS zijn onder meer:

# 1) ng-app ​Dit wordt gebruikt om de AngularJS-applicatie te starten. Wanneer de webpagina met de AngularJS-applicatie wordt geladen, wordt de applicatie automatisch opgestart door het root-element te definiëren. Er mag slechts één ng-app-instructie in uw HTML-code worden gebruikt.

Als er echter meer dan één ng-app-instructies in de HTML-code worden gevonden, wordt de eerste weergave gebruikt.

Syntaxis:

​

# 2) van warmte ​Dit wordt gebruikt om de applicatie te initialiseren.

Het biedt een reeks waarden die voor initialisatiedoeleinden aan variabelen moeten worden gekoppeld. Deze richtlijn wordt niet vaak gebruikt omdat de initialisatie van variabelen meestal gebeurt via specifieke functies binnen het project.

Syntaxis:

​

# 3) ng-controller: Het wordt gebruikt wanneer de initialisatie van variabelen moet gebeuren op basis van een functie; d.w.z. elk van de variabelen moet worden geïnitialiseerd op basis van functielogica. AngularJS roept de functie aan die is gespecificeerd in de ng-controller-instructie met een object.

Syntaxis:

​

# 4) ng-model ​Dit wordt gebruikt om de waarden van AngularJS te binden aan de besturingselementen die door de applicatie worden geleverd. Om specifiek te zijn, de gegevens die worden opgehaald door de invoer via de controller en het model zullen worden gebonden aan de weergave (w.r.t. MVC-model) die aan de gebruiker zal worden gepresenteerd.

Syntaxis:

​

ng-show en ng-hide: Deze commando's verbergen en tonen de elementen, dat wordt bereikt door de CSS-weergavestijl in te stellen.

Met AngularJS kunt u ook aangepaste richtlijnen definiëren. Ze worden gebruikt om de functionaliteit van HTML uit te breiden en worden gedefinieerd met behulp van de functie 'richtlijn'. Ze vervangen eenvoudig het element waarvoor ze zijn geactiveerd.

De AngularJS Cheat Sheet was een redder in leven voor mij. Er zijn een aantal andere richtlijnen die u kunt raadplegen op de Cheat Sheet. U kunt zelfs leren hoe u aangepaste richtlijnen maakt met behulp van AngularJS. Ik vond alle instructies en richtlijnen van het AngularJS-platform op de Cheat Sheet om veel problemen te vereenvoudigen.

AngularJS Voorbeeld

Een eenvoudig AngularJS-voorbeeld kan als volgt worden geschreven:

U moet een HTML-bestand maken, Bijvoorbeeld ​ angularjsexample.html zoals hieronder weergegeven.

​

In het bovenstaande voorbeeld vertegenwoordigt het script AngularJS JavaScript.

Het zou je verbazen hoeveel apps je dagelijks gebruikt, zijn ontwikkeld op het AngularJS-platform.

Hier zijn een paar namen:

  • The Guardian
  • PayPal
  • jetBlue
  • Lego
  • Upwork
  • Netflix
  • Freelancer
  • iStock

Uit de bovenstaande namen blijkt duidelijk welke hoogte u kunt bereiken door dit raamwerk te leren gebruiken. Deze sites staan ​​aan de top van hun spel, en een groot deel van hun succes gaat zeker naar de efficiëntie van de sites, alleen omdat ze zijn ontwikkeld op AngularJS.

Gevolgtrekking

Als u apps met één pagina voor mobiele apparaten of zelfs websites wilt bouwen en ontwikkelen, zoals ik ooit was, zoek dan niet verder.

AngularJS is een one-stop-shop voor u, aangezien deze site helpt en de ontwikkeling van applicaties veel comfortabeler en samenhangend maakt. Het is niet alleen geweldig voor beginners, maar als je er dieper op ingaat, zul je de neiging hebben om met ervaring te leren en geweldige apps te ontwikkelen.

Als u ondertussen upgradet naar recentere versies, hoeft u niet veel moeite te doen. Gewoon door een paar nieuwe commando's te leren en nieuwe tweaks te begrijpen, kunt u ook beginnen met het ontwikkelen van applicaties in de nieuwe versies.

Bekijk onze aanstaande tutorial voor meer informatie over het ontwikkelen van webapplicaties met één pagina met AngularJS.

PREV-zelfstudie ​ VOLGENDE zelfstudie

Aanbevolen literatuur

^