AngularJ를 배우는 방법? Anglejs 지식에 대한 가장 포괄적인 소개

이 글에서는 angularjs 학습 방법에 대한 자세한 설명을 소개합니다. 잊어버렸을 수도 있는 지식 포인트가 많이 있으니 지금 읽어보세요. 지금부터 이 글을 읽어보세요

Angular Js는 Javascript 프레임워크이며 Javascript로 작성된 라이브러리입니다.
AngularJS 모듈(Module)은 AngularJS 애플리케이션을 정의합니다.
AngularJS 컨트롤러(Controller)는 AngularJS 애플리케이션을 제어하는 ​​데 사용됩니다.
ng-app 지시어는 애플리케이션을 정의하고, ng-controller는 컨트롤러를 정의합니다.
AngularJS는 HTML을 확장합니다.
AngularJS는 ng-지시문을 통해 HTML을 확장합니다.
ng-app 지시문은 AngularJS 애플리케이션을 정의합니다.
ng-model 지시문은 요소 값(예: 입력 필드 값)을 애플리케이션에 바인딩합니다.
ng-bind 지시문은 애플리케이션 데이터를 HTML 보기에 바인딩합니다.
AngularJS는 표현식을 사용하여 데이터를 HTML에 바인딩합니다.
AngularJS란 무엇인가요?
AngularJS를 사용하면 최신 단일 페이지 애플리케이션(SPA: 단일 페이지 애플리케이션)을 더 쉽게 개발할 수 있습니다.
AngularJS는 애플리케이션 데이터를 HTML 요소에 바인딩합니다.
AngularJS는 HTML 요소를 복제하고 반복할 수 있습니다.
AngularJS는 HTML 요소를 숨기고 표시할 수 있습니다.
AngularJS는 HTML 요소 "뒤에" 코드를 추가할 수 있습니다.
AngularJS는 입력 유효성 검사를 지원합니다.
AngularJS 지시문은 ng라는 접두사가 붙은 HTML 속성입니다.
ng-init 지시문은 AngularJS 애플리케이션 변수를 초기화합니다.
HTML5는 data-로 시작하는 확장된(직접 만든) 속성을 허용합니다.
AngularJS 속성은 ng-로 시작하지만 data-ng-를 사용하여 페이지를 HTML5에 유효하게 만들 수 있습니다.
AngularJS 표현식은 이중 중괄호({{ 표현식 }}) 안에 작성됩니다.
AngularJS 표현식은 데이터를 HTML에 바인딩하는데, 이는 ng-bind 지시문과 유사합니다.
AngularJS는 표현식이 작성된 데이터를 "출력"합니다.
AngularJS 표현식은 JavaScript 표현식과 매우 유사합니다. 리터럴, 연산자 및 변수를 포함할 수 있습니다.
예제 {{ 5 + 5 }} 또는 {{ firstName + " " + lastName }}
AngularJS 표현식 및 JavaScript 표현식
JavaScript 표현식과 유사하게 AngularJS 표현식에는 문자, 연산자, 변수가 포함될 수 있습니다.
JavaScript 표현식과 달리 AngularJS 표현식은 HTML로 작성할 수 있습니다.
JavaScript 표현식과 달리 AngularJS 표현식은 조건부 판단, 루프 및 예외를 지원하지 않습니다.
JavaScript 표현식과 달리 AngularJS 표현식은 필터를 지원합니다.


AngularJS 지시문


AngularJS는 지시문이라는 새로운 속성으로 HTML을 확장합니다.
AngularJS는 내장 지시문을 통해 애플리케이션에 기능을 추가합니다.
AngularJS를 사용하면 지시어를 맞춤설정할 수 있습니다.
AngularJS 지시문은 ng- 접두사가 붙는 확장된 HTML 속성입니다.
ng-app 지시문은 AngularJS 애플리케이션을 초기화합니다. ng-app 지시문은

요소가 AngularJS 애플리케이션의 "소유자"임을 AngularJS에 알려줍니다.
ng-init 지시어는 애플리케이션 데이터를 초기화합니다.
ng-model 지시문은 요소 값(예: 입력 필드 값)을 애플리케이션에 바인딩합니다.


ng-app 지시문
ng-app 지시문은 AngularJS 애플리케이션의 루트 요소를 정의합니다.
ng-app 지시문은 웹 페이지가 로드될 때 애플리케이션을 자동으로 부팅(자동 초기화)합니다.
나중에 ng-app이 값(예: ng-app="myModule")을 통해 코드 모듈에 연결하는 방법을 배우게 됩니다.


ng-init 지시문
ng-init 지시문은 AngularJS 애플리케이션의 초기 값을 정의합니다.
일반적으로 ng-init는 사용되지 않습니다. 그 자리에 컨트롤러나 모듈을 사용하게 됩니다.


ng-model 지시문
ng-model 지시문 HTML 요소를 애플리케이션 데이터에 바인딩합니다.
ng-model 지시문은 애플리케이션 데이터를 HTML 컨트롤러(입력, 선택, 텍스트 영역) 값에 바인딩하는 데 사용됩니다.
ng-model 지시어는 다음을 수행할 수도 있습니다.
애플리케이션 데이터에 대한 유형 유효성 검사(번호, 이메일, 필수)를 제공합니다.
애플리케이션 데이터에 대한 상태(잘못됨, 더러움, 접촉됨, 오류)를 제공합니다.
HTML 요소에 대한 CSS 클래스를 제공합니다.
HTML 요소를 HTML 양식에 바인딩합니다.


ng-repeat 지시어
ng-repeat 지시어는 컬렉션(배열)의 각 항목에 대해 HTML 요소를 한 번씩 복제합니다.


사용자 지정 지시문 만들기
AngularJS에 내장된 지시문 외에도 사용자 지정 지시문을 만들 수도 있습니다.
.directive 함수를 사용하여 사용자 정의 지시어를 추가할 수 있습니다.
사용자 정의 명령을 호출하려면 사용자 정의 명령 이름을 HTML 요소에 추가해야 합니다.
camelCase를 사용하여 지시어 이름을 runoobDirective로 지정하지만 사용 시 runoob-directive로 구분해야 합니다.

제한된 사용
지시어가 특정 방식으로만 호출되도록 제한할 수 있습니다.
restrict 값은 다음과 같습니다.
E는 요소 이름으로 사용
A는 속성으로 사용
C는 클래스 이름으로 사용
M은 주석으로 사용
restrict 기본값은 E와 A입니다. 즉, 명령은 다음을 통해 호출될 수 있습니다. 요소 이름 및 속성 이름.


AngularJS 컨트롤러
AngularJS 애플리케이션은 컨트롤러에 의해 제어됩니다.
ng-controller 지시어는 애플리케이션 컨트롤러를 정의합니다.
컨트롤러는 표준 JavaScript 개체 생성자로 생성된 일반 JavaScript 개체입니다.


AngularJS 필터
AngularJS 필터는 데이터를 변환하는 데 사용할 수 있습니다.
Filter
Description
currency
숫자를 통화 형식으로 지정합니다.
필터
배열 항목에서 하위 집합을 선택합니다.
lowercase
문자열을 소문자로 포맷합니다.
orderBy
표현식을 기반으로 배열을 정렬합니다.
uppercase
문자열을 대문자로 포맷합니다.
필터는 파이프 문자(|)와 필터를 통해 표현식에 추가될 수 있습니다.


AngularJS Service(서비스)
AngularJS에서는 자체 서비스를 만들거나 내장된 서비스를 사용할 수 있습니다.


서비스란?
AngularJS에서 서비스는 AngularJS 애플리케이션에서 사용할 수 있는 함수 또는 개체입니다.
AngularJS에는 30개 이상의 서비스가 내장되어 있습니다.
현재 페이지의 URL 주소를 반환할 수 있는 $location 서비스가 있습니다.


$http는 원격 서버에서 데이터를 읽는 데 사용되는 AngularJS의 핵심 서비스입니다.


ng-repeat 지시어는 배열을 통해 HTML 코드를 반복하여 드롭다운 목록을 생성하지만 ng-options 지시어는 드롭다운 목록을 생성하는 데 더 적합하며 다음 장점:
NG 사용 -options는 옵션의 개체이고, ng-repeat는 문자열입니다.


ng-show 지시문은 HTML 요소를 숨기거나 표시합니다.
ng-disabled 지시어는 애플리케이션 데이터 "mySwitch"를 HTML의 비활성화 속성에 바인딩합니다.
ng-model 지시문은 "mySwitch"를 HTML 입력 확인란 요소의 콘텐츠(값)에 바인딩합니다.
mySwitch가 true이면 버튼이 비활성화됩니다.
ng-hide 지시어는 HTML 요소를 숨기거나 표시하는 데 사용됩니다.

ng-click 지시어는 AngularJS 클릭 이벤트를 정의합니다.

Hide HTML 요소
ng-hide 지시어는 애플리케이션 부분의 표시 여부를 설정하는 데 사용됩니다.
ng-hide="true" HTML 요소가 보이지 않도록 설정합니다.
ng-hide="false" HTML 요소가 표시되도록 설정합니다.

ng-show 지시문을 사용하여 애플리케이션의 일부를 표시할지 여부를 설정할 수 있습니다.
ng-show="false"는 HTML 요소가 보이지 않도록 설정할 수 있습니다.
ng-show="true"는 HTML 요소가 표시되도록 설정할 수 있습니다.


AngularJS 모듈

모듈은 애플리케이션을 정의합니다.
모듈은 애플리케이션의 다양한 부분을 담는 컨테이너입니다.
모듈은 애플리케이션 컨트롤러를 위한 컨테이너입니다.
컨트롤러는 일반적으로 모듈에 속합니다.


JavaScript에서는 전역 함수를 피해야 합니다. 다른 스크립트 파일로 쉽게 덮어쓸 수 있기 때문입니다.
AngularJS 모듈을 사용하면 이 문제를 방지하기 위해 이 모듈 아래에서 모든 기능의 범위를 지정할 수 있습니다.


HTML 컨트롤
다음 HTML 입력 요소를 HTML 컨트롤이라고 합니다.
input element
select element
button element
textarea 요소


AngularJS에서 선호하는 스타일 시트는 Twitter Bootstrap입니다. Twitter Bootstrap은 현재 가장 인기 있는 프런트 엔드 프레임워크입니다.

AngularJS Animation
AngularJS는 CSS와 함께 사용할 수 있는 애니메이션 효과를 제공합니다.
AngularJS에서 애니메이션을 사용하려면 angle-animate.min.js 라이브러리가 필요합니다.

ngAnimate 기능은 무엇인가요?
ngAnimate 모델은 클래스를 추가하거나 제거할 수 있습니다.
ngAnimate 모델은 HTML 요소에 애니메이션을 적용할 수 없지만 ngAnimate는 HTML 요소 숨기기 및 표시와 같은 이벤트를 모니터링합니다. 이벤트가 발생하면 ngAnimate는 미리 정의된 클래스를 사용하여 HTML 요소에 애니메이션을 적용합니다.
AngularJS 클래스 추가/제거 지침:
ng-show
ng-hide
ng-class
ng-view
ng-include#🎜 🎜# ng-repeat
ng-if
ng-switch
ng-show 및 ng-hide 지시문은 ng-hide 클래스의 값을 추가하거나 제거하는 데 사용됩니다.
다른 지침에서는 DOM에 들어갈 때 ng-enter 클래스를 추가하고 DOM을 제거할 때 ng-leave 속성이 추가됩니다.
HTML 요소의 위치가 변경되면 ng-repeat 지시어에 ng-move 클래스를 추가할 수도 있습니다.
또한 애니메이션이 완료된 후 HTML 요소의 클래스 컬렉션이 제거됩니다. 예: ng-hide 지시문은 다음 클래스를 추가합니다:
ng-animate
ng-hide-animate
ng-hide-add (요소가 숨겨진 경우)#🎜🎜 #ng-hide -remove(요소가 표시되는 경우)
ng-hide-add-active(요소가 숨겨지는 경우)
ng-hide-remove-active(요소가 표시되는 경우) 표시)


value
Value는 컨트롤러에 값을 전달하는 데 사용되는 간단한 자바스크립트 개체입니다(구성 단계):

#🎜🎜 #factory
factory는 반환 값에 대한 함수입니다. 서비스와 컨트롤러가 필요할 때 생성됩니다.
보통 우리는 값을 계산하거나 반환할 때 팩토리 함수를 사용합니다.


provider
AngularJS에서 공급자를 통해 서비스, 팩토리 등(구성 단계)을 만듭니다.
Provider는 값/서비스/공장을 반환하는 데 사용되는 팩토리 메서드 get()을 제공합니다.


constant
constant(상수)는 구성 단계에서 값을 전달하는 데 사용됩니다. 이 상수는 구성 단계에서는 사용할 수 없습니다.
mainApp.constant("configParam", "상수 값");


AngularJS 라우팅
AngularJS 라우팅을 사용하면 다양한 URL을 통해 다양한 콘텐츠에 액세스할 수 있습니다.
AngularJS를 통해 다중 뷰 단일 페이지 웹 애플리케이션(SPA)을 구현할 수 있습니다.
일반적으로 URL은 http://runoob.com/first/page 형식이지만 단일 페이지 웹 애플리케이션에서는 AngularJS가 # + 태그를 통해 구현됩니다.


AngularJS 모듈의 구성 기능은 라우팅 규칙을 구성하는 데 사용됩니다. configAPI를 사용하여 $routeProvider가 구성 기능에 삽입되도록 요청하고 $routeProvider.whenAPI를 사용하여 라우팅 규칙을 정의합니다.
$routeProvider는 모든 경로를 순서대로 정의하는 when(path,object) 및 else(object) 함수를 제공합니다. 이 함수에는 두 개의 매개변수가 포함되어 있습니다.
첫 번째 매개변수는 URL 또는 URL 일반 규칙입니다.
두 번째 매개변수는 라우팅 구성 개체입니다.

경로 설정 객체
AngularJS 라우팅은 다양한 템플릿을 통해서도 구현할 수 있습니다.
$routeProvider.when 함수의 첫 번째 매개변수는 URL 또는 URL 일반 규칙이고, 두 번째 매개변수는 라우팅 구성 개체입니다.


템플릿:
ng-view에 간단한 HTML 콘텐츠만 삽입해야 하는 경우 다음 매개변수를 사용하세요.
.when('/computers',{template:'This is the 컴퓨터 카테고리 페이지'})
templateUrl:
ng-view에 HTML 템플릿 파일만 삽입해야 하는 경우 다음 매개변수를 사용하세요:
$routeProvider.when('/computers', {
templateUrl: 'views/computers.html',
});


위 코드는 서버에서 views/computers.html 파일의 내용을 가져와서 ng-view에 삽입합니다.


컨트롤러:
함수, 문자열 또는 배열 유형, 새 범위를 생성하기 위해 현재 템플릿에서 실행되는 컨트롤러 함수입니다.


controllerAs:
string 유형, 컨트롤러의 별칭을 지정합니다.


redirectTo:
리디렉션된 주소입니다.


resolve:
현재 컨트롤러가 의존하는 다른 모듈을 지정합니다. ​

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

위 내용은 AngularJ를 배우는 방법? Anglejs 지식에 대한 가장 포괄적인 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!