Angularjs 라우팅
이 장에서는 AngularJS 라우팅을 소개합니다.
AngularJS 라우팅을 통해 다른 URL을 통해 다른 컨텐츠에 액세스 할 수 있습니다.
AngularJS는 멀티 뷰에 대한 단일 페이지 웹 응용 프로그램 (SPA)을 실현할 수 있습니다.
일반적으로 URL은 http://runoob.com/first/page이지만 단일 페이지 웹 응용 프로그램에서 AngularJS는 #+ 태그를 통해 구현됩니다.
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
위의 링크를 클릭하면 서버에 요청한 주소는 동일합니다 (http://runoob.com/). # 번호의 컨텐츠는 서버에 요청할 때 브라우저에서 무시되기 때문입니다. 따라서 클라이언트의 # 번호 다음에 컨텐츠의 기능을 구현해야합니다. AngularJS 라우팅은 다른 논리적 페이지를 구별하고 #+ 태그를 통해 해당 컨트롤러에 다른 페이지를 바인딩하는 데 도움이됩니다.
위의 그림에서는 두 개의 URL이 생성되어 있음을 알 수 있습니다 : /showorders 및 /addneworder. 각 URL에는 해당보기 및 컨트롤러가 있습니다.
다음으로 간단한 예를 살펴 보겠습니다.
<html> <head> <meta charset = "utf-8"> <title> angularjs 라우팅 예제-초보자 자습서 </title> </head> <body ng-app = 'RoutingDemoApp'> <h2> Angularjs 라우팅 응용 프로그램 </h2> <ul> <li> <a href = "#/"> </li> <li>>> href = "#/computers"> 컴퓨터 </a> </li> <li> <a href = "#/printers"> print </a> </a> </a> </li> <li> <a href = "#/blabla"> 기타 </a> </li> </ul> <div ng-view> <cript src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <script src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> Angular.Module ( 'RoutingDemoApp', [ 'ngroute']) .config ([ '$ lourteprovider', function ($ lourteprovider) {$ lourteprovider. { '/', {Template : '이것은 홈페이지'}) . ( '/printers', {template : '이것은 프린터 페이지'). </script> </body> </html>실행 결과 :
AngularJS 라우팅 응용 프로그램
예제 분석 :
1. 라우팅을 구현하는 JS 파일을로드하십시오 : Angular-Route.js.
2. 기본 응용 프로그램 모듈의 종속성 모듈로서 ngroute 모듈을 포함합니다.
Angular.Module ( 'RoutingDemoApp', [ 'ngroute'])))
3. ngview 지시문을 사용하십시오.
<div ng-view> </div>
이 DIV 내의 HTML 컨텐츠는 경로 변경에 따라 변경됩니다.
$ loureprovider 구성, Angularjs $ loureprovider는 라우팅 규칙을 정의하는 데 사용됩니다.
module.config ([ '$ lourteprovider', function ($ loureprovider) {$ lourteprovider .When ( '/', {템플릿 : '홈페이지'}). .Othrise ({redirectto : '/'});}]);AngularJS 모듈의 구성 기능은 라우팅 규칙을 구성하는 데 사용됩니다. configapi를 사용하여 $ loureprovider를 구성 함수에 주입하고 $ loureprovider.whenapi를 사용하여 라우팅 규칙을 정의하도록 요청합니다.
$ lourteprovider는 WHEN (Path, Object) 및 다른 (Object) 기능을 순서대로 정의하고 기능에는 두 가지 매개 변수가 포함되어 있습니다.
첫 번째 매개 변수는 URL 또는 URL 정규 규칙입니다.
두 번째 매개 변수는 라우팅 구성 객체입니다.
라우팅 설정 객체
AngularJS 라우팅은 다른 템플릿을 통해 구현 될 수도 있습니다.
$ loureprovider의 첫 번째 매개 변수는 기능이 URL 또는 URL 정규 규칙이고 두 번째 매개 변수는 라우팅 구성 객체입니다.
구성 객체 라우팅에 대한 구문 규칙은 다음과 같습니다.
$ lourteprovider.when (url, {template : string, templateUrl : 문자열, 컨트롤러 : 문자열, 함수 또는 배열, 컨트롤러 : String, RedirectTo : String, function, Resolve : Object <키, 함수>});매개 변수 설명 :
주형:
간단한 HTML 컨텐츠를 NG-View에 삽입 해야하는 경우이 매개 변수를 사용하십시오.
. 언제
templateUrl :
NG-View에 HTML 템플릿 파일을 삽입 해야하는 경우이 매개 변수를 사용하십시오.
$ loureprovider.when ( '/computers', {templateUrl : 'views/computers.html',});위의 코드는 서버에서 views/computers.html 파일 컨텐츠를 가져 와서 ng-view에 삽입합니다.
제어 장치:
함수, 문자열 또는 배열 유형, 현재 템플릿에서 실행 된 컨트롤러 기능은 새로운 범위를 생성합니다.
컨트롤 레라 :
문자열 유형, 컨트롤러의 별칭을 지정하십시오.
리디렉션 :
리디렉션의 주소.
해결하다:
현재 컨트롤러가 의존하는 다른 모듈을 지정합니다.
예
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> <Script> src = "http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"> </script> <script> <text/javaScript "> Angular.Module ( 'ngrouteexample', [ 'ngroute']). 컨트롤러 ( 'Homecontroller') $ route;}). 컨트롤러 ( 'Aboutcontroller', function ($ scope) {$ scope. $ route = $ route;}). config (function ($ lorteprovider) {$ lourteprovider. {templateUrl : 'embdedded.home.html', 'embecontroller :'emberturl : 'embedded.about.html', 컨트롤러 : 'AboutController'}). <script type = "text/ng-template"id = "embedded.about.html"> <h1> 정보 </h1> </script> <div> <div> <div id = "navigation"> <a href = "#/home"> home </a> <a href = "#/about"> </divg-view = "> </divg-view ="> </div> </body> </html>실행 결과 :
홈 아웃
집
위의 것은 AngularJS 라우팅에 대한 정보 모음입니다. AngularJS 프로그래밍을 도울 수있는 학생들이 있기를 바랍니다.