В чем преимущество (ы) установки значения модели в контроллере, а не в шаблоне в AngularJS?

Question

Я изучаю AngularJS и в настоящее время на этапе this этапу учебника. Полный код available here on Github.
Там есть компонент, который имеет контроллер со следующей функцией:

self.setImage = function setImage(imageUrl) { 
    self.mainImageUrl = imageUrl; 
}; 

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

<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" /> 
... 
<ul class="phone-thumbs"> 
    <li ng-repeat="img in $ctrl.phone.images"> 
    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" /> 
    </li> 
</ul> 
... 

Итак, каковы преимущества для обработки события, как указано выше, а именно:

<img ng-src="{{img}}" ng-click="$ctrl.mainImageUrl = img" /> 

? Связано ли это с сохранением логической обработки из представления? Любые другие соображения?

Answer 1

В целом HTML в Angular считается «View» или «Template». Таким образом, здесь действуют как минимум два принципа:

1. В подходе MVC вы хотите, чтобы ваши представления были «немыми». В принципе, это - грубый способ сказать, не вставляйте логику в свои Представления.

2. С точки зрения веб-разработки, шаблон является декларативной частью . Итак, ваш HTML должен быть декларативным и не функциональным.

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

Все, что касается меня, я время от времени нарушаю эти правила для удобства.

Answer 2

Да, в основном, это просто для разделения проблем.

Это несколько ситуация с краем, поскольку код, который вам нужно выполнить, - это всего лишь одна строка. В этом случае это действительно вопрос мнения, некоторые люди предпочитают в HTML, некоторые люди этого не делают.

Очевидно, что если вы напишете Javascript-код в файле .js, вы получите подсветку intellisense и синтаксиса и тому подобное, так проще обнаружить ошибки. + Ваш код может быть выровнен. :-)

Также я бы рекомендовал изучить Угловое 2 вместо 1. Угловое 1 теперь избыточно.