Looked at “best angular practices”, and there is a controller creation template enter image description here

I do by example:

(function (angular) { angular .module('test', []); angular .module('test') .controller('countryCtrl', countryCtrl); //countryCtrl.$inject = ['$scope']; function countryCtrl() { var vm = this; vm.country = { name: 'Ukraine', area: '603 628', population: '42 825 883', capital: { name: 'Kiev' } }; } })(angular);

Layout:

 <div class="box" ng-controller="countryCtrl"> <h1 class="h1">Страна: {{this.country.name}}</h1> <p>Площадь: {{this.country.area}}</p> <p>Население: {{this.country.population}}</p> <p>Столица: {{this.country.capital.name}}</p> </div>

And nothing is displayed, what am I doing wrong? Thank.

  • ng-controller="countryCtrl as vm" is not for nothing called controller as syntax - Grundy
  • @Grundy This is what: Argument 'countryCtrl as vm' is not a function, got undefined - Khotey Vitaliy
  • and what version of an angulyar? :) - Grundy
  • @Grundy AngularJS v1.0.6) - Khotey Vitaliy
  • old :-) it doesn't work in it - update at least to 1.3.5 or 1.4 and of course the latest 1.4.7 type is best of all - Grundy

1 answer 1

This opportunity, to use the controller instead of the Osprey, was introduced in version 1.1.5 and was named: controller As syntax

It allows you to assign an alias to the controller and access the properties and functions of the controller directly.

To do this, you must register in the ng-controller attribute alias

 ng-controller="ControllerName as alias"

usually, alias is vm as an abbreviation of the view model .

in your case: ng-controller="countryCtrl as vm"

Then you can refer to the properties of the controller

 <h1 class="h1">Страна: {{vm.country.name}}</h1>

it is worth remembering that the osprey does not disappear anywhere, and this view indicates exactly the osprey, and a field with the same name as the alias indicating the controller is added to the osprey.