AngularJs – Controller als VM deklarieren

Tutorial AngularJs

von Ardian Shala, 30.04.2016 - update: 19.05.2017
AngularJs benutzt $scope für das Binding von Variablen. Oft gibt es hier Komplikationen bei Promises oder es wird schnell lästig ständig $scope im Controller zu nutzen.
Hier werden 3 Optionen dargestellt um dies zu vermeiden.
Vorraussetzung:
  • Angular 1.5.x - link
  • Editor

Downloads:

ohne routeprovider mit routeprovider

Option 1 – vm ohne Routeprovider

„vm“ in Controller definieren und anschließend weitere Properties hinzufügen.

app.controller('HomeController', function() {
    var vm = this;
    vm.test = "Hello Home";
});

Option 2 – vm mit Routeprovider

Gleicher Start wie oben, Unterschied ist hier in der app config (spa.js / appjs).
Hier wird der zugewiesene Controller als „vm“ deklariert.

app.controller('HomeCtrl', function() {
    vm = this;
    vm.test = "some text";
}

Controller as vm in Routeprovider definieren

var app = angular.module('app', ['ng-route']);
app.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'views/home.html',
        controller: "HomeController as vm"
    });
});

Option 3 – $scope einmalig nutzen

Hier wird „vm“ als neues Objekt mit dem Context von „this“ definiert, welches direkt dem „$scope.vm“ zugewiesen wird.
Somit entfällt das Umdeklarieren vom Controller in der app config.

app.controller('HomeCtrl', function($scope) {
    var vm;
    $scope.vm = vm = this;
    vm.test = "some text";
}

Final vm im view nutzen

Nun können wir zuvor zugewiesene Variablen über „vm“ nutzen.
z.B.: {{vm.test}}

#$scope #angularjs #viewmodel #vm

Autor: Ardian Shala

Ersteller der Webseite MuchaDev. Selbstständiger IT Constultant für Frontend Technologien. Full Stack Entwickler mit AngularJs, Angular, Ionic und C#.