전제
먼저 페이지에 각도 및 각도 경로를 도입해야합니다. 각도 경로 전에 각도를 도입해야합니다.
<script src = "../../ bower_components/angular/angular.js"> </script>
<script src = "../../ bower_components/angular-route/angular-route.js"> </script>
이는 주로 Angular-Route.js가 Window.angular 매개 변수로 전달되어야 하며이 매개 변수는 Angular가로드 된 후에 만 나타나기 때문입니다.
(함수 (창, 각도, 정의되지 않은) { 'strict'; ... ngroutemodule.directive ( 'ngview', ngviewfactory); ...}) (창, 창, angular);공식 웹 사이트에서 다운로드하거나 Bower를 사용하여 설치할 수 있습니다.
설명하다
라우팅 기능은 Louteprovider Service 및 NG-View에 의해 구현됩니다. NG-View는 페이지 템플릿의 마운트 포인트를 제공하는 것과 같습니다. 점프를 위해 URL을 전환 할 때 NG-View의 위치에 다른 페이지 템플릿이 배치됩니다. 그런 다음 Routeprovider를 사용하여 경로 매핑을 구성합니다.
일반적으로 두 가지 방법이 있습니다.
언제 () : 경로 및 매개 변수를 구성합니다.
그렇지 않으면 : 다른 경로 점프를 구성하면 기본값으로 생각할 수 있습니다.
언제 :
컨트롤러 : 해당 경로의 컨트롤러 기능 또는 이름
ControlLeras : 컨트롤러에 별칭 이름을 제공하십시오
템플릿 : 경로에 해당하는 페이지 템플릿은 "<div> xxxx </div>"와 같은 ng-view에 나타납니다.
TemplateUrl : "src/xxx.html"과 같은 템플릿에 해당하는 경로
해결 :이 매개 변수는이 속성이 키 값 쌍 개체의 형태로 서비스 또는 값을 경로 관련 컨트롤러에 바인딩한다는 사실에 중점을 둡니다. 그런 다음 실행 결과 값 또는 해당 서비스 참조가 컨트롤러에 주입됩니다. Resolve가 약속 객체 인 경우 컨트롤러에 주입되기 전에 성공적으로 실행될 때까지 기다립니다. 현재 컨트롤러는 실행 결과가 해결 될 때까지 기다립니다.
자세한 예는 다음 예제를 참조하십시오.
리디렉션 : 주소를 리디렉션합니다
ReloadonSearch : 주소가 변경 될 때만 해당 템플릿이로드 될지 여부를 설정합니다. 검색이나 매개 변수는로드되지 않습니다.
CaseInsenSitiveMatch : 경로는 사례에 민감합니다
라우팅에 일반적으로 사용되는 몇 가지 이벤트가 있습니다.
$ lourchangestart :이 이벤트는 경로가 점프되기 전에 트리거됩니다.
$ lourtechangesuccess :이 이벤트는 경로 점프가 성공한 후에 트리거됩니다.
$ lourtechangeerror :이 이벤트는 경로 점프가 실패한 후에 해고됩니다.
사용
페이지에서 URL 점프 및 NG-View 태그에 버튼 링크를 작성하십시오.
<div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> 클릭 a </a> </a> </li> <li> <a href = "#/b"> 클릭 b </a> </li> </li> </ul> <ng-view> </ng-view> <!-<div-view> </div> </div-view> </li> </li> </li> </li> </li> </li> </li>
그중에서도 NG-View는 요소 또는 레이블 등으로 간주 될 수 있습니다.
JavaScript로 정의 해야하는 관련 구성
<script type = "text/javaScript"> angular.Module ( "myApp", [ "ngroute"]) .controller ( "acontroller", function ($ scope, $ route) {$ scope.hello = "hello, a!") .controller ( "myctrl", function ($ scope, $ location) {$ scope. $ on ( "$ viewContentLoaded", function () {console.log ( "ng-view 컨텐츠로드!");}); $ scope. Console.log ( "경로 변경 시작!"); }) .config (function ($ loureprovider, $ locationProvider) {$ lourteprovider .WHEN ( '/a', {templateUrl : 'A.Html', 컨트롤러 : 'acontroller'}). 지연 ($ q, $ quess) {var delains = $ q.defer (delay.resolve,}}; </스크립트>위의 코드에서 /B 경로의 해결은 지연 방법과 관련됩니다. 이 메소드는 약속 객체를 반환하고 3 초 후에 만 결과를 반환합니다. 따라서 B 페이지는 3 초 후에 성공적으로로드되지 않습니다.
두 개의 추가 HTML이 필요합니다.
A.html :
<div ng-controller = "acontroller"style = "높이 : 500px; 너비 : 100%; 배경색 : 녹색;"> {hello}} </div>
및 B.html :
<div ng-controller = "bcontroller"style = "높이 : 2500px; 너비 : 100%; 배경색 : 파란색;"> {hello}} </div>
이런 식으로, 경로 점프를 달성 할 수 있습니다.
모든 코드를 참조 할 수 있습니다.
<html ng-app = "myapp"> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <script src = "../../ bower_components/angular/angular.js"</script src = "../../ bower_components/angular-route/angular-route.js"> </script> <body> <div ng-controller = "myctrl"> <ul> <li> <a href = "#/a"> 클릭 a </a> </li> <li> <a href = "#/b </a> </a> </a> </a> </a> </a> </a> </a> </a> </a> </a"> <ng-view> </ng-view> <!-<div ng-view> </div>-> </div> <script type = "text/javaScript"> angular.Module ( "myApp", [ "ngroute"]) .controller ( "acontroller", function ($ scope) {hello.hell. " .controller ( "bcontroller", function ($ scope) {$ scope.hello = "hello, b!";}) .controller ( "myctrl", function ($ scope, $ location) {$ scope. $ on ( "$ viewContentLoaded", function () {console.log! "); $ scope. $ on ( "$ lourchAngestart", 함수 (이벤트, 다음, 현재) {//event.preventDefault (); }) .config (function ($ lourteprovider, $ locationProvider) {$ lourteprovider .WHEN ( '/a', {templateUrl : 'A.Html', 컨트롤러 : 'acontroller'}). 지연 ($ q, $ quess) {var delains = $ q.defer (delay.resolve,}}; </script> </body> </html>위는 Angularjs ng-route 라우팅 정보를 분류하는 정보입니다. 우리는 향후 관련 정보를 계속 추가 할 것입니다. 이 사이트를 지원 해주셔서 감사합니다!