Wat is Angular?

Wat is Angular?

wat is angular

Angular is een populair frontend JavaScript framework ontwikkeld door Google dat je helpt om goed gestructureerde, gemakkelijk testbare en onderhoudbare front-end webapplicaties te bouwen. Het bouwt voort op het concept van webapplicaties in MVC (Model-View-Controller) en introduceert aanvullende concepten zoals dependency injection en directives.

Angular applicaties bestaan uit controllers, views en services. Controllers zijn verantwoordelijk voor het weergeven van data en functionaliteit aan de view. Services daarentegen doen alle business logica die geen betrekking heeft op views of controllers.

Views kunnen statische HTML en/of Angular directives bevatten, die views versterken met dynamisch gedrag en verbinden met de data en functies van de controller.

Wat is een Angular- framework?

Een Angular framework wordt gebruikt om dynamische websites te maken. Dat wil zeggen, dat de site meer is dan een simpel statisch HTML bestand. Dit geeft je de mogelijkheid om nog meer structuur en interactiviteit aan je website toe te voegen. Het lost veel problemen op voor ontwikkelaars en gebruikers. Het framework bepaalt hoe uw website eruit ziet en hoe de code moet worden gestructureerd. Het bepaalt grotendeels hoe de website eruit komt te zien. Dit neemt jou als ontwikkelaar werk uit handen, omdat het framework al veel dingen voor je heeft bepaald. Een JavaScript framework is zo gebouwd dat de website die je ermee wilt bouwen op meerdere browsers zal werken. Ook de DOM, oftewel de manier waarop code interacteert met HTML, wordt door het framework geregeld.

Angular is een framework waarbij je een HTML-pagina maakt en daar JavaScript-bestanden aan toevoegt. Dit zorgt voor de bouwstenen van je website, die er uiteindelijk uit zal zien als een gewone website met een hoop JavaScript erachter. Je kunt vrijwel alles doen met Angular JS, van het maken van dynamische tabellen tot het maken van volwaardige web apps.

Laten we een voorbeeld geven van een HTML-document met Angular JS:

<!doctype html>

<html ng-app>

</html>

Laten we nu eens kijken wat we kunnen doen met deze zeer eenvoudige regel: <html ng-app>. Dit zal het document initialiseren als een Angular applicatie. Het volgende dat zal gebeuren is het laden van het Angular framework in je project, wat gedaan wordt door ng-app toe te voegen aan deze tag: <html>. Het tweede wat je aan deze regel moet toevoegen is een CSS bestand met Angular directives. Dit zijn specifieke functies voor HTML-elementen, zodat ze kunnen communiceren met JavaScript binnen uw website. De HTML5-standaard bevat een aantal Angular directives, die je in je website kunt gebruiken. 

Wat is Angular JS?

Angular JS is een JavaScript-framework waarmee je client-side apps kunt schrijven. Angular JS is een open-source webapplicatie framework voornamelijk onderhouden door Google en door een gemeenschap van individuen en bedrijven om veel van de uitdagingen aan te pakken die zich voordoen bij het ontwikkelen van single-page applicaties. De JavaScript-componenten vormen een aanvulling op Apache Cordova, het kader dat wordt gebruikt voor de ontwikkeling van cross-platform mobiele apps. Het is in de eerste plaats bedoeld om zowel de ontwikkeling als het testen van dergelijke toepassingen te vereenvoudigen door belangrijke elementen van het MVC-ontwerppatroon in de vouw te brengen.

Waarom Angular gebruiken?

Zoals eerder vermeld zijn er vele voordelen bij het gebruik van Angular. Enkele grote zijn:

  • snelheid en prestaties. JavaScript, wanneer het in browsers wordt uitgevoerd, is over het algemeen single threaded, wat betekent dat er maar één ding gebeurt 
  • Isoleert scope zodat verschillende delen van uw code niet kunnen interfereren met elkaar 
  • Verhoogt de onderhoudbaarheid omdat het grotendeels bepaalt hoe uw website eruit zal zien
  • Is SEO-vriendelijk (geen behoefte aan zware frameworks zoals jquery)
  • Vergemakkelijkt testen aangezien het grotendeels bepaalt hoe uw website eruit zal zien. Code is beter te testen als je niet afhankelijk bent van HTML tags (DOM).

Wat zijn de voordelen van Angular?

Angular is een JavaScript framework voor het bouwen van dynamische web apps. Het laat je toe responsive, single-page web applicaties te bouwen die ook snel en makkelijk te onderhouden zijn.

AngularJS, de voorganger van Angular, is ontwikkeld door Google en wordt gebruikt door vele topbedrijven, waaronder Forbes, GoDaddy, NBC, Walgreens en Walmart. Enkele opmerkelijke gebruikers van Angular 12 (de nieuwste versie) zijn: Evernote, IKEA Group , The Weather Channel , Salesforce , Disney , Intel & AT&T .

Hier zijn enkele redenen waarom u zou moeten proberen Angular te leren: 

* Het wordt ondersteund door Google, wat betekent dat het beschikt over uitgebreide financiële middelen en ingenieurs die op de hoogte blijven van alle nieuwste ontwikkelingen in front-end technologieën zoals JavaScript en HTML5.

* Het heeft een krachtige templating engine waarmee u snel dynamische views kunt genereren op basis van uw modellen 

* Het bevat ook een state-management bibliotheek voor het beheren van de gegevens in uw applicatie 

* Ingebouwde routing maakt het gemakkelijk om multi-page ondersteuning toe te voegen aan uw app, zodat gebruikers kunnen navigeren tussen verschillende views

* Angular Universal is een open source tool van Google waarmee ontwikkelaars hun apps op een server kunnen draaien in plaats van op een client 

* U krijgt ingebouwde HTTP-ondersteuning die gemakkelijk integreert met AJAX-verzoeken

Wanneer moet je Angular gebruiken?

Je zou moeten investeren in het leren van Angular als je gaat werken aan middelgrote of grote webapplicaties. Het framework biedt alle tools die nodig zijn om complexe single page applicaties te bouwen.

Wie zou Angular moeten leren?

Ontwikkelaars met gevorderde JavaScript-vaardigheden kunnen gemakkelijk aan de slag met Angular, maar het is ook goed voor front-end ontwikkelaars die hun kennis willen uitbreiden voorbij HTML en CSS. De lessen in de officiële documentatie zijn over het algemeen duidelijk en volledig genoeg dat je geen andere bronnen nodig hebt, hoewel als je dieper wilt ingaan op bepaalde concepten, je misschien de gratis tutorials op egghead.io of een van de onderstaande betaalde cursussen zou kunnen bekijken.

Als uw gegevens behoeften eenvoudig is dan is misschien iets als BackboneJS een betere keuze, omdat het niet vereist om veel framework code te schrijven rond de modellen. Als je meer geïnteresseerd bent in een MV* type framework dan zijn je keuzes waarschijnlijk React of Angular. React is iets eenvoudiger te leren als je vanaf nul begint, maar het vereist wel dat je zelf wat aangepaste componenten bouwt (of een bibliotheek zoals material-ui gebruikt). 

Angular daarentegen heeft ingebouwde ondersteuning voor veelvoorkomende patronen zoals modals en image carousels, dus het is makkelijker om er out-of-the-box mee aan de slag te gaan. Echter, zodra je app verder groeit dan eenvoudige data weergave zul je waarschijnlijk tegen situaties aanlopen waar je aangepaste functionaliteit nodig hebt (op dat punt kan Angular complexer lijken dan het werkelijk is)…

Welke boeken kunnen jou helpen om Angular te leren?

Er zijn verschillende boeken die u kunnen helpen bij het leren van Angular. U kan kiezen tussen gratis of betaalde boeken, afhankelijk van uw budget en ervaringsniveau.

* ‘Angular 6 Blueprints’ door Mario Herger is gericht op ontwikkelaars die al enige ervaring hebben met JavaScript, maar willen leren hoe ze dynamische front-end applicaties kunnen bouwen met Angular (voorbeelden zijn in TypeScript)

* ‘Building Web Apps with Vue.js 2’ door Evan You is een kort boek dat je zal helpen de basis te begrijpen van JS frameworks in het algemeen en hoe ze zich verhouden tot Vue.js voordat je in de praktische voorbeelden duikt die in dit boek worden gegeven 

* ‘Angular 2+: From Theory To Practice’ van Gérard Sans staat bekend als een van de beste boeken voor degenen die verder willen gaan dan alleen het begrijpen van Angular en er ook apps mee willen bouwen. Het boek behandelt alle aspecten van het bouwen van moderne webapplicaties, beginnend bij een introductie in Angular concepten zoals componenten en RxJS observables, tot en met geavanceerde functies zoals dependency injection, forms handling of routing.

Meer weten over een training of advies? Bel met onze opleidingsadviseurs 085 02 01 070 of gebruik het contactformulier.