AngularJS_AngularJS 아래의 URL에서 # 문자를 제거하는 방법-JS 튜토리얼-php.cn

AngularJS_AngularJS 아래의 URL에서 # 문자를 제거하는 방법

WBOY

풀어 주다： 2016-05-16 15:53:54

원래의

1027명이 탐색했습니다.

AngularJS는 기본적으로 # 기호를 사용하여 URL을 라우팅합니다.

예:

http://example.com/

http://example.com/#/about

http://example.com/#/contact

깨끗한 URL을 얻고 URL에서 해시 기호를 제거하는 것은 쉽습니다.

두 가지만 완료하세요.

$locationProvider 구성
상대 연결의 시작 경로를 설정합니다

$위치 서비스

Angular에서 $location 서비스는 주소 표시줄의 URL을 확인하고 애플리케이션을 변경하며, 그 반대의 경우도 마찬가지입니다.

$location 서비스와 제공되는 기능을 이해하려면 공식 Angular $location 문서를 읽어 보시기를 적극 권장합니다.

$locationProvider 및 html5Mode

$locationProvider 모듈을 사용하고 html5Mode를 true로 설정하겠습니다.

Angular 애플리케이션을 정의하고 경로를 구성할 때 이 작업을 수행합니다.

angular.module('scotchy', [])
  
 .config(function($routeProvider, $locationProvider) {
 
  $routeProvider
   .when('/', {
    templateUrl : 'partials/home.html',
    controller : mainController
   })
   .when('/about', {
    templateUrl : 'partials/about.html',
    controller : mainController
   })
   .when('/contact', {
    templateUrl : 'partials/contact.html',
    controller : mainController
   });
  
  // use the HTML5 History API
  $locationProvider.html5Mode(true);
 });

로그인 후 복사

HTML5 History API란 무엇인가요? 이는 스크립트를 사용하여 브라우저 기록을 조작하는 표준 방법입니다. 이를 통해 Angular는 페이지를 새로 고치지 않고도 경로와 페이지 URL을 변경할 수 있습니다. 여기에 꽤 유용한 HTML5 History API 기사가 있습니다.

상대 링크에 대한 설정

애플리케이션 전반에 걸쳐 상대 링크를 사용하려면 문서의

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 
 <base href="/">
</head>

로그인 후 복사

이를 구성하는 방법은 다양하며 HTML5Mode를 true로 설정하면 상대 링크가 자동으로 해결됩니다. 이는 항상 애플리케이션이 /my-base와 같이 다른 URL에 루트되어 있는 경우 사용합니다. 그것이 당신의 시작 경로입니다.

이전 브라우저에 대한 콜백

$location 서비스는 HTML5 검색 기록 API를 지원하지 않는 브라우저에 대해 hashbang 메소드를 자동으로 콜백합니다.

모든 일이 투명하게 이루어지며 이를 위해 별도의 구성을 수행할 필요가 없습니다.

Angular $location 문서에서 콜백 메서드와 작동 방식을 확인할 수 있습니다.

2015619153430123.jpg (567×311)
요약

이것은 Angular 앱에서 예쁜 URL을 얻고 해시 태그를 제거하는 간단한 방법입니다. 매우 깨끗하고 빠른 Angular 앱을 즐겨보세요!