De ‘waaroms’ van AngularJS

De ‘waaroms’ van AngularJS

In de tutorials die ik heb gedaan hoorde ik vaak de uitspraak “Doe dit, anders gaat het fout.”. Wat is ‘dit’? Wat is ‘het’? Waarom gaat het ‘fout’? Ze denken iets uit te leggen en bij mij roept het vooral vragen op. Ik snap het niet. Waarom?

​Waarom ‘waarom’?​​​

​Waarom leren kinderen? Omdat ze bij alles vragen “Waarom?”. Zo leren ze de wereld om zich heen snappen.

‘Waarom’ is nog steeds een belangrijke vraag die naar mijn mening te weinig wordt gesteld. Natuurlijk is er de 5 Whys methode om een root cause analysis uit te voeren. Voor simpele dingen vraag je gewoon zelf ‘waarom’. Tenminste, dat zou je moeten. Ik doe dat wel. Ik wil de wereld om heen snappen.

AngularJS “waaroms”

Waarom heeft Google Angular bedacht?

Uiteraard heeft iedereen z’n eigen ideeën over deze ‘waarom’. Mobile support, data binding, sexy op je CV. Ik hoorde laatst een goeie opmerking waarom Google AngularJS heeft ontwikkeld:

Het businessmodel van Google is het leveren van diensten en het opslaan van data. Data is meestal ‘in ruste’. Hun diensten gonzen van bedrijvigheid. Wat nou als je daar op kunt besparen? Wat nou als we de rendering van pagina’s uitbesteden aan de clients en we geen dure servers hoeven te plaatsen om bijv. een JSF pagina te renderen? Tadaa! Google serveert data en je browser maakt er een mooi geheel van.

Waarom kan AngularJS niet tegen minification?

Javascript minification breekt de dependency injection van AngularJS. Deze code

    function myController($http) {}

kan worden geminified tot

    function a(b) {}

waardoor AngularJS geen $http meer kan herkennen en dus ook niet meer injecten.

De mooiste manier (vind ik) om dit te voorkomen is door $inject te gebruiken:

    myController.$inject = ['$http'];
    function myController($http) {}

De inhoud van strings wordt nooit geminified en AngularJS kan dus via de $inject achterhalen welke componenten er geïnject moeten worden:

    a.$inject = ['$http'];
    function a(b) {}

Waarom controllerAs?

De “controllerAs” syntax voorkomt dat je de binding variable $scope moet gebruiken. Je behandelt de controller als een object en niet als een factory die een ander object maakt.

    function myController() {
        var vm = this;
        vm.someList = [1, 2, 3];

Hierdoor is het ook mogelijk om controllers genest te gebruiken in je applicatie.

<div ng-controller="myController as c">
  <div ng-repeat="n in c.someList">
    <div ng-controller="otherController as o">
      <!-- now you can address both controllers as 'c' and 'o' -->
    </div>
  </div>
</div>

Waarom services én factories?

Dat vragen meer mensen zich af. Het idee voor nu is: gebruik services. Gelukkig zijn we straks van deze “waarom” af, want in Angular 2 bestaan beide concepten niet meer!

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: