Angular.JS ohne $scope

In Angular ist der Scope die technische Implementierung des Viewmodels. Obwohl einfach zu verstehen und verwenden ist angekündigt mit der Version 2.0 darauf zu verzichten. In der Tat ist ein Fehler in der Scope Hierarchie mitunter schwer zu finden.

Folgender Blog Artikel ist rein akademisch und zeigt zwei Wege auf einen Controller in Angular.js zu schreiben bzw Daten deklarativ in HTML zu binden.

   1:  <form id="form1" runat="server" ng-app="app">
   2:          <div ng-controller="myController">
   3:              <input ng-model="person.name" />
   4:<input ng-click="myclick()" type="button" value="click" />
   5:          </div>
   6:   </form>
   7:   
   8:   <script>
   9:         var app = angular.module('app', []);
  10:          app.controller('myController', ['$scope', function ($scope) {
  11:             $scope.person = { name: 'Hannes' };
  12:             $scope.myclick = function () {
  13:             $scope.person.name = "Franz";
  14:              };
  15:       }]);
  16:   </script>

 

Die Scope freie Alternative: Durch die Nutzung der Controller AS Syntax im HTML Teil entfällt $scope als Instanz des Viewmodels. Im Controller kann kann per this auf Methoden und Eigenschaften zugegriffen werden. Über die Extend Methode wird das JavaScript Objekt erweitert.

   1:  <form id="form1" runat="server" ng-app="app">
   2:    <div ng-controller="myController as alias">
   3:        <input ng-model="alias.person.name" />
   4:        <input ng-click="alias.myclick()" type="button" value="click" />
   5:  </div>
   6:  </form>
   7:   
   8:  <script>
   9:     var app = angular.module('app', []);
  10:     app.controller('myController',myCtrl);
  11:     function myCtrl() { };
  12:     angular.extend(myCtrl.prototype, {
  13:              person : { name: 'Hannes' },
  14:              myclick: function () {
  15:              this.person.name="Frnaz";
  16:          }
  17:     });
  18:  </script>

 

Nach einer weile nachdenken, noch eine einfachere Scope freie Version eines Angular Controllers.

   1:  var app = angular.module('app', []);
   2:          app.controller('myController', [function () {
   3:              var vm = this;
   4:              vm.person = { name: 'Hannes' };
   5:              vm.myclick = function () {
   6:                  vm.person.name = "Franz";
   7:              };
   8:          }]);

 

Den gewöhnlichen Teilnehmer einer Angular Schulung überfordert dies eindeutig. In meinem Angular Training bleibe ich bei der Scope Variante.

Kommentare sind geschlossen