최근에 동료는 학습 경로 및 템플릿 과정에서 몇 가지 문제를 겪었습니다. 그래서 오늘 나는 그녀를 위해 예를 썼고 AngularJS를 배우는 사람들과 공유했습니다.
말하자면, AngularJS 개발 프로젝트는 매우 흥미 진진하고 재미는 개발 모델로 코드를 더 명확하고 읽기 쉽고 간결하며 유지 관리하기 쉽게 만듭니다. 그러나 AngularJS를 사용하여 개발할 때 나에게 두통을주는 것, 즉 현재 프론트 엔드 프레임 워크는 jQuery에 더 중점을두고 있으며 많은 플러그인은 jQuery에 의존하며 Angululajs를위한 플러그인이 거의 없습니다 (Angularui를 제외한 다른 각도 플러그인을 알지 못합니다. 마스터를 안내 할 수 있습니다. 나와 공유 할 수 있습니다). 컨트롤러의 코드가 명확하고 혼란스럽지 않도록하기 위해 DOM이 컨트롤러에서 작동 할 수 없다고 규정하므로 DOM 요소를 작동해야 할 때마다 완료하는 지침이 있으므로 존재합니다. 많은 jQuery 플러그인은 작동하려면 지침으로 변환해야합니다. 이는 매우 역겨운 것입니다. 먼 길이있는 것 같아 ~~
목차 :
1. AngularJS 라우팅 소개
2. AngularJS 라우팅 인스턴스
3. AngularJS는 WebServer 리디렉션과 결합하여 HTML5 모드 라우팅을 사용하여 라우팅 주소를 단순화합니다.
1. AngularJS 라우팅 소개
AngularJS 라우팅은 백엔드 MVC 라우팅과 다릅니다. AngularJS 프론트 엔드 라우팅은 템플릿 페이지에서 지정된 (NG-APP)에 대한 라우팅 규칙 (RouteProvider)을 정의 한 다음 다른 URL을 통해로드하도록 (NG-APP)를 알리고 (NG-APP)보기 (NG-APP)보기 (NG-View)로 렌더링해야합니다. MVC 라우팅은 다른 URL 요청을 통해 컨트롤러의 조치를 요청한 다음 라우팅 규칙에 따라보기를 반환하는 것입니다. AngularJS는 순수한 프론트 엔드 경로입니다. 나중에 구성 파일을 결합하여 라우팅 주소를 단순화합니다.
2. AngularJS 라우팅 인스턴스
우리는 새 JS 파일을 만듭니다. 여기에서 app.js를 지명하고 파일에 다음 코드를 작성합니다.
1 Angular.Module ( "app", [2 'ngroute'3]) 4 .config ([ '$ lourteprovider', function ($ lourteprovider) {5 $ lourteprovider.when ( "/list", {6 템플릿 : "이것은 목록 페이지"7}). 리디렉션 : "/list"12}) 13}]))
새 HTML 파일을 만들고 It Index.html 이름을 작성합니다. 코드 및 설명은 다음과 같습니다.
1 <! doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml"ng-app = "app"> 3 <Head> 4 <Title> </title> 5 </head> 6 <Body> 7 <Header> 8 <H2> 헤드 </header> 10 </h Header> 10 </h2> ng-view> </div> 12 </div> 13 <Futer> 14 <H3> 이것은 바닥입니다 </h3> 15 </bofer> 16 </body> 17 </html> 18 <script src = "/scripts/angular/angular.min.js"> </script> 19 <19 < src = "/scripts/angular-route/angular-route.min.js"> </script> 20 <script src = "/scripts/app.js"> </script>
예제를 실행하면 효과는 다음과 같습니다.
브라우저의 입력 주소를여십시오 : http : // localhost : 2987/index.html#/http : // localhost : 2987/index.html#/목록이 각각 그림에 표시된 페이지를 볼 수 있습니다.
3. AngularJS는 WebServer와 결합하여 HTML5 모드 라우팅을 사용하여 라우팅 주소를 단순화합니다.
위의 그림에서, 우리는 요청 주소가 매우 길다는 것을 알 수 있습니다. 강박 장애가있는 사람이 이러한 유형의 주소를 받아들이는 것은 어렵 기 때문에 그러한 변화를 결정하기로 결정했습니다.
1) Angulajs는 HTML5 모드 라우팅을 활성화하고 # 번호를 제거합니다.
angulajs의 경우 기본값은 HTML5 라우팅 모드가 켜지지 않는다는 것입니다. 다음 방법에 따라 HTML5 라우팅 모드를 활성화합니다.
1 Angular.Module ( "app", [2 'ngroute'3]) 4 .config ([ '$ lorteprovider', '$ locationProvider', function ($ lourteprovider, $ locationProvider) {5 // html5 열기 모드 6 $ locationProvider.html5mode (true) 7 $ trousprovider. 목록 페이지 "9}). 언제 ("/detailplate ", {10 템플릿 :"이것은 세부 사항 페이지입니다 "11}) 12. OTHERWISE ({13 REDIRECTTO :"/404.html"14}) 15}))).
이러한 방식으로 위의 요청 주소에 따라 # 번호를 제거한 후 페이지가 새로 고쳐졌습니다. 프롬프트 404는 페이지를 찾을 수 없었습니다. 그 이유는 이러한 주소가 배경 II에 요청되면 해당 파일을 찾을 수 없으므로 404 오류 페이지가 직접 반환되기 때문입니다. 따라서 구성 파일에 웹 서버 구성을 추가하고 다음과 같이 파일을 리디렉션해야합니다.
1 <system.webserver> 2 <rewrite> 3 <rult> 4 <규칙 이름 = "name"> 5 <match url = "^list | list | list | list | list*"ingorecase = "true"/> 6 <조건 logicalGrouping = "matchall"> 7 <add input = "{request_filename}"matcerType = "isfile" 입력 = "{request_filename}"matchtype = "isdirectory"endecate = "true"/> 9 </조건> 10 <action type = "rewrite"url = "/index.html"/> 11 </rule> 12 </rulat> 13 </system.webserver>
위의 코드에 표시된 것처럼 <match url = "^list | reveral*"isgorecase = "true"/>는 요청 주소에 목록 또는 세부 사항이 포함 된 경우 (요구 사항에 따라 정규 표현식 자체를 쓰면) index.html 페이지로 리디렉션됩니다. 페이지에 http : // localhost : 2987/세부 사항을 입력하면 먼저 템플릿 페이지 (index.html)로 돌아온 다음 angulajs 경로가 실행되기 시작합니다.
브라우저에 http : // localhost : 2987/세부 사항을 입력하고 우리가 원하는 결과를 얻지 못한다는 것을 알았습니다. 즉, 경로가 일치하지 않았습니다.
온라인으로 오랫동안 검색 한 후 마침내 솔루션을 찾았습니다.이 솔루션은 다음과 같이 html 페이지에 <base> 태그를 추가하는 것입니다.
1 <! doctype html> 2 <html xmlns = "http://www.w3.org/1999/xhtml"ng-app = "app"> 3 <head> 4 <title> </title> 5 <base href = "/> 6 </head> 7 7 <body> 8 <Header> 9 <h2 <h2 this this the the the the the the the the the the </header> 11 <condent> 12 <div ng-view> </div> 13 </content> 14 <Fuxer> 15 <H3> 이것은 바닥입니다 </h3> 16 </풋러> 17 </body> 18 </html> 19 <스크립트 src = "/scripts/angular/angular.min.js"> 20 < src = "/scripts/angular-route/angular-route.min.js"> </script> 21 <script src = "/scripts/app.js"> </script>
이런 식으로 다음과 같이 입력하십시오. 스크린 샷은 다음과 같습니다.
레거시 질문 : <base href = " /" /> 태그를 추가하여 왜 성공할 수 있습니까? 이 질문에 대해 모든 블로거에게 물어보고 싶습니다.
위의 콘텐츠에 문제가 있으면 불평하십시오! ! !
위의 내용은 AngularJS 라우팅 및 템플릿 예제 및 라우팅 주소 단순화 방법 (필수)의 전체 내용입니다. 모두가 wulin.com을 더 지원하기를 바랍니다