Menu

AngularJS-zelfstudie voor absolute beginners (met installatiehandleiding)

  • Hoofd
  • Andere
  • AngularJS-zelfstudie voor absolute beginners (met installatiehandleiding)

angularjs tutorial absolute beginners

Probeer Ons Instrument Voor Het Oplossen Van Problemen

Inleiding tot AngularJS: wat is AngularJS, de voordelen, functies en hoe te downloaden en te installeren

AngularJS is een programmeertaal die tegenwoordig populair wordt.

Het is 2018 en de technologische vooruitgang heeft dit jaar op hun hoogtepunt gestaan. De programmeertalen zoals Python, AngularJS, Ruby on Rails, React en Redux JS, etc. zijn het meest gewild.

Je kunt gemakkelijk een baan krijgen als je een van deze programmeertalen beheert, samen met de oudere talen zoals JAVA of C ++. Het is erg belangrijk om op de hoogte te zijn van de nieuwe programmeringstrends om uw leerquotiënt hoog te houden.

AngularJS-zelfstudie

Onze Serie van AngularJS Tutorials geven u volledige kennis van de AngularJS.

​

Leer AngularJS snel met deze 6 tutorials:

Zelfstudie # 1 ​ Inleiding tot AngularJS (deze tutorial)
Tutorial # 2 ​ AngularJS-richtlijn met voorbeeld
Tutorial # 3 ​ Bouw een applicatie met één pagina met AngularJS
Tutorial # 4 ​ Verschil tussen hoekige versies
Zelfstudie # 5 ​ Gradenboogtool voor end-to-end testen van AngularJS-apps
Tutorial # 6 ​ Top AngularJS sollicitatievragen

​

Organisaties proberen mensen in dienst te nemen op basis van hun productiviteit. Als een persoon in staat is om code te ontwikkelen en output te leveren op een mindere tijd, dan krijgt hij duidelijk een voorsprong op de anderen.

Gezien de vraag in de huidige markten en de tijd die een complete beginner nodig heeft om real-world apps te leren en te bouwen, is AngularJS de beste programmeertaal om te leren.

Laten we, om met de serie te beginnen, een korte beschrijving geven Inleiding tot AngularJS.

hoe swf-bestanden te openen in chrome

Wat je leert:

Wat is AngularJS?

AngularJS is een JavaScript-framework dat aan de clientzijde werkt en wordt gebruikt om webtoepassingen te ontwikkelen.

Dit betekent dat de code die u schrijft, wordt uitgevoerd door de browser en niet door de server. Het is een populair en krachtig JavaScript-framework en wordt veel gebruikt in applicatieprojecten van één pagina en branchetoepassingen.

Hierdoor zijn er nu verschillende toepassingsontwikkelingsbedrijven van AngularJs.

Toen AngularJS in beeld kwam?

Webontwikkeling is een van de meest geprefereerde en kosteneffectieve manieren om gedistribueerde applicaties te maken.

De eenmaal uitgevoerde implementatie op één machine kan voor alle gebruikers op het world wide web toegankelijk worden gemaakt. Een van de prestatieproblemen die naar voren kwamen, was het probleem met het posten van pagina's, wat resulteerde in communicatievertraging tussen de client en de server.

AngularJS is in 2009 ontwikkeld door Misko en Adam Abrons om dergelijke problemen te helpen bestrijden en wordt sindsdien door Google onderhouden. Het is een open source-project, wat betekent dat u het vrijelijk kunt gebruiken en delen.

Er worden verschillende webapplicaties gebouwd sinds de conceptie en veel van de applicaties staan ​​vermeld op de website ​

Waarom AngularJS?

We hebben al verschillende JavaScript-frameworks zoals React JS, Node JS, Backbone JS, etc. Maar toch, waarom geven we de voorkeur aan AngularJS boven de bestaande?

Wanneer u webpagina's ontwikkelt met AngularJS, worden de pagina's niet vaak vernieuwd vanwege de bewerkingen die een gebruiker op de webpagina uitvoert. Dit is op zijn beurt nodig om een ​​snellere output aan de gebruikers via de webpagina te geven.

Maar hoe bereikt AngularJS dit?

De voordelen van AngularJS die hieronder worden vermeld, zouden de bovenstaande vragen beantwoorden.

Er zijn verschillende voordelen zoals hieronder vermeld:

# 1) Afhankelijkheidsinjectie

In software engineering verwijst afhankelijkheidsinjectie naar het doorgeven van objecten tussen de applicatie en de client.

Injectie is het fenomeen van het doorgeven van een afhankelijkheid (bijvoorbeeld een applicatieservice) aan een afhankelijk object (bijvoorbeeld een client) dat het zou gebruiken. AngularJS biedt verschillende kerncomponenten om dit doel eenvoudig te bereiken.

# 2) Model View Controller

AngularJS wordt gebruikt om Rich Internet Applications (RIA) te maken en gegevensbinding in twee richtingen is mogelijk dankzij de MVC-architectuur (model view controller) in Angular JS.

Een basisafbeelding van deze architectuur is zoals hieronder weergegeven:

MVC-model voor AngularJS

1.1MVC-model voor Angular JS

Als ontwikkelaars hoeven we alleen maar onze code op te splitsen in het model, de weergave en de controller en de rest van de bewerkingen, zoals het beheren van de componenten en ze met elkaar verbinden, wordt automatisch gedaan door AngularJS.

# 3) Tweerichtingsgegevensbinding

Softwareveranderingen moeten responsief zijn, en veranderingen binnen het systeem moeten worden aangepast aan de veranderingen in de gebruikersinterface en omgekeerd, met precisie en snelheid.

AngularJS biedt dit soort binding door te synchroniseren tussen het model en de weergave.

# 4) Testen

Het is interessant om te weten dat AngularJS vanaf het begin is ontworpen met het oog op testen.

Elk van de componenten van AngularJS kan comfortabel worden getest met behulp van zowel unit-tests als end-to-end-tests. De applicatie kan voor testdoeleinden tussen browsers worden getransporteerd.

# 5) Controle over het gedrag van DOM-elementen

Attributen van AngularJS kunnen aan directives worden gekoppeld zodat automatische initialisatie van de applicatie mogelijk is.

Dit betekent dat er modulariteit is in AngularJS en met behulp van de functies, zoals richtlijnen en filters, kan een gevoel van maatwerk en flexibiliteit in de code worden bereikt.

Nu hebben we de antwoorden gezien op alle waarom-vragen die kunnen ontstaan ​​als gevolg van ongerustheid bij het leren van iets nieuws, en ik denk dat we goed zijn om te gaan.

Het is altijd beter om een ​​technologische trend te leren en onszelf regelmatig bij te werken om het meeste uit onze carrières te halen en ook om die nieuwsgierige geest van ons altijd dorstig naar kennis te houden.

Vereisten voor het leren van AngularJS

Het is belangrijk en voordelig om van tevoren een aantal dingen te weten om uw leertempo te versnellen.

HTML en CSS kunnen worden gebruikt om uw eigen webpagina's te bouwen, zodat deze kunnen worden getest. Om in AngularJS te coderen, is het belangrijk om een ​​basiskennis van JavaScript te hebben.

Daarom is het raadzaam om een ​​basiskennis van HTML en CSS te krijgen, samen met de concepten van het implementeren van JavaScript, voordat u begint met AngularJS.

Kenmerken van AngularJS

In de taal van AngularJS zijn er veel aanbiedingen die uniek en exclusief zijn. Het is beter om hiermee vertrouwd te raken voordat u een omgeving opzet om de code in AngularJS te schrijven en uit te voeren.

MVC-architectuur

Model-View-Controller-ontwerp van AngularJS moet worden begrepen om te begrijpen hoe de code werkt.

MVC vormt de kern van deze programmeertaal en is daarom ook erg belangrijk. Telkens wanneer zich een gebeurtenis voordoet, ontvangt het controllerdeel van de codebase de invoer van de gebeurtenis die bestaat uit verschillende verzoeken voor de applicatie.

Het modelgedeelte van de codebase, dat meestal de kernlogica is, coördineert met de controller en bereidt de vereiste gegevens voor die door de weergave moeten worden gebruikt om een ​​representatieve output te genereren. Daarom is er een scheiding van zorgen binnen de architectuur van de programmeertaal, aangezien deze de applicatielogica isoleert van de UI-laag.

Dit is de reden waarom AngularJS veel wordt gebruikt bij het ontwikkelen van Single Page Applications (SPA).

Richtlijnen

AngularJS is geïntegreerd met de HTML-code om webpagina's te maken, en 'Directives' zijn de speciale attributen van AngularJS en worden gebruikt om ze te integreren.

Uitdrukkingen in AngularJS

AngularJS-expressies kunnen letterlijke, operatoren of variabelen bevatten, in tegenstelling tot het traditionele JavaScript.

Ze kunnen in de HTML-tag zelf worden geschreven, maar er moet op worden gelet dat de ng-app-richtlijn wordt toegevoegd, anders wordt de uitdrukking weergegeven zoals hij is, zonder te worden opgelost.

verschil tussen testcase en testplan

AngularJS-expressies kunnen tussen dubbele accolades worden geschreven of kunnen binnen een richtlijn worden geschreven.

Syntaxis:

Binnen accolades:

​

Inside richtlijn:

AngularJS-nummers

Dit datatype is net als het JavaScript-datatype en operators kunnen worden gebruikt om resultaten weer te geven.

Voorbeeld:

​

AngularJS-snaren

Strings kunnen worden geïnitialiseerd met behulp van de richtlijn ng-init of de richtlijn ng-controller. Het samenvoegen van strings is ook mogelijk als de + operator binnen de uitdrukking wordt gebruikt.

Strings kunnen ook worden gebruikt als uitdrukkingen binnen dubbele accolades of gebruik de ng-bind-richtlijn, net als de AngularJS-nummers.

Syntaxis:

Binnen accolades:

​

Inside richtlijn:

​

AngularJS-objecten

AngularJS-objecten gedragen zich op dezelfde manier als de JavaScript-objecten zich gedragen. De items in een object kunnen worden geopend met de puntoperator.

Syntaxis:

Binnen accolades

​

Inside richtlijn

​

AngularJS-arrays

AngularJS-arrays gedragen zich op dezelfde manier als de JavaScript-arrays zich gedragen.

De items in een array kunnen worden geopend door het indexnummer van de waarde tussen vierkante haken aan te geven. Houd er rekening mee dat de indexering altijd vanaf nul begint, in een array, d.w.z. Array-element 1 = index 0.

Array-element 2 = index 1 enzovoort.

Syntaxis:

hoe u een .eps-bestand opent

Binnen accolades:

​

Inside richtlijn:

​

Een codefragmentVoorbeeldhet tonen van alle uitdrukkingen in AngularJS wordt hieronder gegeven:

1.3 richtlijnen in Angular JS

(beeld bron ​

Let op, AngularJS:

  • Ondersteunt geen conditionals, loops en uitzonderingen in expressies.
  • Ondersteunt geen functiedeclaratie (zelfs niet binnen de ng-init-richtlijn) in expressies.
  • Biedt geen ondersteuning voor bitwise, comma, void en new operator in expressies.
  • Negeert de null- of ongedefinieerde eigenschappen in expressies.
  • Uitdrukkingen worden geëvalueerd die bij het scope-object horen en niet bij het globale venster.

AngularJS-filters

Filters zijn exclusief voor AngularJS en zijn niet aanwezig in het traditionele JavaScript.

De filters worden gebruikt om uitvoergegevens aan te passen om ze compatibel te maken met verschillende invoergegevens. De filters kunnen worden gebruikt in uitdrukkingen of richtlijnen met behulp van de leidingbeheerder.

Dit zijn de verschillende soorten filters die vaak worden gebruikt:

Hoofdletters: Helpt bij het formatteren van de strings in hoofdletters.

Syntaxis:

​

Kleine letters: Helpt bij het opmaken van de tekenreeksen in kleine letters.

Syntaxis:

​

Valuta: Dit filter wordt gebruikt voor getaluitdrukkingen om ze om te rekenen en weer te geven in termen van valuta. Pipe operator kan worden gebruikt samen met het aantal uitdrukkingen voor deze conversie.

Syntaxis:

​

Zodra u dit bestand als HTML opslaat en in elke browser uitvoert, krijgt u de uitvoer zoals hieronder weergegeven.

UW EERSTE AANVRAAG

Nadat u de uitvoering van uw eerste programma met succes heeft voltooid, kunt u AngularJS gebruiken om veel complexe programma's in uw projecten te vereenvoudigen.

Beperkingen van AngularJS

Hieronder zijn enkele beperkingen van AngularJS:

  1. Het is geen erg veilig JavaScript-framework. Autorisatie en authenticatie aan de serverzijde zijn noodzakelijk en belangrijk om de codebase veilig te houden.
  2. Een applicatie die is gebouwd met AngularJS kan niet worden afgebroken. Dit betekent dat wanneer een gebruiker JavaScript uitschakelt, hij alleen de basispagina ziet en niets anders.

Zoals opgemerkt, weten we dat de pluspunten meer zijn, daarom is AngularJS de meest gewilde technologie van de afgelopen tijd.

Lees ook = >> D3.js Tutorial voor beginners

Gevolgtrekking

AngularJS is de meest populaire programmeertaal op de markt na python.

Het heeft de voorkeur voor het bouwen van webapplicaties en meestal SPA's op een kosteneffectieve en moeiteloze manier. De verbeterde versie is Angular 2. Deze programmeertaal gebaseerd op Angular JS geeft een nieuwe smaak aan de objectgeoriënteerde programmeerstijl.

Auteur : Dankzij Ankit Srivastava voor deze serie. Hij heeft goede ervaring met de ontwikkeling van AngularJS en IoT-apps.

Bekijk de komende AngularJS-tutorials om meer over AngularJS te ontdekken !!

VOLGENDE zelfstudie

Aanbevolen literatuur

^