AngularJs "контроллер как" синтаксис - разъяснение?

I читает о новом синтаксисе от angularJS относительно controller as xxx

Синтаксис InvoiceController as invoice сообщает Angular о создании экземпляра контроллер и сохранить его в переменной-счете в текущем сфера.

Визуализация:

Хорошо, поэтому у меня не будет параметра $scope в моем контроллере, и код будет намного чище в контроллере.

Но

Мне нужно будет указать другой псевдоним в представлении

Итак, до сих пор я мог сделать:

<input type="number" ng-model="qty"  />

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty <--notice

И теперь я могу сделать:

 <input type="number" ng-model="invoic.qty"  /> <-- notice 

  ....controller('InvoiceController', function() {
       // do something with  this.qty  <--notice

Вопрос

Какова цель этого? удаление из одного места и добавление в другое место?

Я буду рад видеть, что мне не хватает.

Ответы

Ответ 1

В этом есть несколько вещей.

Некоторым людям не нравится синтаксис $scope (не спрашивайте меня почему). Говорят, что они могут просто использовать this. Это была одна из целей.

Четкое объяснение того, откуда приходит свойство, действительно полезно.

Вы можете встраивать контроллеры, и при чтении html это довольно ясно, где все свойства приходят.

Вы также можете избежать некоторых проблем с точкой..

Например, имея два контроллера с одинаковым именем "имя", вы можете сделать это:

<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">
        <input ng-model="name" /> {{name}} - {{$parent.name}}
    </div>
</body>

Вы можете изменить как родительский, так и дочерний, без проблем. Но вам нужно использовать $parent, чтобы увидеть родительское имя, потому что вы затеняли его в своем дочернем контроллере. В массивном html-коде $parent может быть проблематично, вы не знаете, откуда это имя.

С помощью controller as вы можете сделать:

<body ng-controller="ParentCtrl as parent">
    <input ng-model="parent.name" /> {{parent.name}}

    <div ng-controller="ChildCtrl as child">
      <input ng-model="child.name" /> {{child.name}} - {{parent.name}}
    </div>
</body>

Тот же пример, но читать его гораздо понятнее.

Ответ 2

Основным преимуществом синтаксиса controller as, который я вижу, является то, что вы можете работать с контроллерами как с классами, а не только с некоторыми функциями декодирования области и использовать преимущества наследования. Я часто сталкиваюсь с ситуацией, когда есть функциональность, которая очень похожа на несколько контроллеров, и самое очевидное, что нужно сделать, - создать класс BaseController и наследовать от него.

Несмотря на то, что существует наследование $scope, которое частично решает эту проблему, некоторые люди предпочитают писать код более чем на OOP, что, на мой взгляд, делает код более легким для объяснения и тестирования.

Вот сценарий для демонстрации: http://jsfiddle.net/HB7LU/5796/

Ответ 3

Я считаю, что одно конкретное преимущество ясно, когда у вас есть вложенные области. Теперь будет совершенно ясно, в какой области содержится ссылка на свойство.

Ответ 4

Источник

Разница между созданием контроллера с помощью $scope object и использованием синтаксиса "controller as" и vm

Создание контроллера с использованием объекта $scope

Обычно мы создаем контроллер, используя объект $scope, как показано в приведенном ниже списке:

myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

Выше мы создаем AddController с тремя переменными и одним поведением, используя контроллер объекта и вид объекта $scope, которые говорят друг с другом. Объект $scope используется для передачи данных и поведения в представление. Он склеивает представление и контроллер вместе.

По существу объект $scope выполняет следующие задачи:

Передача данных с контроллера на представление
Передача поведения с контроллера на представление
Склеивает контроллер и просматривает вместе
Объект $scope изменяется при изменении вида и изменении вида, когда свойства объекта объекта $scope изменяются

Мы добавляем свойства объекту $scope для передачи данных и поведения в представление. Прежде чем использовать объект $scope в контроллере, нам нужно передать его в функции контроллера как зависимости.

Использование синтаксиса "контроллер как" и vm

Мы можем переписать вышеуказанный контроллер, используя контроллер как синтаксис и переменную vm, как показано в приведенном ниже списке:

myApp.controller("AddVMController", function () {

    var vm = this;

    vm.number1 = undefined;

    vm.number2=undefined;

    vm.result =undefined;

    vm.add = function () {

        vm.result = vm.number1 + vm.number2;

    }

});

По существу, мы назначаем это переменной vm, а затем присоединяем к ней свойство и поведение. В представлении мы можем получить доступ к AddVmController, используя контроллер в качестве синтаксиса. Это показано в листинге ниже:

<div ng-controller="AddVMController as vm">

            <input ng-model="vm.number1" type="number" />

            <input ng-model="vm.number2" type="number" />

            <button class="btn btn-default" ng-click="vm.add()">Add</button>

            <h3>{{vm.result}}</h3>

  </div>

Конечно, мы можем использовать другое имя, чем "vm" в контроллере в качестве синтаксиса. Под капотом AngularJS создает объект $scope и привязывает свойства и поведение. Однако, используя контроллер в качестве синтаксиса, код очень чист в контроллере, и только вид псевдонима виден в представлении.

Вот несколько способов использования контроллера в качестве синтаксиса:

Создайте контроллер без объекта $scope.
Назначьте это локальной переменной. Я предпочел имя переменной как vm, вы можете выбрать любое имя по вашему выбору.
Прикрепите данные и поведение к переменной vm.
В представлении укажите псевдоним контроллера, используя контроллер в качестве синтаксиса.
Вы можете указать имя псевдонима. Я предпочитаю использовать vm, если Im не работает с вложенными контроллерами.

При создании контроллера нет прямых преимуществ или недостатков использования объектного подхода $scope или контроллера в качестве синтаксиса. Это просто вопрос выбора, однако, используя контроллер, поскольку синтаксис делает код JavaScript контроллеров более читабельным и предотвращает любые проблемы, связанные с этим контекстом.

Вложенные контроллеры в объектном подходе $scope

У нас есть два контроллера, как показано в листинге ниже:

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

Свойство "возраст" находится внутри обоих контроллеров, и в представлении эти два контроллера могут быть вложены, как показано в приведенном ниже списке:

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

Как вы видите, для доступа к возрастному свойству родительского контроллера мы используем $parent.age. Контекстное разделение здесь не очень понятно. Но используя контроллер как синтаксис, мы можем работать с вложенными контроллерами более элегантным способом. Допустим, у нас есть контроллеры, как показано в листинге ниже:

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

В представлении эти два контроллера могут быть вложены, как показано в приведенном ниже списке:

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>

В синтаксисе контроллера у нас есть более читаемый код, а родительское свойство можно получить, используя псевдоним родительского контроллера вместо использования синтаксиса $parent.

Я завершу этот пост, сказав, что его чисто ваш выбор, хотите ли вы использовать контроллер как синтаксис или объект $scope. Нет никакого огромного преимущества или недостатка для того, чтобы просто контролировать контроллер как синтаксис, который вы контролируете в контексте, с которым легче работать, учитывая четкое разделение во вложенных контроллерах на представлении.

Ответ 5

Я нахожу, что основным преимуществом является более интуитивно понятный api, поскольку методы/свойства напрямую связаны с экземпляром контроллера, а не объектом области. В принципе, со старым подходом, контроллер становится просто украшением для создания объекта области.

Вот дополнительная информация по этому вопросу: http://www.syntaxsuccess.com/viewarticle/551798f20c5f3f3c0ffcc9ff

Ответ 6

Из того, что я прочитал, область $будет удалена в Angular 2.0 или, по крайней мере, как мы рассматриваем использование $scope. Возможно, было бы неплохо начать использовать контроллер, так как релиз 2.0 близок.

Ссылка на видео здесь для более подробного обсуждения.