AngularJS 라우팅을 통해 다른 URL을 통해 다른 컨텐츠에 액세스 할 수 있습니다.
AngularJS는 멀티 뷰에 대한 단일 페이지 웹 응용 프로그램 (SPA)을 실현할 수 있습니다.
일반적으로 URL은 http://runoob.com/first/page 이지만 단일 페이지에서 웹 응용 프로그램 AngularJS는 #+ 태그를 통해 구현됩니다.
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
먼저 $ loureprovider의 구성 객체 속성 메소드를 살펴 보겠습니다.
라우팅 설정 객체 해상도 :
$ lourteprovider.hen (url (라우팅 이름), {템플릿 : 문자열 (템플릿 프롬프트 문자열), 템플릿 url : 문자열 (템플릿 경로 URL), 컨트롤러 : 문자열, 함수 또는 배열 (현재 템플릿에서 컨트롤러 생성 및 새 $ 스코프 스코프 생성), String (Controller Alias), string, function (retirect : retnount) 경로는)});라우팅을 구현하기위한 일반적인 단계 :
1 단계 : Ngroute 모듈을 가져옵니다
<script type = "text/javaScript"src = "js/angular-route.min.js"> </script>
2 단계 : 응용 프로그램 모듈에서 ngroute를 사용하십시오
Angular.Module ( "RouteApp", [ "ngroute"]))
3 단계 : NG-View 명령을 사용하십시오
<div ng-view ng-controller = 'defaultCtrl'> </div>
4 단계 : $ loureprovider 라우팅 규칙을 구성하십시오
.... config ([ '$ loureprovider', function ($ loureprovider) {$ lourteprovider .when ( '/home', {templateUrl : 'home.tpl.html', 컨트롤러 : 'homectrl',}). '폰 .html',}).5 단계 : 하이퍼 링크를 통한 라우팅 사용
<ul> <li> <a href = "#/home"> home </a> </li> <li> <a href = "#/computer"> computer </a> </li> <li> <a href = "#/phone"> mobile </a> </li> <li> <a href = "#/other"</a> </li> </li>
완전한 사례 :
1 Route.html 페이지
<html> <head> <meta charset = "utf-8"> <title> angularjs 라우팅 인스턴스 </title> <link rel = "스타일 시트"유형 = "text/css"href = "css/bootstrap.min.css"> </head> <body ng-appp = 'louteapp'> <li> <a <a href = "#/home"> home </a> </a> </li> <li> <a href = "#/computer"> computer </a> </a> <li> <a href = "#/phone"> mobile </a> </a> <li> <a href = "#/other </a> </li> </ul> ng-controller = 'defaultctrl'> </div> <script type = "text/javaScript"src = "js/jquery.min.js"> </script> <script type = "text/javascript"src = "js/bootstrap.min.js"> src = "js/angular.min.js"> </script> <script type = "text/javaScript"src = "js/angular-route.min.js"> </script> <script type = "text/ng-template"id = "home.tpl.html"> 유형 = "text/ng-template"id = "other.tpl.html"> <h1> {{data}} </h1> </script> <script type = "text/javaScript"> Angular.Module ( "RouteApp", [ "ngroute"]) .config ([ '$ lorteprovider', function ($ lorteprover ', . 'Other.tpl.html', 컨트롤러 : 'OtherCtrl',})}))) .controller ( 'defaultCtrl', function ($ scope) {$ scope.computers = [{id : 0, name : "acr", "테스트", 가격 : 1.25}, {id : 1, "Lenovo", "테스트 :" ID : 2, "Apple", 카테고리 : "테스트", 가격 : 4.25}]; }]; e.) </html>2. Computer.html 페이지
<div> <table> <thead> <tr> <th> 이름 </th> <th> 카테고리 </th> <th> 가격 </th> <th> {{data}} </th> </tread> <tbody> <ttr ng-repeat = "Computers in Computers "> <td> {item.name}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}}} </td> <td> <버튼 ng-click = "deleteproduct (item)"> delete </button> <a href = "/edit/{{item.id}}"ng-click = "editerCreateProduct (ite </a> </a> <버튼 ng click ="incrementprise </tbody> </table> <div> <버튼 ng-click = "editorCreateProduct ()"> 추가 </a> </div> </div>3.phone.html 페이지
<div> <table> <thead> <tr> <th> 이름 </th> <th> 카테고리 </th> <th> price </th> <th> {{data}} </th> </tread> <tbody> <ttr ng-repeat = "phones in phones"> <td> {item.name}} </td> <td> {{item.category}} </td> <td> {{item.price | Currency}}} </td> <td> <버튼 ng-click = "deleteproduct (item)"> delete </button> <a href = "/edit/{{item.id}}"ng-click = "editerCreateProduct (ite </a> </a> <버튼 ng click ="incrementprise </tbody> </table> <div> <버튼 ng-click = "editorCreateProduct ()"> 추가 </a> </div> </div>홈페이지를 클릭하십시오
"컴퓨터"를 클릭하십시오.
"모바일"클릭
기타 클릭하십시오
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.