AngularJS – Зачем использовать «Controller as vm»?

Одним из преимуществ использования controllerа в качестве синтаксиса является то, что он позволяет вам определять ваши controllerы как простую конструкторскую функцию javascript со свойствами и функциями, открытыми непосредственно из созданного объекта, а не с помощью $ scope.

Например:

 function MyController() { var ctl = this; ctl.message = 'You have not clicked anything yet.'; ctl.onClick = function() { ctl.message = 'You clicked something.'; }; return ctl; } ... myModule.controller('MyController', MyController); ... 
 {{vm.message}} Click Me  

Обратите внимание, что мы можем использовать controller, который является простым старым javascript, даже не привязанным к угловому. Для сценариев, где вам нужны дополнительные зависимости, такие как $ scope или другие сервисы, вы все равно можете легко передать их своему конструктору, но этот шаблон поощряет меньше беспорядка непосредственно к вашей области $ scope, а также решает проблему спряжения переменной, когда переменные задаются напрямую о сфере охвата.

В конечном счете это действительно зависит от предпочтения, но для меня мне действительно не нужно определять все непосредственно на сфере действия и как можно больше обрабатывать мои controllerы как любой старый javascript-объект.

Вот отличная статья об использовании controllerа: http://www.johnpapa.net/angularjss-controller-as-and-the-vm-variable/

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

Ваш вопрос – это вопрос, о котором я некоторое время думал. Единственное реальное значение, которое я вижу, заключается в том, что когда вы используете вложенные controllerы на странице, вы можете получить семантическую ссылку на каждую из областей, чтобы ваша разметка стала немного легче читать. Так, например:

 
 
 
Showing{{customers.model.length}} customers with a total of {{orders.model.length}} orders
 
  

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

То, что вы испытываете в этом примере, связано не только с использованием controllerа как синтаксиса; вместо этого это связано с тем, что ваши вложенные объекты скрывают родителя из-за именования.

Контроллер в качестве опции очень полезен при работе с другими языками, которые скомпилированы для JavaScript, таких как CoffeeScript или TypeScript. Это также позволяет создавать гораздо более легкие controllerы, которые могут быть взаимозаменяемы с негладными компонентами из-за того, что не требуется инъекция $ scope. Это просто альтернативный синтаксис, но вы все равно можете использовать $ scope, если хотите.

Реальный вопрос здесь в том, почему люди, которые написали примеры controllerа в качестве синтаксиса, решили использовать «как vm». Технически синтаксис предназначен для обеспечения стиля кодирования в стиле MVVM, поэтому использование «как vm» может иметь смысл, но это раскрывает проблему, которую вы видите. Ваш родительский controller является объектом с именем vm , а ваш дочерний объект также называется vm , поэтому дочерний объект скрывает родительский объект из представления. Если вместо этого вы назовете свои объекты по-разному, ваш дочерний объект не будет иметь проблемы с доступом к родительскому объекту, и на самом деле будет очень ясно, в коде, с которым объект, с которым вы работаете, исходит.

Я думаю, что одним из главных преимуществ является то, что он автоматически гарантирует, что вы закончите с . в ваших привязках. Потому что эмпирическое правило в Angular заключается в том, что если у вас нет . в ваших привязках вы можете стрелять в ногу.

У вас есть это:

Возможно, это не сработает. С другой стороны, если вы используете SomeController as vm синтаксис SomeController as vm вы автоматически получите это:

Это избавит вас от потенциальных проблем с привязкой данных, которые не работают должным образом.

Причины этого лежат в том, как прототипное наследование работает на JavaScript, и здесь было описано очень подробно: Каковы нюансы объема прототипа / прототипического наследования в AngularJS?

Насколько я понимаю, основной причиной использования синтаксиса «controller as vm» является то, что controllerы в angularjs фактически служат в качестве моделей (инкапсулируют данные и обеспечивают поведение) или модели представления (выставляют данные в html) .

В большинстве случаев это сработало, но один из основных недостатков, с которыми я столкнулся, заключается в том, что трудно получить доступ к данным в родительском controllerе от дочернего controllerа и возможное решение ( Get parent controller в дочернем controllerе, который все использует «controller как vm» ) не элегантный.