AngularJs – Controller als VM deklarieren

Downloads:

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