AngularJS -SitePoint가있는 슬라이드 쇼 플러그인 만들기

이 튜토리얼은 angularjs를 사용하여 슬라이드 쇼 플러그인을 구축하고 더 깨끗하고 간결한 코드베이스를 위해 jQuery를 피하는 것을 보여줍니다. 우리는이를 달성하기 위해 각도 지시와 애니메이션을 활용합니다. AngularJS 지시에 대한 친숙 함이 가정됩니다.

주요 장점 :

jQuery 기반 솔루션에 비해 코드가 줄어 듭니다 지시서 및 애니메이션을 통한 기존 AngularJS 응용 프로그램에 대한 원활한 통합. jQuery가 필요하지 않습니다 CSS 미디어 쿼리를 통해 달성 할 수있는 반응 형 디자인 캡션, 내비게이션 및 루핑 (회전식) 효과로 쉽게 사용자 정의 할 수 있습니다

1 단계 : Angularjs 지시문 정의 우리는 : 라는 분리 된 Angularjs 지시문을 만드는 것으로 시작합니다.

는 부모의 범위와의 충돌을 방지하기 위해 분리됩니다.
• 속성은 상위 스코프에서 일련의 이미지 객체를 수신합니다. 애니메이션 지원을 위해 가 포함되어 있습니다 2 단계 : 이미지 데이터 컨트롤러
컨트롤러는 이미지 데이터를 제공합니다
• 3 단계 : 지시 템플릿 ()
• 지침의 HTML 템플릿은
를 사용하여 이미지를 표시합니다 :
• 4 단계 : CSS 애니메이션
원활한 전환을 위해 CSS를 추가하십시오 (원하는대로 타이밍 조정) :
• 5 단계 : 지침 사용

Main HTML에는 지침 및 컨트롤러를 포함하십시오

슬라이더 스타일링에 필요한 CSS를 포함해야합니다. 이 향상된 예제에는 자동 슬라이드 쇼 기능 및 개선 된 오류 처리가 포함됩니다. 자리 표시 자 이미지 경로를 실제 이미지 URL로 바꾸는 것을 잊지 마십시오. 속성은 접근성을 위해 추가됩니다

위 내용은 AngularJS -SitePoint가있는 슬라이드 쇼 플러그인 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!