AngularJS 시작하기 튜토리얼(2): AngularJS Template_AngularJS

이제 이러한 웹페이지에 동적 기능을 제공할 때입니다. AngularJS를 사용하세요! 나중에 추가될 컨트롤러에 대한 테스트를 여기에 추가했습니다.

애플리케이션에는 다양한 유형의 코드 구조가 있습니다. AngularJS 애플리케이션의 경우 MVC(Model-View-Controller) 패턴을 사용하여 코드를 분리하고 문제를 분리하는 것이 좋습니다. 이를 염두에 두고 AngularJS를 사용하여 일부 모델, 뷰 및 컨트롤러를 애플리케이션에 추가합니다.

작업 디렉토리를 재설정하세요:

코드 복사 코드는 다음과 같습니다.

git checkout -f 2단계

이제 우리 앱에는 세 개의 휴대폰 목록이 있습니다.

1단계와 2단계의 가장 중요한 차이점은 다음과 같습니다. GitHub로 이동하여 전체 차이점을 확인할 수 있습니다.

뷰 및 템플릿

AngularJS에서 뷰는 HTML 템플릿을 통해 렌더링된 모델의 매핑입니다. 이는 모델이 변경될 때마다 AngularJS가 실시간으로 조인 포인트를 업데이트하고 그에 따라 뷰를 업데이트한다는 것을 의미합니다.

예를 들어 뷰 구성 요소는 다음 템플릿을 사용하여 AngularJS에서 구축됩니다.

코드 복사 코드는 다음과 같습니다.

...


머리>

• 
  {{전화번호.이름}}
  

  {{phone.snippet}}

  
  

본문>

정적으로 인코딩된 전화 목록을 대체했습니다. 여기서는 ngRepeat 지시문과 중괄호로 묶인 두 개의 AngularJS 표현식({{phone.name}} 및 {{phone.snippet}})을 사용하기 때문에 동일한 효과를 얻을 수 있습니다. .

1.

태그의 ng-repeat="phone inphones" 문은 AngularJS 반복자입니다. 이 반복자는 AngularJS에 첫 번째

태그를 템플릿으로 사용하여 목록의 각 전화기에 대한

요소를 생성하도록 지시합니다.

2. 0단계에서 배웠듯이,phone.name과phone.snippet을 둘러싼 중괄호는 데이터 바인딩을 식별합니다. 상수 계산과 달리 여기의 표현식은 실제로 PhoneListCtrl 컨트롤러에 설정한 애플리케이션의 데이터 모델 참조입니다.

모델 및 컨트롤러

데이터 모델은 PhoneListCtrl 컨트롤러에서 초기화됩니다(이것은 배열을 포함하는 함수일 뿐이며 배열에 저장된 개체는 휴대폰 데이터 목록입니다).

app/js/controller.js:

코드 복사 코드는 다음과 같습니다.

함수 PhoneListCtrl($scope) {
$scope.phones = [
{"이름": "Nexus S",
"snippet": "Nexus S를 사용하면 속도가 빨라졌습니다."},
{"name": "Wi-Fi 지원 Motorola XOOM™",
"snippet": "차세대, 차세대 태블릿."},
{"이름": "MOTOROLA XOOM™",
"snippet": "차세대, 차세대 태블릿."}
];
}

컨트롤러는 제어하는 ​​역할은 아닌 것 같지만 여기서는 매우 중요한 역할을 합니다. 컨트롤러를 사용하면 데이터 모델의 컨텍스트를 제공하여 모델과 뷰 간의 데이터 바인딩을 설정할 수 있습니다. 이것이 프레젠테이션 레이어, 데이터 및 논리적 구성 요소를 연결하는 방법입니다.

1.PhoneListCtrl - JS 파일 Controllers.js에 있는 컨트롤러 메서드의 이름은

태그의 ngController 지시어 값과 일치합니다.

2. 이제 휴대폰의 데이터가 컨트롤러 기능에 주입된 범위($scope)와 연결됩니다. 애플리케이션이 시작되면 루트 범위가 생성되고 컨트롤러 범위는 루트 범위의 일반적인 후속 범위입니다. 이 컨트롤러의 범위는

태그 내부의 모든 데이터 바인딩에 유효합니다.

AngularJS의 범위 이론은 매우 중요합니다. 범위는 템플릿, 모델 및 컨트롤러가 함께 작동하도록 하는 접착제로 간주될 수 있습니다. AngularJS는 템플릿, 데이터 모델 및 컨트롤러의 정보와 함께 범위를 사용합니다. 이는 모델과 뷰를 분리하는 데 도움이 될 수 있지만 둘은 실제로 동기화됩니다! 모델에 대한 모든 변경 사항은 뷰에 즉시 반영됩니다. 뷰에 대한 모든 변경 사항은 모델에 즉시 반영됩니다.

AngularJS 범위에 대한 더 자세한 내용은 AngularJS 범위 문서를 참조하세요.

테스트

"AngularJS 방식"을 사용하면 개발 중 코드 테스트가 매우 간단해집니다. 컨트롤러에 대해 다음과 같이 새로 추가된 단위 테스트를 살펴보겠습니다.

테스트/유닛/controllerSpec.js:

코드 복사 코드는 다음과 같습니다.

explain('PhoneCat 컨트롤러', function() {

explain('PhoneListCtrl', function(){

it('전화기 3개로 "전화기" 모델을 만들어야 합니다.', function() {
var 범위 = {},
ctrl = new PhoneListCtrl(범위);

Expect(scope.phones.length).toBe(3);
});
});
});

이 테스트는 휴대폰 배열에 3개의 레코드가 있는지 확인합니다(아직 이 테스트 스크립트를 알아낼 필요가 없음). 이 예에서는 AngularJS 코드에 대한 단위 테스트를 만드는 것이 얼마나 쉬운지 보여줍니다. 테스트는 소프트웨어 개발의 필수적인 부분이므로 AngularJS에서 테스트를 쉽게 구축하여 개발자가 더 많은 테스트를 작성하도록 장려합니다.

테스트를 작성할 때 AngularJS 개발자는 Jasmine Behavior-Driven Development(BBD) 프레임워크의 구문을 사용하는 경향이 있습니다. AngularJS는 Jasmine 사용을 강요하지 않지만 튜토리얼의 모든 테스트는 Jasmine을 사용하여 작성되었습니다. 자스민 공식 홈페이지나 자스민 위키에서 관련 지식을 얻으실 수 있습니다.

AngularJS 기반 프로젝트는 JsTestDriver를 사용하여 단위 테스트를 실행하도록 사전 구성되어 있습니다.

다음과 같이 테스트를 실행할 수 있습니다.

1. 별도의 터미널에서angular-phonecat 디렉토리를 입력하고 ./scripts/test-server.sh를 실행하여 테스트를 시작합니다. (스크립트를 실행하려면 Windows 명령줄에 .scriptstest-server.bat를 입력하세요. 그 뒤에 스크립트 명령이 비슷한 방식으로 실행됩니다.
2. 새 브라우저 창을 열고 http://localhost:9876으로 이동합니다.
3. "엄격 모드에서 이 브라우저 캡처"를 선택합니다.

이때에는 창을 옆으로 치워두고 잊어버리셔도 됩니다. JsTestDriver는 자체적으로 테스트를 실행하고 결과를 터미널에 출력합니다.

4. ./scripts/test.sh를 실행하여 테스트합니다.

다음과 유사한 결과가 표시됩니다.

코드 복사 코드는 다음과 같습니다.

Chrome: 러너 재설정.
.
총 1개의 테스트(통과: 1; 실패: 0; 오류: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: 1개 테스트 실행(통과: 1, 실패: 0, 오류 0)(2.00ms)

응! 테스트 통과! 아니면... 참고: 테스트를 실행한 후 오류가 발생하면 브라우저를 닫고 터미널로 돌아가서 스크립트를 닫은 후 위의 단계를 다시 시도하십시오.

연습

index.html에 대한 또 다른 데이터 바인딩을 추가합니다. 예:

코드 복사 코드는 다음과 같습니다.

총 휴대전화 수: {{phones.length}}

새 데이터 모델 속성을 만들고 이를 템플릿에 바인딩합니다. 예:

코드 복사 코드는 다음과 같습니다.

$scope.hello = "안녕하세요, 세계!"

브라우저를 업데이트하여 "Hello, World!"가 표시되는지 확인하세요.

반복자가 있는 간단한 테이블 만들기:

코드 복사 코드는 다음과 같습니다.

행 번호
{{i}}
테이블>

이제 데이터 모델 표현식을 1씩 증가시키겠습니다.

코드 복사 코드는 다음과 같습니다.

행 번호
{{i 1}}
테이블>

toBe(3)을 toBe(4)로 변경한 후 단위 테스트가 실패했는지 확인한 후 ./scripts/test.sh 스크립트를 다시 실행하세요

요약

이제 언제든지 테스트할 수 있는 별도의 모델, 뷰 및 컨트롤러가 포함된 동적 애플리케이션이 생겼습니다. 이제 3단계로 진행하여 애플리케이션에 전체 텍스트 검색 기능을 추가할 수 있습니다.