AngularJS 시작 자습서(둘): AngularJS 템플릿
하나의 응용 코드 구조는 여러 가지가 있다.AngularJS 응용 프로그램에 대해 모델-시도-컨트롤러(MVC) 모드의 결합 코드와 관심사를 분리하는 것을 권장합니다.이 점을 감안하여, 우리는 AngularJS를 이용하여 우리의 응용 프로그램에 모델, 보기, 컨트롤러를 추가합니다.
작업 디렉토리를 재설정하려면:
git checkout -f step-2
우리의 앱에는 현재 세 대의 휴대전화를 포함하는 목록이 하나 있다.
1단계와 2단계 사이의 가장 중요한 차이는 아래에 열거되어 있다.너는 GitHub에 가서 완전한 차이를 볼 수 있다.
뷰 및 템플릿
AngularJS에서 뷰는 HTML** 템플릿**을 통해 모델이 렌더링된 후의 매핑입니다.즉, AngularJS는 모델이 변경될 때마다 결합점을 실시간으로 업데이트하여 뷰를 업데이트합니다.
예를 들어, 뷰 구성 요소는 AngularJS에서 다음 템플릿으로 구성됩니다.
...
{{phone.name}}
{{phone.snippet}}
우리는 방금 정적 인코딩된 휴대전화 목록을 바꿨다. 왜냐하면 여기는ngRepeat 지령과 두 개의 괄호로 싸인 AngularJS 표현식인 {{{phone.name}과 {{phone.snippet}을 사용하기 때문이다. 같은 효과를 얻을 수 있기 때문이다.
1.
2. 우리가 0단계에서 배운 바와 같이 아이폰에 싸여 있다.name 및 아이폰.snippet 주위의 괄호는 데이터 연결을 표시합니다.상수 계산과 달리, 이곳의 표현식은 실제적으로 우리가 응용한 데이터 모델 인용이며, 이것들은 우리가 PhoneListCtrl 컨트롤러에 모두 설정해 놓았다.
모델 및 컨트롤러
PhoneListCtrl 컨트롤러에서 데이터 모델을 초기화했다(이곳은 수조를 포함하는 함수일 뿐이고 수조에 저장된 대상은 휴대전화 데이터 목록이다).
app/js/controller.js:
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet."}
];
}
비록 컨트롤러가 아무런 컨트롤 역할을 하지 않는 것처럼 보이지만, 이것은 이곳에서 매우 중요한 역할을 한다.우리의 데이터 모델에 대한 언어 환경을 정함으로써 컨트롤러는 모델과 보기 사이의 데이터 연결을 허용한다.우리는 이렇게 표현층, 데이터와 논리 부품을 연결시켰다.
1. PhoneListCtrl - 컨트롤러 방법의 이름 (JS 파일 controllers.js에서) 은 탭에 있는ngController 명령의 값과 일치합니다.
2. 휴대전화의 데이터는 이때 우리 컨트롤러 함수에 주입된 작용역($scope)과 관련이 있다.응용 프로그램이 시작된 후에 하나의 루트 역할 영역이 만들어지고 컨트롤러의 역할 영역은 루트 역할 영역의 전형적인 후계자이다.이 컨트롤러의 역할 영역은 모든 태그 내부의 데이터를 연결하는 데 유효합니다.
AngularJS의 작용역 이론은 매우 중요하다. 하나의 작용역은 템플릿, 모델과 컨트롤러가 협동하여 작업하는 접착기로 볼 수 있다.AngularJS는 역할 영역을 사용하며 템플릿의 정보, 데이터 모델과 컨트롤러도 있습니다.이것들은 모델과 보기의 분리를 도울 수 있지만, 그들 둘은 확실히 동기화된다.모델에 대한 변경 사항은 뷰에 즉시 반영됩니다.뷰에서 변경한 내용은 즉시 모델에 표시됩니다.
AngularJS의 역할 영역을 더욱 깊이 이해하려면 AngularJS 역할 영역 문서를 참고하십시오.
테스트
AngularJS 방식은 개발 시 코드 테스트를 매우 간단하게 합니다.다음은 컨트롤러에 새로 추가된 단원 테스트를 살펴보겠습니다.
test/unit/controllersSpec.js:
describe('PhoneCat controllers', function() {
describe('PhoneListCtrl', function(){
it('should create "phones" model with 3 phones', function() {
var scope = {},
ctrl = new PhoneListCtrl(scope);
expect(scope.phones.length).toBe(3);
});
});
});
이 테스트는 우리의 휴대전화 그룹 안에 세 개의 기록이 있음을 검증했다.이 예는 AngularJS의 코드를 위한 단원 테스트를 만드는 것이 얼마나 쉬운지 보여 줍니다.테스트는 소프트웨어 개발에서 없어서는 안 될 부분이기 때문에 우리는 AngularJS에서 테스트를 쉽게 구축하여 개발자가 그것들을 많이 쓰도록 격려할 수 있다.
테스트를 쓸 때 AngularJS 개발자들은 Jasmine 행위 구동 개발 (BBD) 프레임워크의 문법을 사용하는 경향이 있다.비록 Angular JS가 당신에게 Jasmine을 사용하도록 강요하지는 않았지만, 우리는 강좌 안의 모든 테스트를 Jasmine로 작성했습니다.Jasmine의 공식 홈페이지나 Jasmine Wiki에서 관련 지식을 얻을 수 있습니다.
AngularJS 기반 프로젝트는 JsTestDriver를 사용하여 셀 테스트를 실행하도록 미리 구성되어 있습니다.
다음과 같이 테스트를 실행할 수 있습니다.
1. 단독 터미널에서angular-phonecat 디렉터리에 들어가서 실행합니다./scripts/test-server.sh로 테스트를 시작합니다(Windows 명령줄 아래에.\scripts\test-server.bat를 입력하여 스크립트를 실행하십시오. 뒤에 있는 스크립트 명령의 실행 방식은 유사합니다).2. 새 브라우저 창을 열고 이동http://localhost:9876 ; 3. "Capture this browser in strict mode"를 선택합니다.
이럴 때, 너는 너의 창문을 버리고 상관하지 않은 후에 이 일을 잊어버릴 수 있다.JsTestDriver는 스스로 테스트를 끝내고 결과를 터미널에 출력합니다.
4. 실행./scripts/test.sh 테스트를 진행합니다.
너는 다음과 유사한 결과를 보아야 한다.
Chrome: Runner reset.
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (2.00 ms)
Chrome 19.0.1084.36 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (2.00 ms)
예!테스트 통과!아니면...주의: 테스트를 실행한 후에 오류가 발생하면 브라우저를 닫고 터미널로 돌아가서 스크립트를 끄고 다시 한쪽으로 올라가십시오.
연습하다
index입니다.html에 다른 데이터 연결을 추가합니다.예를 들면 다음과 같습니다.
Total number of phones: {{phones.length}}
새로운 데이터 모델 속성을 만들고 템플릿에 연결합니다.예를 들면 다음과 같습니다.
$scope.hello = "Hello, World!"
브라우저를 업데이트해서 "Hello, World!"
교체기를 사용하여 간단한 테이블을 만듭니다.
row number
{{i}}
이제 데이터 모델 표현식 i를 1씩 증가시킵니다.
row number
{{i+1}}
toBe(3)를 toBe(4)로 바꾼 후 단원 테스트에 실패한 후 다시 한 번 뛰기로 결정합니다./scripts/test.sh 스크립트
총결산
너는 현재 모형, 보기, 컨트롤러가 분리된 동적 응용을 가지고 있으며, 수시로 테스트를 진행했다.이제 응용 프로그램에 전문 검색 기능을 추가하기 위해 3단계로 들어갈 수 있습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
