AngularJS 모바일 개발의 함정-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS 모바일 개발의 함정

高洛峰

Nov 18, 2016 am 11:52 AM

angularjs

상대적으로 말하면 Jquery는 DOM 작업에 중점을 두고 있는 반면 AngularJS는 뷰 모델과 양방향 바인딩에 중점을 두고 있습니다.

DOM 작업 문제

요소 노드 추가, 요소 노드 제거, 요소 콘텐츠 가져오기, 요소 숨기기 또는 표시 등 DOM 작업에 jQuery를 사용하지 마세요. 이러한 작업을 구현하려면 지시문을 사용해야 하며, 필요한 경우 직접 지시문을 작성해야 합니다.

웹 사이트 웹 프런트엔드 개발 시 습관을 바꾸는 것이 어렵다면 웹 페이지에서 jQuery를 제거하는 것을 고려해 보세요. 실제로 AngularJS의 $http 서비스는 매우 강력하며 기본적으로 jQuery의 ajax 기능을 대체할 수 있으며 AngularJS에는 jQLite가 포함되어 있습니다. 일반적으로 사용되는 jQuery DOM 작업 방법, 이벤트 바인딩 등을 포함하여 내부적으로 구현된 jQuery의 하위 집합입니다. . 하지만 이것이 AngularJS를 사용할 때 jQuery를 사용할 수 없다는 의미는 아닙니다. 웹 페이지에 jQuery가 로드된 경우 AngularJS는 jQuery를 먼저 사용하고, 그렇지 않으면 jQLite로 대체됩니다.

모바일 앱이나 모바일 웹 개발이라면 Jquery를 도입하지 않는 것이 좋습니다. Jquery의 일부 기능이 꼭 필요한 경우에는 Zepto.js를 도입하세요. 하지만 저를 믿으세요. AngularJS를 사용하면 Jquery가 필요하지 않습니다!

자신만의 지시문을 작성해야 하는 상황은 일반적으로 타사 jQuery 플러그인을 사용할 때입니다. 플러그인은 AngularJS 외부에서 폼 값을 변경하기 때문에 즉시 모델에 반영할 수 없습니다. 예를 들어, 우리는 jQueryUI datepicker 플러그인을 많이 사용합니다. 날짜를 선택하면 플러그인이 입력 입력 상자에 날짜 문자열을 채웁니다. View는 변경되지만 Model은 업데이트되지 않습니다. $('.datepicker').datepicker(); 이 코드는 AngularJS의 관리 범위에 속하지 않기 때문입니다. DOM 변경 사항을 모델에 즉시 업데이트하는 지시문을 작성해야 합니다.

var directives = angular.module(&#39;directives&#39;, []);
  
directives.directive(&#39;datepicker&#39;, function() {
   return function(scope, element, attrs) {
       element.datepicker({
           inline: true,
           dateFormat: &#39;dd.mm.yy&#39;,
           onSelect: function(dateText) {
               var modelPath = $(this).attr(&#39;ng-model&#39;);
               putObject(modelPath, scope, dateText);
               scope.$apply();
           }
       });
   }
});

로그인 후 복사

그렇다면 이 지시문을 HTML에 소개합니다

1	`<input type="text"` `datepicker ng-model="myObject.myDateValue"` `/>`

로그인 후 복사

지시어는 HTML에 사용자 정의 태그 속성을 작성하여 플러그인 기능을 구현하고 HTML 기능을 효과적으로 보완하는 것입니다. 이 선언적 구문은 HTML을 확장합니다. 사용과 코드 유지 관리를 용이하게 하기 위해 프로젝트의 공통 기능과 페이지 구성 요소를 지시어로 캡슐화하는 것이 좋습니다.

Bootstrap 프레임워크의 플러그인과 jQuery를 기반으로 하는 기타 널리 사용되는 UI 구성 요소를 포함하여 우리가 사용할 수 있는 많은 지시문을 제공하는 AngularUI 프로젝트가 있다는 점에 유의해야 합니다. 이제 AngularJS 커뮤니티가 활성화되고 생태계가 탄탄해졌습니다.

ngOption의 값

은 큰 함정입니다. ngOption에 의해 생성된