3 redenen om AngularJS te kiezen voor uw volgende project

AngularJS is een relatief nieuw JavaScript-framework van Google, ontworpen om uw front-end ontwikkeling zo eenvoudig mogelijk te maken. Er zijn veel frameworks en plug-ins beschikbaar. Als zodanig kan het soms moeilijk zijn om alle ruis door te lichten om nuttige hulpmiddelen te vinden.

Hier zijn drie redenen waarom u AngularJS zou kiezen voor uw volgende project.

1 - Het is ontwikkeld door Google

Angular wordt gebouwd en onderhouden door toegewijde Google-technici.

Deze lijkt misschien voor de hand liggend, maar het is belangrijk om te onthouden dat veel (niet alle) frameworks worden gemaakt door hobbyisten in de open-sourcecommunity. Terwijl passie en drive frameworks hebben gesmeed, zoals Cappucino en Knockout, wordt Angular gebouwd en onderhouden door toegewijde (en zeer getalenteerde) Google-technici. Dit betekent dat je niet alleen een grote open community hebt om van te leren, maar je hebt ook ervaren, hoog beschikbare technici die je moeten helpen om je Angular vragen beantwoord te krijgen.

Dit is niet de eerste poging van Google tot een JavaScript-framework; ze ontwikkelden eerst hun uitgebreide Web Toolkit, die Java samenvoegt tot JavaScript, en werd door het Google Wave-team uitgebreid gebruikt. Met de opkomst van HTML5, CSS3 en JavaScript, als zowel een front-end- als een back-end-taal, besefte Google dat het web niet bedoeld was om puur in Java te worden geschreven.

AngularJS is begonnen met het standaardiseren van de webapplicatiestructuur en biedt een toekomstig sjabloon voor de ontwikkeling van client-side apps.

Versie 1.0 werd iets minder dan 6 maanden geleden uitgebracht (vanaf december 2012) en wordt gebruikt door een groot aantal toepassingen, van hobby tot commerciële producten. Adoptie van AngularJS als een levensvatbaar raamwerk voor ontwikkeling aan de klantzijde wordt snel bekend in de hele webontwikkelingsgemeenschap.

Omdat AngularJS is gebouwd door Google, kunt u er zeker van zijn dat u te maken hebt met efficiënte en betrouwbare code die schaalbaar is met uw project. Als u op zoek bent naar een kader met een solide basis, is Angular uw keuze!

2 - Het is uitgebreid

Als u bekend bent met projecten, zoals QUnit, Mocha of Jasmine, dan zult u zonder problemen Angular's unit-testing API leren kennen.

Angular, vergelijkbaar met Backbone of JavaScriptMVC, is een complete oplossing voor snelle front-end ontwikkeling. Er zijn geen andere plug-ins of frameworks nodig om een datagedreven webapp te bouwen. Hier is een overzicht van de opvallende kenmerken van Angular:

REST Gemakkelijk. RESTful actions worden al snel de standaard voor communicatie van de server naar de client. In één regel JavaScript kunt u snel met de server praten en de gegevens ophalen die u nodig hebt om met uw webpagina's te communiceren. AngularJS verandert dit in een eenvoudig JavaScript-object, als modellen, volgens het MVVM-model (Model View View-Model).
MVVM to the Rescue! Modellen praten met ViewModel-objecten (via iets genaamd het $ scope-object), die luisteren naar wijzigingen in de modellen. Deze kunnen vervolgens worden afgeleverd en weergegeven door de Views, de HTML-code die uw code uitdrukt. Weergaven kunnen worden gerouteerd met behulp van het object $ routeProvider, zodat u deep views en controllers kunt deep-linken en indelen, zodat ze worden omgezet in navigeerbare URL's. AngularJS biedt ook stateless controllers, die de initialiseren en beheren $ scope voorwerp.
Gegevensbindende en afhankelijke injectie. Alles in het MVVM-patroon wordt automatisch via de gebruikersinterface gecommuniceerd wanneer er iets verandert. Dit elimineert de noodzaak voor wikkels, getters / setters of klasseverklaringen. AngularJS verwerkt dit allemaal, dus u kunt uw gegevens net zo eenvoudig uitdrukken als met JavaScript-primitieven, zoals arrays, of zo complex als u wilt, via aangepaste typen. Omdat alles automatisch gebeurt, kunt u naar uw afhankelijkheden als parameters in de functies van de AngularJS-service vragen in plaats van één gigant hoofd() oproep om uw code uit te voeren.
Breidt HTML uit. De meeste websites die vandaag zijn gebouwd, zijn een gigantische reeks
tags met weinig semantische helderheid. U moet uitgebreide en uitgebreide CSS-klassen maken om de intentie van elk object in de DOM uit te drukken. Met Angular kunt u uw HTML-achtige XML gebruiken, waardoor u eindeloze mogelijkheden heeft voor tags en attributen. Angular volbrengt dit, via de HTML-compiler en het gebruik van richtlijnen om gedrag te triggeren op basis van de nieuw gecreëerde syntax die u schrijft.
Maakt HTML jouw sjabloon. Als je gewend bent aan Moustache of Hogan.js, dan kun je quckly de syntax van de beugel van Angular's templating-engine begrijpen, omdat het is gewoon HTML. Angular doorkruist de DOM voor deze sjablonen, waarin de bovengenoemde richtlijnen zijn ondergebracht. De sjablonen worden vervolgens doorgegeven aan de AngularJS-compiler als DOM-elementen, die kunnen worden uitgebreid, uitgevoerd of opnieuw worden gebruikt. Dit is de sleutel, omdat je nu onbewerkte DOM-componenten hebt in plaats van strings, waardoor directe manipulatie en uitbreiding van de DOM-tree mogelijk is.
Testen op bedrijfsniveau. Zoals hierboven vermeld, vereist AngularJS geen aanvullende frameworks of plug-ins, inclusief testen. Als u bekend bent met projecten, zoals QUnit, Mocha of Jasmine, dan zult u zonder problemen Angular's eenheidstest-API en Scenario Runner leren kennen, die u helpen bij het uitvoeren van uw tests in de buurt van de werkelijke status van uw productieapplicatie. als mogelijk.

Dit zijn de basisprincipes die AngularJS leiden naar het creëren van een efficiënte, prestatiegerichte en onderhoudbare front-end codebase. Zolang u beschikt over een bron voor het opslaan van gegevens, kan AngularJS al het zware werk op de client uitvoeren en tegelijkertijd een rijke, snelle ervaring bieden voor de eindgebruiker..

3 - Aan de slag in enkele minuten

Aan de slag met AngularJS is ongelooflijk eenvoudig. Met een paar kenmerken toegevoegd aan uw HTML, kunt u een eenvoudige Angular-app in minder dan 5 minuten maken!

Voeg de toe ng-app richtlijn voor de tag zodat Angular weet te lopen op de pagina:
Voeg de hoekige toe

 Voeg normale HTML toe. AngularJS-richtlijnen zijn toegankelijk via HTML-kenmerken, terwijl uitdrukkingen worden geëvalueerd met notatie met dubbele beugel:  De activiteiten van vandaag
    Activity.name

 De ng-controller directive stelt een naamruimte in, waar we onze Angular JavaScript kunnen plaatsen om de gegevens te manipuleren en de uitdrukkingen in onze HTML te evalueren. ng-repeat is een Angular repeater-object, dat Angular opdraagt om lijstelementen te blijven maken zolang we activiteiten hebben om weer te geven, en dit te gebruiken 
 element als een sjabloon voor hoe we willen dat ze allemaal eruit zien.
  Wanneer u iets van Angular wilt halen, haalt u uw gegevens op met een JavaScript-bestand met een functie waarvan de naam overeenkomt met de controller die u in uw HTML hebt beschreven:
 
 function ActivitiesListCtrl ($ scope) $ scope.activities = ["name": "Wake up", "name": "Brush teeth", "name": "Shower", "name": "Ontbijten", "naam": "Ga aan het werk", "naam": "Schrijf een Nettuts-artikel", "naam": "Ga naar de sportschool", "name": " Ontmoet vrienden ", " naam ":" Ga naar bed "]; 
 Zoals eerder vermeld, creëren we een functie met dezelfde naam als de ng-controller richtlijn, zodat onze pagina de corresponderende hoekfunctie kan vinden om onze code te initialiseren en uit te voeren met de gegevens die we willen grijpen. We passeren de $ scope parameter om toegang te krijgen tot de sjablonen activiteiten lijst die we hebben gemaakt in onze HTML-weergave. Vervolgens bieden we een basisset van activiteiten met de sleutel, naam, overeenkomend met de activiteiteigendom naam die we hebben genoteerd in onze double-bracket notatie, en een waarde, die een string is die de activiteiten vertegenwoordigt die we vandaag willen bereiken.
  Hoewel deze applicatie compleet is, is het niet overdreven praktisch. De meeste webtoepassingen bevatten veel gegevens die zijn opgeslagen op externe servers. Als u uw gegevens ergens op een server hebt opgeslagen, kunnen we de array eenvoudig vervangen door een oproep van Angular's AJAX API:
 
 function ActivitiesListCtrl ($ scope) $ http.get ('activities / list.json'). success (function (data) $ scope.activities = data;
 We hebben simpelweg het native JavaScript-array-object hashes vervangen door een gespecialiseerde HTTP GET-functie, geleverd door de Angular API. We geven de naam door van het bestand dat we bekijken om op te halen van de server (in dit geval een JSON-bestand met activiteiten) en we krijgen een belofte terug van Angular, ongeveer zoals het beloningspatroon werkt in jQuery.
   Lees hier meer over beloften in jQuery op Nettuts+. 
 
 Deze belofte kan dan onze succes functie wanneer de gegevens zijn geretourneerd, en alles wat we moeten doen is de retourgegevens binden aan onze activiteiten, die zoals eerder vermeld werd geleverd door afhankelijkheidsinjectie, via de $ scope parameter.
 Een statische takenlijst is leuk, maar de echte kracht komt voort uit hoe gemakkelijk we de pagina kunnen manipuleren zonder een reeks JavaScript-functies te hoeven instellen om te luisteren en te reageren op gebruikersinteracties. Stel je voor dat we onze activiteitenlijst alfabetisch moeten sorteren. Welnu, we voegen eenvoudig een vervolgkeuzekiezer toe om de gebruiker in staat te stellen de lijst te sorteren: 
Soort:
 
 Voeg de toe model- richtlijn voor de vervolgkeuzelijst: