Angularjs는 무엇입니까?
AngularJS는 동적 웹 응용 프로그램을 위해 설계된 구조 프레임 워크입니다. HTML을 템플릿 언어로 사용할 수 있으며 HTML 구문을 확장하면 응용 프로그램 구성 요소를보다 명확하고 간결하게 구축 할 수 있습니다. 그것의 혁신은 데이터 바인딩 및 종속성 주입을 사용하여 많은 코드를 작성할 필요가 없다는 것입니다. 이들 모두는 브라우저 측 JavaScript를 통해 구현되며 모든 서버 측 기술과 완벽하게 결합됩니다.
AngularJS는 구축 응용 분야에서 HTML의 단점을 극복하도록 설계되었습니다. HTML은 정적 텍스트 디스플레이를 위해 설계된 좋은 선언적 언어이지만 웹 응용 프로그램을 구축하려면 약합니다. 그래서 나는 브라우저가 내가 원하는 일을하도록하는 일을했습니다 (약간의 속임수라고 생각할 수도 있습니다). 형식화
일반적으로 우리는 다음 기술을 사용하여 동적 응용 프로그램을 구축 할 때 정적 웹 기술의 단점을 해결합니다.
1. 클래스 라이브러리 - 클래스 라이브러리는 웹 응용 프로그램을 작성하는 데 도움이되는 기능 모음입니다. 당신을 이끄는 것은 당신의 코드이며, 클래스 라이브러리를 언제 사용 해야하는지 결정하는 것은 당신에게 달려 있습니다. 클래스 라이브러리에는 다음이 포함됩니다. jQuery 등
2. 프레임 워크 - 프레임 워크는 특별하고 구현 된 웹 애플리케이션이며 특정 비즈니스 논리 만 작성하면됩니다. 프레임 워크는 여기서 주요한 역할을하며 특정 응용 프로그램 논리를 기반으로 코드를 호출합니다. 프레임에는 다음이 포함됩니다 : 녹아웃, 콩나물 등
AngularJS는 다른 접근법을 사용하여 응용 프로그램을 구축 할 때 HTML 자체의 단점을 보충하려고합니다. AngularJS를 사용하면 브라우저가 식별자라고하는 구조를 사용하여 새로운 구문을 인식 할 수 있습니다. 예를 들어:
1. 데이터 바인딩에 이중 버팀대를 사용하십시오 {{}} 구문;
2. DOM 제어 구조를 사용하여 DOM 단편을 반복하거나 숨기십시오.
3. 지원 양식 및 양식 검증;
4. 논리 코드를 관련 DOM 요소와 연결할 수 있어야합니다.
5. HTML을 재사용 가능한 구성 요소로 나눌 수 있습니다.
엔드 투 엔드 솔루션
AngularJS는 웹 응용 프로그램에서 엔드 투 엔드 솔루션이 되려고 노력하고 있습니다. 이는 웹 응용 프로그램의 작은 부분 일뿐 만 아니라 완전한 엔드 투 엔드 솔루션임을 의미합니다. 이렇게하면 CRUD가있는 응용 프로그램을 작성할 때 angularjs가 "고집"으로 보일 것입니다 (Create Add, Query Respieve, 업데이트 업데이트, 삭제 삭제) (원본 텍스트는 의견이 많음을 의미합니다. 그러나 "고집"에도 불구하고 여전히 "고집"이 응용 프로그램 구축의 시작점에 있으며 여전히 유연하게 변할 수 있음을 보장합니다. AngularJS의 뛰어난 기능 중 일부는 다음과 같습니다.
1. CRUD 애플리케이션을 구축하는 데 사용할 수있는 모든 가능한 내용에는 데이터 바인딩, 기본 템플릿 식별자, 양식 검증, 라우팅, 깊은 연결, 구성 요소 재사용 및 종속성 주입이 포함됩니다.
2. 테스트 측면에는 단위 테스트, 엔드 투 엔드 테스트, 시뮬레이션 및 자동 테스트 프레임 워크가 포함됩니다.
3. 디렉토리 레이아웃 및 테스트 스크립트가있는 종자 응용 프로그램.
Angularjs의 귀여움
AngularJS는 개발자에게 더 높은 수준의 추상화를 제시하여 응용 프로그램 개발을 단순화합니다. 다른 추상 기술과 마찬가지로, 이것은 또한 약간의 유연성을 잃습니다. 다시 말해, 모든 응용 프로그램이 AngularJS와 함께 사용하기에 적합한 것은 아닙니다. AngularJS는 주로 건물 CRUD 응용 프로그램을 고려합니다. 다행히 웹 응용 프로그램의 90% 이상이 CRUD 응용 프로그램입니다. 그러나 AngularJS로 건축에 적합한 것을 이해하려면 AngularJS로 건축하기에 적합한 것을 이해해야합니다.
게임 및 그래픽 인터페이스 편집기와 같은 DOM 작업이 빈번하고 복잡한 응용 프로그램은 CRUD 응용 프로그램과 매우 다릅니다. 그들은 AngularJS로 건축하는 데 적합하지 않습니다. 이와 같은 jQuery와 같은 더 가볍고 간단한 기술을 사용하는 것이 좋습니다.
간단한 AngularJS 인스턴스
아래는 양식을 포함하는 일반적인 CRUD 응용 프로그램입니다. 양식 값은 먼저 확인 된 다음 로컬 스타일로 형식화되는 총 값을 계산하는 데 사용됩니다. 개발자를위한 몇 가지 일반적인 개념은 다음과 같습니다. 먼저 이해해야합니다.
1. 데이터 모델 (데이터 모델)을 View (UI)에 연결합니다.
2. 사용자 입력을 쓰고 읽고 검증하십시오.
3. 모델을 기반으로 새로운 값을 계산합니다.
4. 출력 형식을 현지화하십시오.
index.html :
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app>
<헤드>
<script src = "http://code.angularjs.org/angular-1.1.0.min.js"> </script>
<script src = "script.js"> </script>
</head>
<body>
<div ng-controller = "invoicecntl">
<b> 송장 : </b>
<br>
<br>
<테이블>
<tr> <td> 수량 </td> <td> 비용 </td> </tr>
<tr>
<td> <입력 유형 = "정수"min = "0"ng-model = "Qty"필수> </td>
<td> <입력 유형 = "번호"ng-model = "Cost"필수> </td>
</tr>
</테이블>
<HR>
<b> 총 : </b> {{Qty * cost | 통화}}
</div>
</body>
</html>
script.js :
코드 사본은 다음과 같습니다.
함수 invoicecntl ($ scope) {
$ scope.qty = 1;
$ scope.cost = 19.95;
}
엔드 투 엔드 테스트 :
코드 사본은 다음과 같습니다.
it ( '각도 결합을 보여 주어야한다', function () {
기대 (바인딩 ( 'Qty * cost')). Toequal ( '$ 19.95');
입력 ( 'Qty'). enth ( '2');
입력 ( '비용'). 입력 ( '5.00');
기대 (바인딩 ( 'Qty * cost')). Toequal ( '$ 10.00');
});
함수 invoicecntl ($ scope) {$ scope.qty = 1; $ scope.cost = 19.95;}
실행 효과 :
코드 사본은 다음과 같습니다.
송장:
수량 비용
총 : {{Qty * 비용 | 통화}}
위의 예를 시도 하고이 예제가 어떻게 작동하는지 살펴 보겠습니다. ``태그에서, 우리는`ng-app` 식별자를 사용하여 이것이 AngularJS 응용 프로그램임을 나타냅니다. 이`ng-app` 식별자는 AngularJ **가 응용 프로그램을 자동으로 초기화하게합니다. ``태그를 사용하여 AngularJS 스크립트를로드합니다 : <script src = "http://code.angularjs.org/angular-1.1.1.0.min.js">
<input> 태그로 ng- 모델 속성을 설정함으로써 AngularJS는 데이터를 양방향으로 자동 바인딩합니다. 또한 간단한 데이터 확인을 동시에 수행했습니다.
코드 사본은 다음과 같습니다.
수량 : <입력 유형 = "정수"min = "0"ng-model = "Qty"필수>
비용 : <입력 유형 = "숫자"ng-model = "비용"필수>
이 입력 상자의 위젯은 평범한 것처럼 보이지만 다음 점을 인식하면 평범하지 않습니다.
1. 페이지가로드되면 AngularJS는 위젯에서 선언 된 모델 이름 (수량, 비용)에 따라 동일한 이름의 변수를 생성합니다. 이러한 변수를 MVC 설계 패턴에서 M (모델)으로 생각할 수 있습니다.
2. 위의 위젯의 입력에는 특수 능력이 있습니다. 데이터를 입력하지 않거나 입력 데이터가 유효하지 않은 경우이 입력 입력 상자는 자동으로 빨간색으로 변합니다. 입력 상자 의이 새로운 기능을 사용하면 개발자가 CRUD 애플리케이션에서 공통 필드 검증 기능을보다 쉽게 구현할 수 있습니다.
마지막으로, 우리는 신비한 더블 브레이스를 볼 수 있습니다.
코드 사본은 다음과 같습니다.
총 : {{Qty * 비용 | 통화}}
이 {{expression}} 태그는 AngularJS 데이터 바인딩입니다. 표현식은 표현식과 필터 ({{expression | filter}})의 조합 일 수 있습니다. AngularJS는 입력 및 출력 데이터를 형식화 할 수있는 필터를 제공합니다.
위의 예에서 {{{}}의 표현식은 AngularJS에 입력 상자에서 얻은 데이터를 곱한 다음 곱셈 결과를 현지 통화 스타일로 포맷 한 다음 페이지로 출력하도록 요청합니다.
우리는 AngularJS 방법을 호출하거나 프레임 워크 사용과 같은 특정 논리를 작성하지 않지만 위의 기능을 완료했습니다. 이 구현 뒤에는 브라우저가 정적 페이지를 생성하기 위해 이전보다 더 많은 작업을 수행하여 동적 웹 응용 프로그램의 요구를 충족시킬 수 있습니다. AngularJS는 동적 웹 응용 프로그램에 대한 개발 임계 값을 클래스 라이브러리 나 프레임 워크가 필요하지 않은 지점까지 낮 춥니 다.
Angularjs의 "Zen Tao (개념)"
Angular는 Views (UIS) 및 소프트웨어 논리를 작성할 때 선언 코드가 명령 코드보다 훨씬 우수 할 것이라고 생각하지만, 필수 코드는 비즈니스 논리를 표현하는 데 매우 적합하다고 생각합니다.
1. DOM 운영 및 응용 프로그램 논리를 분리하는 것은 매우 좋은 아이디어이며, 이는 코드의 조정 가능성을 크게 향상시킬 수 있습니다.
2. 테스트와 개발을 똑같이 치료하는 것은 매우 좋은 생각입니다. 테스트의 어려움은 코드의 구조에 크게 의존합니다.
3. 클라이언트와 서버 측을 분리하는 것은 특히 좋은 관행입니다. 양측이 병렬로 발달하고 양쪽을 재사용 할 수있게 할 수 있습니다.
4. 프레임 워크가 전체 개발 프로세스 전체에서 개발자를 안내 할 수 있다면 : UI 설계, 비즈니스 논리 작성 및 테스트에서 개발자에게 큰 도움이 될 것입니다.
5. "단지를 단순화로 단순화하고 0으로 단순화하는 것이 좋습니다".
Angularjs는 다음 악몽에서 벗어날 수 있습니다.
1. 콜백 사용 : 콜백을 사용하면 코드의 가독성을 방해하고 코드를 단편화하며 원래 비즈니스 로직을보기가 어렵습니다. 콜백과 같은 공통 코드를 제거하는 것이 좋습니다. JavaScript 언어의 설계로 인해 작성 해야하는 코드를 크게 줄이면 응용 프로그램의 논리를보다 명확하게 볼 수 있습니다.
2. DOM 요소 작동에 대한 코드를 수동으로 작성합니다. DOM 운영은 Ajax 응용 프로그램의 매우 기본적인 부분이지만 항상 "번거로운"및 오류가 발생합니다. 선언적 방식으로 설명 된 UI 인터페이스는 응용 프로그램 상태 변경에 따라 변경 될 수 있으므로 저수준 DOM 운영 코드를 작성할 수 없습니다. AngularJS로 작성된 대부분의 응용 프로그램에서 개발자는 더 이상 DOM을 스스로 작동하는 코드를 작성할 필요가 없지만 원하는 경우에도 여전히 작성할 수 있습니다.
3. UI 인터페이스에 대한 데이터를 읽고 쓰기 : AJAX 응용 프로그램의 대부분은 CRUD 작업입니다. 전형적인 프로세스는 서버 데이터를 내부 객체로 형성 한 다음 객체를 HTML 양식으로 컴파일 한 다음 사용자가 양식을 수정 한 다음 양식을 확인하는 것입니다. 오류가 있으면 오류가 표시된 다음 데이터를 내부 개체로 재구성하여 서버로 반환합니다. 이 프로세스에서 반복 할 코드가 너무 많아서 코드가 특정 비즈니스 논리 및 비즈니스 세부 사항보다는 응용 프로그램의 전체 실행 프로세스를 항상 설명하는 것처럼 보입니다.
4. 시작하기 전에 많은 기본 코드를 작성해야합니다. 일반적으로 "Hello World"응용 프로그램을 구현하려면 많은 기본 코드를 작성해야합니다. AngularJS를 사용하면 응용 프로그램 작성을 쉽게 시작할 수있는 일부 서비스를 제공하며 이러한 서비스는 Guice와 같은 종속성 주입 스타일 의존성 주입 의존성 주입으로 응용 프로그램에 자동으로 추가되므로 응용 프로그램의 특정 개발을 신속하게 입력 할 수 있습니다. 특히 사실은 자동 테스트의 초기화 프로세스를 완전히 파악할 수 있다는 것입니다.