De ‘waaroms’ van AngularJS

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 daarop 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

[javascript gutter="false"]
    function myController($http) {}
[/javascript]

kan worden geminified tot

[javascript gutter="false"]
    function a(b) {}
[/javascript]

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:

[javascript gutter="false"]
    myController.$inject = ['$http'];
    function myController($http) {}
[/javascript]

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

[javascript gutter="false"]
    a.$inject = ['$http'];
    function a(b) {}
[/javascript]

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.

[javascript gutter="false"]
    function myController() {
        var vm = this;
        vm.someList = [1, 2, 3];
[/javascript]

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

[html gutter="false"]
<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>
[/html]

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!