이 단계에서는 레이아웃 템플릿을 만들고 라우팅 기능을 통해 여러 뷰가있는 응용 프로그램을 작성하는 방법을 배우게됩니다.
작업 디렉토리를 재설정하십시오.
GIT 체크 아웃 -F Step -7
이제 App/Index.html로 이동하면 App/Index.html#/휴대 전화로 리디렉션되며 동일한 전화 목록이 브라우저에 표시됩니다. 모바일 링크를 클릭하면 휴대폰 세부 정보 목록도 표시됩니다.
6 단계와 7 단계의 가장 중요한 차이점은 다음과 같습니다. Github의 완전히 차이를 볼 수 있습니다.
멀티 뷰, 라우팅 및 레이아웃 템플릿
우리의 응용 프로그램은 천천히 발전하고 복잡해지고 있습니다. 7 단계 이전에 응용 프로그램은 사용자에게 간단한 인터페이스 (모든 전화 목록) 만 제공하며 모든 템플릿 코드는 index.html 파일에 있습니다. 다음 단계는 목록에 각 전화의 세부 정보를 표시하는 페이지를 추가하는 것입니다.
세부 사항보기를 추가하기 위해 index.html을 확장하여 두 뷰의 템플릿 코드를 동시에 포함시킬 수 있지만 빠르게 큰 문제를 일으킬 수 있습니다. 대신 index.html 템플릿을 "레이아웃 템플릿"으로 변환해야합니다. 이것은 우리가 모든 뷰를 적용 할 수있는 일반적인 템플릿입니다. 그런 다음 다른 "로컬 레이아웃 템플릿"은 현재 "라우팅"에 따라 채워져 사용자에게 표시 할 완전한보기를 형성합니다.
AngularJS에 적용되는 경로는 $ RouteRovider를 통해 선언되며, 이는 $ Route Service의 제공 업체입니다. 이 서비스를 통해 컨트롤러, 템플릿보기 및 현재 브라우저의 URL을 쉽게 통합 할 수 있습니다. 이 기능을 적용하면 깊은 링크를 구현하여 브라우저 기록 (후퇴 또는 전방 탐색) 및 북마크를 사용할 수 있습니다.
의존성 주입 (DI), 인젝터 및 서비스 제공 업체 정보
이전 기사에서 배운 것처럼 의존성 주입은 AngularJS의 핵심 특징 이므로이 사람의 작동 방식에 대해 조금 알아야합니다.
애플리케이션 부츠의 경우 AngularJS는 인젝터를 생성하며, 이는 응용 프로그램 후 주입 된 모든 서비스가 필요합니다. 이 인젝터 자체는 $ http 및 $ 경로가 무엇을하는지 알지 못합니다. 실제로, 모듈 정의 중에 구성되지 않는 한, 이러한 서비스의 존재를 전혀 알지 못합니다. 인젝터의 유일한 책임은 지정된 서비스 모듈을로드하고,이 모듈에 정의 된 모든 서비스 제공 업체를 등록하고, 필요할 때 지정된 기능에 종속성 (서비스)을 주입하는 것입니다. 이러한 종속성은 제공자 "Lazy"(필요한 경우로드)에 의해 인스턴스화됩니다.
공급자는 서비스 인스턴스를 제공 (생성)하고 외부로 API 인터페이스를 제공하는 객체입니다. 서비스의 생성 및 런타임 동작을 제어하는 데 사용할 수 있습니다. $ Route Service의 경우 $ loureprovider는 외부 세계에 API 인터페이스를 제공하여 API 인터페이스를 통해 응용 프로그램의 라우팅 규칙을 정의 할 수 있습니다.
AngularJS 모듈은 응용 프로그램에서 글로벌 상태를 제거하고 인젝터를 구성하는 방법을 제공하는 두 가지 문제를 해결합니다. amd 또는 require.js (AngularJS가 아닌 두 라이브러리)와 달리 AngularJS 모듈은 스크립트로드 순서 및 게으른 스크립트 로딩 문제를 해결하려고 시도하지 않습니다. 이러한 목표는 AngularJS가 해결 해야하는 문제와 관련이 없으므로 이러한 모듈은 각각의 목표를 달성하기 위해 공존 할 수 있습니다.
앱 모듈
app/js/app.js
Angular.Module ( 'phonecat', []). config ([ '$ lourteprovider', function ($ loreprovider) {$ lourteprovider. when ( '/phones', {templateUrl : 'partials/phone-list.html', 컨트롤러 : phonelistctrl}). phonedetailctrl}).응용 프로그램의 라우팅을 구성하려면 응용 프로그램 용 모듈을 만들어야합니다. 우리는이 모듈을 phonecat이라고 호출하고 configapi를 사용하여 $ loureprovider를 구성 함수에 주입하고 $ loureprovider를 사용하여 라우팅 규칙을 정의하도록 요청합니다.
인젝터 구성 단계에서 제공자는 동시에 주입 할 수 있지만 인젝터가 생성되고 서비스 인스턴스가 시작되면 외부 세계에서 더 이상 검색되지 않습니다.
우리의 라우팅 규칙은 다음과 같이 정의됩니다
URL 맵 세그먼트가 /휴대 전화 인 경우 휴대폰 목록보기가 표시됩니다. 이보기를 구축하기 위해 AngularJS는 Phone-list.html 템플릿과 phonelistctrl 컨트롤러를 사용합니다.
URL 맵 세그먼트가 /phone /: phoneid 인 경우 전화 세부 사항보기가 표시됩니다. 여기 : PhoneInd는 URL의 가변 부분입니다. 전화의 자세한보기를 구축하기 위해 AngularJS는 Phone-Detail.html 템플릿과 PhoneDetailCtrl 컨트롤러를 사용합니다.
이전에 만든 PhonelistCtrl 컨트롤러를 재사용하고 동시에 전화의 자세한보기에 새 PhoneDetailCtrl 컨트롤러를 추가하여 App/JS/Controllers.js 파일에 저장합니다.
$ route.otherwise ({redirectto : ' /phones'}) 명령문은 브라우저 주소가 우리의 라우팅 규칙과 일치 할 수 없을 때 /전화로 리디렉션이 트리거됩니다.
두 번째 경로 선언에서 : PhoneID 매개 변수 사용. $ Route Service는 라우팅 선언 /전화 /: PhoneId를 현재 URL과 일치하는 템플릿으로 사용합니다. 기호 (여기서 변수는 휴대폰입니다)로 선언 된 모든 변수는 $ louteparams 객체에 추출되어 저장됩니다.
응용 프로그램이 새로 생성 된 모듈을 안내하려면 NGAPP 지시문 값에 대한 모듈 이름도 지정해야합니다.
app/index.html
<! docType html> <html lang = "en"ng-app = "phonecat"> ...
제어 장치
app/js/controllers.js
... 함수 phoneDetailctrl ($ scope, $ loureparams) {$ scope.phoneid = $ loureparams.phoneid;} // phonedetailctrl. $ inject = [ '$ scope', '$ loureparams'];주형
$ 경로 서비스는 일반적으로 NGView 지시문과 함께 사용됩니다. NGView 지시문의 역할은 해당 뷰 템플릿을 현재 경로의 레이아웃 템플릿에로드하는 것입니다.
app/index.html
<html lang = "en"ng-app = "phonecat"> <head> ... <script src = "lib/angular/angular.js"> </script> <script src = "js/app.js"> </script> <script src = "js/controllers.js"> </head> </head> </head> ng-view> </div> </body> </html>
Index.html 템플릿에서 대부분의 코드를 제거했으며 NG-View 속성이있는 <Div> 컨테이너 만 배치했습니다. 삭제 한 코드는 이제 Phone-list.html 템플릿에 배치됩니다.
앱/부분/phone-list.html
<div> <div> <div> <!-사이드 바 컨텐츠-> 검색 : <입력 ng-model = "query"> sort by : <orderprop "> <옵션 value ="name "> alphabetical </옵션> <옵션 값 ="age "> wept </옵션> </select> </div> <!-<ul> <li n-repeat ="interpate = "in in intoptes =" 필터 : Query |. Orderby : orderprop "> <a href ="#/phones/{{폰 .id}} "> <img ng-src ="{{폰 .imageurl}} "> </a> <a href ="#/phones/{{phone.id}} "> {phone.name}} <p> {{phone.snippet}} </p> </li> </ul> </div> </div> </div>동시에 휴대 전화 세부 사항보기에 자리 표시 자 템플릿을 추가합니다.
앱/부분/phone-detail.html
tbd : {{phoneid}}에 대한 세부 사항보기
우리의 레이아웃 템플릿은 phonelistctrl 또는 phonedetailctrl 컨트롤러 속성을 추가하지 않았습니다!
시험
모든 것이 잘 통합되어 있는지 자동으로 확인하려면 엔드 투 엔드 테스트를 작성하고 다른 URL로 이동하며 올바른보기가 렌더링되는지 확인해야합니다.
... ( 'index.html로 index.html#/phones', function () {browser (). navigateTo ( '../../ app/index.html'); excome (browser (). 위치 (). url ()). tobe ( '/phones'); ... 브라우저 (). NavigateTo ( '../../ app/index.html/nexus-s');이제 브라우저를 새로 고치고 엔드 투 엔드 테스트를 다시 실행하거나 AngularJS 서버에서 실행할 수 있습니다.
관행
index.html에 {{orderprop}} 바인딩을 추가하고 휴대 전화 목록에있을 때는 변경되지 않습니다. OrderProp 모델은 <div ng-view> 요소와 관련된 phonelistctrl 관리 범위에서만 볼 수 있기 때문입니다. Phone-list.html 템플릿에 동일한 바인딩을 추가하면 상상했듯이 바인딩이 렌더링됩니다.
요약
경로를 설정하고 휴대폰 목록보기를 구현 한 후 이미 8 단계로 진행하여 휴대 전화 세부 사항보기를 구현할 수 있습니다.
위의 내용은 AngularJS 라우팅 및 다중 뷰 정보를 정리하는 것이며 향후 관련 지식을 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!