이 웹 페이지를 동적 기능을 제공 할 때입니다. AngularJS를 사용하십시오! 나중에 컨트롤러를 추가 할 테스트를 추가했습니다.
응용 프로그램에는 여러 유형의 코드 아키텍처가 있습니다. AngularJS 애플리케이션의 경우 MVC (Model-View-Controller) 모드를 사용하여 코드를 분리하고 별도의 문제를 해결하는 것이 좋습니다. 이를 염두에두고 AngularJS를 사용하여 애플리케이션에 일부 모델, 뷰 및 컨트롤러를 추가합니다.
작업 디렉토리를 재설정하십시오.
코드 사본은 다음과 같습니다.
GIT 체크 아웃 -F 단계 -2
우리 앱에는 이제 3 개의 전화 목록이 있습니다.
1 단계와 2 단계의 가장 중요한 차이점은 다음과 같습니다. 당신은 Github로 가서 완전한 차이를 볼 수 있습니다.
보기와 템플릿
AngularJS에서는 모델이 HTML ** 템플릿을 통해 렌더링 된 후에도 뷰가 매핑됩니다. 즉, 모델이 변경 되더라도 AngularJS는 정션 지점을 실시간으로 업데이트하고보기를 업데이트한다는 것을 의미합니다.
예를 들어,보기 구성 요소는 다음 템플릿을 사용하여 AngularJS에 의해 구축됩니다.
코드 사본은 다음과 같습니다.
<html ng-app>
<헤드>
...
<script src = "lib/angular/angular.js"> </script>
<script src = "js/controllers.js"> </script>
</head>
<body ng-controller = "phonelistctrl">
<ul>
<li ng-repeat = "전화로 전화">
{{phone.name}}
<p> {{phone.snippet}} </p>
</li>
</ul>
</body>
</html>
NGREPEAT 지시문과 곱슬 브레이스에 랩핑 된 두 개의 AngularJS 표현식을 사용하여 동일한 효과를 얻을 수 있기 때문에 정적으로 인코딩 된 휴대 전화 목록을 교체했습니다.
1. <li> 태그의 ng-repeat = "휴대 전화"명령문은 Angularjs iterator입니다. 이 반복자는 AngularJS에 첫 번째 <li> 태그를 템플릿으로 사용하여 목록의 각 전화기에 <li> 요소를 작성하도록 지시합니다.
2. 우리가 0 단계에서 배운 것처럼, 전화 주위에 곱슬 곱슬 머리를 감싸고있다. 이름과 전화. 상수 계산과 달리, 여기의 표현식은 실제로 우리가 적용한 데이터 모델 참조이며, PhonelistCtrl 컨트롤러에서이를 설정했습니다.
모델 및 컨트롤러
데이터 모델은 PhonelistCtrl 컨트롤러에서 초기화됩니다 (여기서는 배열이 포함 된 함수이며 배열에 저장된 개체는 모바일 데이터 목록입니다).
app/js/controller.js :
코드 사본은 다음과 같습니다.
함수 phonelistctrl ($ scope) {
$ scope.phones = [
{ "이름": "Nexus S",
"스 니펫": "Nexus S.와 함께 빠르게 빨라졌습니다."},
{ "이름": "Wi-Fi가있는 Motorola Xoom ™",
"스 니펫": "다음 세대, 차세대 태블릿"},
{ "이름": "Motorola Xoom ™",
"스 니펫": "다음 세대의 차세대 태블릿"}
];
}
컨트롤러가 매우 중요한 역할을하지는 않지만 여기서 중요한 역할을합니다. 데이터 모델의 맥락을 고려할 때 컨트롤러를 사용하면 모델과보기간에 데이터 바인딩을 설정할 수 있습니다. 이것이 우리가 프리젠 테이션 계층, 데이터 및 논리 구성 요소를 연결하는 방법입니다.
1. PhonElistCtrl- 컨트롤러 메소드 (JS 파일 컨트롤러에서)의 이름은 <body> 태그의 ngcontroller 지시문의 값과 일치합니다.
2. 휴대폰의 데이터는 이제 컨트롤러 기능에 주입 된 범위 ($ 스코프)와 관련이 있습니다. 응용 프로그램이 시작되면 루트 범위가 생성되고 컨트롤러 범위는 루트 범위의 일반적인 후속 자입니다. 이 컨트롤러의 범위는 모든 <body ng-controller = "phonelistctrl"> 태그 내의 데이터 바인딩에 유효합니다.
AngularJS의 범위 이론은 매우 중요합니다. 스코프는 템플릿, 모델 및 컨트롤러가 함께 작동 할 수있는 Bonder로 간주 될 수 있습니다. AngularJS는 스코프뿐만 아니라 템플릿에서 정보, 데이터 모델 및 컨트롤러를 사용합니다. 모델과보기를 분리하는 데 도움이 될 수 있지만 실제로 동기화됩니다! 모델에 대한 변경 사항은 즉시보기에 반영됩니다. 보기에 대한 변경 사항은 모델에 즉시 반영됩니다.
AngularJS 범위에 대한보다 심층적 인 이해는 AngularJS 범위 문서를 참조하십시오.
시험
"AngularJS 메소드"는 개발 중에 코드를 쉽게 테스트 할 수 있습니다. 컨트롤러에 새로 추가 된 다음 장치 테스트를 살펴 보겠습니다.
테스트/단위/Controllersspec.js :
코드 사본은 다음과 같습니다.
설명 ( 'phonecat 컨트롤러', function () {
설명 ( 'phonelistctrl', function () {
it ( '전화기 3 개로 "전화"모델을 작성해야합니다. function () {
var scope = {},
ctrl = 새로운 phonelistctrl (범위);
expling (scope.phones.length) .tobe (3);
});
});
});
이 테스트는 휴대폰 배열에 세 가지 레코드가 있는지 확인합니다 (당분간이 테스트 스크립트를 이해할 필요가 없습니다). 이 예제는 AngularJS 코드에 대한 단위 테스트를 만드는 것이 얼마나 쉬운 지 보여줍니다. 테스트는 소프트웨어 개발의 필수 부분이므로 AngularJS에서 테스트를 쉽게 구축하여 개발자가 더 많은 글을 쓰도록 장려 할 수 있습니다.
테스트를 작성할 때 AngularJS 개발자는 Jasmine 행동 중심 개발 (BBD) 프레임 워크에서 구문을 사용하는 경향이 있습니다. AngularJS는 Jasmine을 사용하도록 강요하지는 않지만 자습서에있는 모든 테스트는 Jasmine으로 작성됩니다. Jasmine의 공식 홈페이지 또는 Jasmine Wiki에 대한 관련 지식을 얻을 수 있습니다.
AngularJS 기반 프로젝트는 JStestdriver를 사용하여 단위 테스트를 실행하도록 미리 구성되어 있습니다.
다음과 같이 테스트를 실행할 수 있습니다.
1. 별도의 터미널에서 Angular-Phonecat 디렉토리를 입력하고 ./scripts/test-server.sh를 실행하여 테스트를 시작하려면 (Windows 명령 줄에 ./scripts/test-server.bat를 입력하고 스크립트 명령이 다음 방식으로 실행됩니다);
2. 새 브라우저 창을 열고 http : // localhost : 9876;
3. "이 브라우저를 엄격한 모드로 캡처하십시오"를 선택하십시오.
현재 창문을 내버려두고 잊을 수 있습니다. Jstestdriver는 테스트를 완료하고 결과를 터미널에 출력합니다.
4. 테스트하려면 ./scripts/test.sh를 실행합니다.
다음과 유사한 결과를 볼 수 있습니다.
코드 사본은 다음과 같습니다.
크롬 : 러너 리셋.
.
총 1 개의 테스트 (통과 : 1; 실패 : 0; 오류 : 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS : 1 개의 테스트 실행 (통과 : 1; 실패 : 0; 오류 0) (2.00 ms)
응! 시험이 통과되었습니다! 또는 아니요 ... 참고 : 테스트를 실행 한 후 오류가 발생하면 브라우저를 닫고 터미널로 돌아가 스크립트를 닫은 다음 위의 단계를 반복하십시오.
관행
index.html에 대해 다른 데이터 바인딩을 추가하십시오. 예를 들어:
코드 사본은 다음과 같습니다.
<p> 총 전화 수 : {{phones.length}} </p>
새 데이터 모델 속성을 작성하고 템플릿에 바인딩하십시오. 예를 들어:
코드 사본은 다음과 같습니다.
$ scope.hello = "안녕하세요, 세계!"
브라우저를 업데이트하고 "Hello, World!" 나타납니다
반복자로 간단한 테이블을 만듭니다.
코드 사본은 다음과 같습니다.
<테이블>
<tr> <th> 행 번호 </th> </tr>
<tr ng-repeat = "I in [0, 1, 2, 3, 4, 5, 6, 7]"> <td> {{i}} </td> </tr>
</테이블>
이제 데이터 모델 표현식의 I을 1로 증가시킵니다.
코드 사본은 다음과 같습니다.
<테이블>
<tr> <th> 행 번호 </th> </tr>
<tr ng-repeat = "[0, 1, 2, 3, 4, 5, 6, 7]에서 I in in in
</테이블>
Tobe (3)을 tobe (4)로 변경 한 다음 ./scripts/test.sh 스크립트를 다시 실행하십시오.
요약
이제 모델, 뷰, 컨트롤러 분리를 동적으로 응용 프로그램에 적용 할 수 있으며 항상 테스트하고 있습니다. 이제 3 단계로 이동하여 응용 프로그램에 전체 텍스트 검색 기능을 추가 할 수 있습니다.