AngularJS의 템플릿과 대조적으로 컨트롤러의 모델 값을 설정하면 어떤 이점이 있습니까?

Question

저는 AngularJS를 배우고 있으며 현재 this 단계의 튜토리얼입니다. 전체 코드 available here on Github.

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

정말 IMG 요소에 대한 Click 이벤트 핸들러에서 사용하는 방법입니다 :

<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

일반적으로 Angular의 HTML은 "보기"또는 "템플릿"으로 간주됩니다. 따라서 여기에 적어도 두 가지 원칙이 있습니다.

1. MVC 접근 방식에서는보기가 "벙어리"가되기를 원합니다. 기본적으로이 은 로직을 뷰에 넣지 말라는 조잡한 방법입니다.

2. 웹 개발 입장에서 템플릿은 선언적 부분입니다. 따라서 HTML은 선언적이어야하며 작동하지 않아야합니다.

마지막으로 또 다른 이유는 컨트롤러에 기능 코드를 유지하면 코드 가독성이 높아진다는 것입니다. 다른 개발자는 컨트롤러에서 로직을 찾고, 로직에 버그가있을 때 View에서 사냥 할 필요가 없다는 것을 알고 있습니다.

모든 내용은 편의를 위해 수시로 이러한 규칙을 어기는 것입니다.

Answer 2

기본적으로, 이는 단지 관심사를 분리하기위한 것입니다.

실행해야하는 코드가 단지 한 줄이기 때문에 이것은 약간의 엣지 경우입니다. 이 경우 실제로는 단지 의견 일 뿐이며 일부 사람들은 HTML에서 어떤 사람들이 선호하지 않습니다.

.js 파일에 Javascript 코드를 작성하면 인텔리 센스 및 구문 강조 표시가되어 오류를 쉽게 찾아 낼 수 있습니다. + 귀하의 코드는 linted 수 있습니다. :-)

또한 1 대신에 각도 2를 배우는 것이 좋습니다. 이제 각도 1은 중복됩니다.