AngularJS를 어떻게 사용하나요? Anglejs 사용법에 대한 자세한 소개

이번 글에서는 주로 angularjs의 사용법을 다루었습니다. 이제 간략한 기능 설명도 함께 살펴보겠습니다

최근 프로젝트에 AngularJS를 사용해서 주말에 공부해서 모두와 공유했어요.

1. AngularJS에 대한 간략한 소개
AngularJS 공식 문서에는 이렇게 소개되어 있습니다.
JavaScript 클라이언트 측 기술을 사용하여 완전히 작성되었습니다. 다른 유서 깊은 웹 기술(HTML, CSS
및 JavaScript)과 함께 작동하여 웹 애플리케이션 개발을 그 어느 때보다 쉽고 빠르게 만듭니다.
AngularJS를 사용하면 웹 애플리케이션 개발이 매우 간단해지는 동시에 복잡한 애플리케이션 구축의 어려움도 줄어듭니다. 이는 개발자가 최신 웹 애플리케이션에서 자주 사용하는 다음과 같은 일련의 고급 기능을 제공합니다.
애플리케이션 로직, 데이터 모델 및 뷰 분리
Ajax 서비스
종속성 주입
검색 기록(북마크 및 앞으로 및 뒤로 버튼 활성화) 일반 웹 앱)
테스트 중입니다.

2.Angularjs 디렉토리 구조

최신 버전은 angle2.0인데, 제가 사용하는 버전은 1.3입니다.

기본 기능 사용시에는 angle.js나 angle.min.js 파일만 import하시면 됩니다. 다른 js 파일은 라우팅에 관한 스크립트 파일인angular-route.js와 같이angularjs와 분리된 기능입니다.버전 1.2에서는 라우팅을 사용하기 위해 별도의angular-route.js를 작성할 필요가 없지만 버전 1.3부터는 , 사용 경로는 별도로 angle-route.js를 가져와야 합니다

3. Angularjs 기본 사용

웹 프로젝트 생성(Hbuilder 사용), js 파일 가져오기

AngularJs의 주요 핵심 기능: MVC 모듈화 데이터 바인딩, 시맨틱 태그(명령어), 의존성 주입 등

MVC
MVC의 핵심 개념은 데이터를 관리하는 코드(모델), 애플리케이션 로직 코드(컨트롤러), 표시하는 코드를 분리하는 것입니다. 데이터(보기). Angular 애플리케이션에서 뷰는 DOM이고 컨트롤러는 JavaScript이며 모델 데이터는 객체의 속성에 저장됩니다.

작은 예를 작성했습니다:

HTML code

JS code

이 경우 ng-app은 각도 지시문입니다(일반적으로 ng- in angle로 시작하는 지시문입니다). 전체 페이지를 설명하는 데 사용되는 은(는) 각도 애플리케이션의 소유자입니다. {{msg}} 페이지에 데이터를 출력하는데 사용됩니다. ng-bind를 사용하여 데이터를 바인딩하고 페이지에 출력할 수도 있습니다.

양방향 데이터 바인딩전통적인 js 프레임워크에서는 HTML 코드를 데이터와 혼합하여 표시하기 전에 사용자에게 보내는 반면, Angle은 UI의 특정 부분을 자바스크립트 속성에 매핑할 수 있습니다. 그런 다음 스스로 동기화하도록 합니다. 이를 데이터 바인딩이라고 합니다. 다음 코드를 확인하세요.

위 코드에 AngularJS 개발 매뉴얼을 방문하세요.)

Modularization위 코드에서는 js 파일에서 전역 함수인 데모1Controller를 선언했습니다. js 전역 함수나 변수를 정의하는 것은 권장되지 않습니다. 이는 전역 공간을 오염시킵니다. 이러한 종류의 코딩은 "우아함"이 아닙니다. 각도에서는 모듈(이 문제를 해결하기 위해 모듈화)을 사용할 수 있습니다
위 코드를 다음과 같이 수정했습니다.
Html code

,

JS code

코드 실행 결과는 변함이 없지만, angle.module을 통해 모듈을 정의했습니다. Angular.module("myapp",[ ]) 뒤에 있는 "[ ]"는 현재 myapp 모듈이 다른 모듈과 관련되어 있는지 여부를 나타냅니다. 관련이 없으면 [ ] 안에 코드를 작성할 필요가 없습니다. 하지만 [ ] 반드시 존재해야 합니다. 존재하지 않으면 의미가 다릅니다.

참고: Anglejs의 모든 것은 모듈로 시작됩니다.

종속성 주입
위 코드에서 js 코드에서 내가 사용하는 $scope를 누가 만들었고 왜 사용할 수 있는지 다들 궁금하실 겁니다. 사실은 모두 Angular에서 제공하는 의존성 주입에 의지해서 이루어지는데, 스프링을 배울 때 이미 의존성 주입이라는 개념을 접했지만, 프론트엔드 개발에서는 의존성 주입을 처음 사용해 봤습니다.
AngularJS는 $injetor(인젝터 서비스)를 사용하여 종속성 쿼리 및 인스턴스화를 관리합니다.
실제로 $injetor는 애플리케이션 모듈, 지시문 및 컨트롤러를 포함하여 AngularJS의 모든 구성 요소를 인스턴스화하는 역할을 담당합니다. 런타임에 $injetor는 모듈이 시작될 때 모듈을 인스턴스화하고 필요한 모든 종속성을 전달하는 일을 담당합니다. 개발 중에 제가 가장 많이 배운 것은 필요한 곳에 매개변수를 전달하는 것입니다.
Angularjs의 주입은 일반적으로 세 가지 유형으로 나뉩니다.
Inferred 주입

디스플레이 주입(주석 주입)

인라인 주입(인라인 주입)

이 글은 여기까지입니다. 자세한 내용을 보려면 PHP 중국어 웹사이트 AngularJS 사용자 매뉴얼을 방문하세요. 궁금한 점이 있으면 아래에 메시지를 남겨주세요.

위 내용은 AngularJS를 어떻게 사용하나요? Anglejs 사용법에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!