Angularjs 라우팅
단일 페이지 응용 프로그램의 경우 한 페이지에서 다른 페이지로 점프 할 수있는 것이 중요합니다. 응용 프로그램이 점점 더 복잡해짐에 따라 사용자가 사용하는 동안 보는 인터페이스를 관리하는 합리적인 방법이 필요합니다. AngularJS는 뷰를 레이아웃 및 템플릿보기로 나누고 사용자가 액세스 한 URL에 따라 해당보기를 표시합니다.
이 기사는 AngularJS 라우팅의 간단한 예를 제공하며 관련된 개념 중 일부를 언급합니다.
1. 레이아웃 페이지
견적 스크립트 :
<script src = "../ scripts/jquery-1.9.1.min.js"> </script> <script src = "../ scripts/angular.min.js"> </script> <script src = "../ scripts/angular-route.min.js"> </script>
페이지 레이아웃은 비교적 간단합니다.
<div> <ul> <li> <a href = "#page1"> Go Page 1 </a> </li> <li> <a href = "#page2"> Go Page 2 </a> </li> <li> <a href = "#기타"> 다른 페이지 </a> </li> </ul> </div> </div> </div> </href = "#기타".
NG-View는 Ngroute 모듈에서 제공하는 특수 지침으로 AngularJS에 템플릿을 렌더링 할 위치를 알려줍니다. 이 예에서는 아래 DIV에 렌더링하는 데 필요한 컨텐츠를 배치합니다. 위의 3 개의 A 링크는 각각 3 개의 뷰보기를 가리 킵니다.
2. 템플릿 페이지
Subpage_1.html 및 Subpage_2.html이라는 두 개의 템플릿 페이지를 만듭니다.
3. 라우팅 규칙 라우팅 구성
Angular.Module ( "myrouteApp", [ "ngroute"]) .config ([ '$ lourteprovider', function ($ lourteprovider) {$ lourteprovider .when ( "/page1", {templateUrl : "subpage_1.html"}). }). Otherwise (redirectto : "/"});응용 프로그램의 Ngroute 모듈을 종속성으로로드하십시오. 구성 기능을 사용하여 모듈 또는 응용 프로그램에서 경로를 정의하고 AngularJS가 제공 한 두 가지 방법을 사용하여 응용 프로그램의 경로를 정의하십시오.
templateUrl :
응용 프로그램은 TemplateUrl 속성에 의해 지정된 경로를 기반으로 XHR (또는 $ templatecache의 읽기)을 통해보기를 읽습니다. 이 템플릿을 찾아 읽을 수있는 경우 AngularJS는 NG-View 지시문을 사용하여 템플릿의 내용을 DOM 요소로 렌더링합니다.
리디렉션 :
Redirectto 속성의 값이 문자열 인 경우 경로는이 값으로 대체되고 대상 경로에 따라 라우팅 변경이 트리거됩니다. Redirectto 속성의 값이 함수 인 경우, 경로는 함수의 반환 값으로 대체 되며이 대상 경로에 따라 라우팅 변경이 트리거됩니다.
실행 결과
페이지 1을 클릭하십시오
페이지 2를 클릭하십시오
위의 각도 라우팅 경로 예제 코드는 내가 공유하는 모든 컨텐츠입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.