Share
AngularJS is een geweldig JavaScript-framework dat enkele zeer overtuigende functies biedt, niet alleen voor ontwikkelaars, maar ook voor ontwerpers! In deze zelfstudie bespreken we wat ik beschouw als de meest essentiële functies en hoe deze kunnen helpen uw volgende webtoepassing geweldig te maken.
Als u een idee wilt krijgen van wat u met AngularJS kunt doen, bekijkt u het bereik van AngularJS-items op Envato Market. U kunt een bijsnijkuntje, een eCommerce-webtoepassing, een JSON-editor en nog veel meer vinden.
AngularJS-items op Envato Market AngularJS is een nieuwe, krachtige client-side technologie die een manier biedt om echt krachtige dingen te doen op een manier die HTML, CSS en JavaScript omvat en uitbreidt, terwijl enkele van de flagrante tekortkomingen worden versterkt. Het is wat HTML zou zijn geweest, als het was gebouwd voor dynamische inhoud.
In dit artikel bespreken we enkele van de belangrijkste AngularJS-concepten om het 'grote plaatje' te krijgen. Het is mijn doel dat je, na het zien van enkele van deze functies, enthousiast genoeg zult zijn om iets leuks te gaan bouwen met AngularJS.
Beschouw uw model als de enige bron van waarheid voor uw toepassing. Uw model is waar u iets in uw toepassing gaat lezen of bijwerken.
Data-binding is waarschijnlijk de coolste en meest bruikbare functie in AngularJS. Het zal u redden van het schrijven van een aanzienlijke hoeveelheid boilerplate code. Een typische webtoepassing kan tot 80% van zijn codebasis bevatten, bestemd voor het doorlopen, manipuleren en beluisteren van de DOM. Door gegevens te binden verdwijnt deze code, zodat u zich kunt concentreren op uw toepassing.
Beschouw uw model als de enige bron van waarheid voor uw toepassing. Uw model is waar u iets in uw toepassing gaat lezen of bijwerken. De gegevensbindende richtlijnen bieden een projectie van uw model op de applicatieweergave. Deze projectie is naadloos en gebeurt zonder enige inspanning van u.
Traditioneel, wanneer het model verandert, is de ontwikkelaar verantwoordelijk voor het handmatig manipuleren van de DOM-elementen en attributen om deze veranderingen te weerspiegelen. Dit is een tweerichtingsverkeer. In één richting verandert het model de wijziging van de schijf in DOM-elementen. In de andere, wijzigingen in het DOM-element vereisen wijzigingen in het model. Dit wordt verder gecompliceerd door gebruikersinteractie, omdat de ontwikkelaar dan verantwoordelijk is voor het interpreteren van de interacties, deze samenvoegt in een model en de weergave bijwerkt. Dit is een zeer handmatig en omslachtig proces, dat moeilijk beheersbaar wordt, naarmate een toepassing in omvang en complexiteit groeit.
Er moet een betere manier zijn! De bidirectionele datumbinding van AngularJS verwerkt de synchronisatie tussen de DOM en het model en omgekeerd.
Hier is een eenvoudig voorbeeld, dat laat zien hoe een invoerwaarde aan een kan worden gebonden element.
Hallo, yourName!
Dit is uiterst eenvoudig in te stellen en bijna magisch ...
Het is belangrijk om te beseffen dat AngularJS op geen enkel moment de sjabloon als snaren manipuleert. Het is de DOM van een browser.
In AngularJS is een sjabloon gewoon oude HTML. De HTML-woordenschat is uitgebreid om instructies te bevatten over hoe het model in de weergave moet worden geprojecteerd.
De HTML-sjablonen worden door de browser in de DOM geparseerd. De DOM wordt dan de invoer voor de AngularJS-compiler. AngularJS doorloopt de DOM-sjabloon voor renderinginstructies, die richtlijnen worden genoemd. Collectief zijn de richtlijnen verantwoordelijk voor het instellen van de gegevensbinding voor uw toepassingsweergave.
Het is belangrijk om te beseffen dat AngularJS op geen enkel moment de template als snaren manipuleert. De invoer voor AngularJS is browser-DOM en geen HTML-reeks. De datumbindingen zijn DOM-transformaties, geen string-concatenaties of innerHTML veranderingen. Het gebruik van de DOM als input, in plaats van strings, is de grootste differentiatie die AngularJS heeft van zijn sibling-frameworks. Het gebruik van de DOM is wat je in staat stelt om de vocabulaire van de richtlijn uit te breiden en je eigen richtlijnen op te stellen, of zelfs te abstraheren tot herbruikbare componenten!
Een van de grootste voordelen van deze aanpak is dat het een strakke workflow creëert tussen ontwerpers en ontwikkelaars. Ontwerpers kunnen hun HTML markeren zoals ze dat normaal zouden doen, en dan nemen ontwikkelaars het stokje en nemen ze de functionaliteit over via koppelingen met heel weinig inspanning.
Hier is een voorbeeld waarbij ik de ng-repeat richtlijn om over de afbeeldingen array en vul wat in essentie een is img sjabloon.
function AlbumCtrl ($ scope) scope.images = ["thumbnail": "img / image_01.png", "description": "Afbeelding 01 description", "thumbnail": "img / image_02.png", " description ":" Afbeelding 02 description ", " thumbnail ":" img / image_03.png "," description ":" Image 03 description ", " thumbnail ":" img / image_04.png "," description " : "Afbeelding 04 beschrijving", "thumbnail": "img / image_05.png", "description": "Afbeelding 05 beschrijving"];
Het is ook de moeite waard te vermelden, als een kanttekening, dat AngularJS je niet dwingt om een nieuwe syntax te leren of om je sjablonen uit je applicatie te extraheren.
AngularJS neemt de basisprincipes achter het oorspronkelijke MVC-ontwerppatroon van software op in de manier waarop client-side webapplicaties worden gebouwd.
Het MVC- of Model-View-Controller-patroon betekent veel verschillende dingen voor verschillende mensen. AngularJS implementeert MVC niet in de traditionele betekenis, maar eerder iets dichter bij MVVM (Model-View-ViewModel).
De model- is gewoon de data in de applicatie. De model- is gewoon oude JavaScript-objecten. Het is niet nodig om van framework-klassen te erven, het in proxy-objecten te wikkelen of speciale getter / setter-methoden te gebruiken om er toegang toe te krijgen. Het feit dat we te maken hebben met vanilla JavaScript is een erg leuke functie, die de toepassing van de boilerplate vermindert.
EEN ViewModel is een object dat specifieke gegevens en methoden biedt om specifieke weergaven te behouden.
De ViewModel is de $ scope object dat binnen de AngularJS-applicatie leeft. $ scope is slechts een eenvoudig JavaScript-object met een kleine API die is ontworpen om wijzigingen in zijn staat te detecteren en uit te zenden.
De controleur is verantwoordelijk voor het instellen van de initiële status en augmenting $ scope met methoden om gedrag te beheersen. Het is vermeldenswaard dat de controleur slaat status niet op en communiceert niet met services op afstand.
De uitzicht is de HTML die bestaat nadat AngularJS de HTML heeft geparseerd en gecompileerd om gerenderde opmaak en bindingen op te nemen.
Deze divisie creëert een solide basis om uw applicatie te ontwerpen. De $ scope heeft een verwijzing naar de gegevens, de controleur definieert gedrag, en de uitzicht handelt de lay-out af en geeft interactie af aan de controleur om dienovereenkomstig te reageren.
AngularJS heeft een ingebouwd afhankelijkheidsinjectiesubsysteem dat de ontwikkelaar helpt door de toepassing gemakkelijker te ontwikkelen, te begrijpen en te testen.
Dependency Injection (DI) stelt u in staat om naar uw afhankelijkheden te vragen in plaats van ze zelf te moeten zoeken of maken. Zie het als een manier om te zeggen: "Hee, ik heb X nodig", en de DI is verantwoordelijk voor het maken en het voor je beschikbaar stellen.
Om toegang te krijgen tot de belangrijkste AngularJS-services, is het gewoon een kwestie van die service als een parameter toevoegen; AngularJS zal detecteren dat u die service nodig heeft en een instantie voor u beschikbaar stellen.
function EditCtrl ($ scope, $ location, $ routeParams) // Iets slims hier ...
U kunt ook uw eigen aangepaste services definiëren en deze ook beschikbaar maken voor injectie.
Accentsconagua
hoekig. module ('MyServiceModule', []). factory ('notify', ['$ window', function (win) return function (msg) win.alert (msg);;]); function myController (scope, notifyService) scope.callNotify = function (msg) notifyService (msg); ; myController. $ inject = ['$ scope', 'notify']; Richtlijnen zijn mijn persoonlijke favoriete functie van AngularJS. Heb je ooit gewenst dat je browser nieuwe trucjes voor je zou doen? Welnu, nu kan het! Dit is een van mijn favoriete onderdelen van AngularJS. Het is waarschijnlijk ook het meest uitdagende aspect van AngularJS.
Richtlijnen kunnen worden gebruikt om aangepaste HTML-tags te maken die dienen als nieuwe, aangepaste widgets. Ze kunnen ook worden gebruikt om elementen met gedrag te "versieren" en DOM-kenmerken op interessante manieren te manipuleren.
Hier is een eenvoudig voorbeeld van een richtlijn die naar een gebeurtenis luistert en deze actualiseert $ scope, overeenkomstig.
myModule.directive ('myComponent', functie (mySharedService) return limit: 'E', controller: function ($ scope, $ attrs, mySharedService) $ scope. $ on ('handleBroadcast', function () $ scope .message = 'Richtlijn:' + mySharedService.message;);, replace: true, template: ''; ); Vervolgens kunt u deze aangepaste richtlijn gebruiken, zoals zo.
Als u uw toepassing als een samenstelling van afzonderlijke componenten maakt, is het ongelooflijk eenvoudig om functionaliteit toe te voegen, bij te werken of te verwijderen als dat nodig is.
Het AngularJS-team is ervan overtuigd dat elke code die in JavaScript is geschreven, vergezeld moet gaan van een reeks krachtige tests. Ze hebben AngularJS ontworpen met testbaarheid in het achterhoofd, zodat het testen van uw AngularJS-applicaties zo eenvoudig mogelijk is. Er is dus geen excuus om het niet te doen.
Aangezien JavaScript dynamisch is en wordt geïnterpreteerd in plaats van gecompileerd, is het van groot belang dat ontwikkelaars een gedisciplineerde mindset hanteren voor het schrijven van tests..
AngularJS is volledig vanaf de grond af geschreven om toetsbaar te zijn. Het komt zelfs met een end-to-end en unit test runner setup. Als je dit in actie wilt zien, bekijk dan het project met hoekige zaden op https://github.com/angular/angular-seed.
Als je eenmaal het seed-project hebt, is het een makkie om de tests ertegen uit te voeren. Dit is hoe de uitvoer eruit ziet:
De API-documentatie zit vol met end-to-end tests die een ongelooflijke klus doen om te illustreren hoe een bepaald deel van het framework zou moeten werken. Na een tijdje merkte ik dat ik meteen naar de tests ging om te zien hoe iets werkte, en dan misschien de rest van de documentatie te lezen om iets uit te zoeken.
We hebben zes van de vele AngularJS-functies besproken waar ik van hou. Ik ben van mening dat deze zes functies essentieel zijn om niet alleen met AngularJS aan de slag te gaan, maar ook om uw applicatie op een manier te zetten die onderhoudbaar en uitbreidbaar is.
De website voor AngularJS, http://angularjs.org, heeft tal van werkende voorbeelden en veel uitstekende documentatie. Ik raad ook aan om de verbazingwekkende community op de AngularJS-mailinglijst te bekijken.
Laat me weten wat je denkt!
