AngularJS에서 HTML5 모드 활성화
Muhammad Adil
2023년1월30일
이 기사에서는 AngularJS 애플리케이션에서 딥 링크를 사용하여 HTML5 모드를 활성화하는 방법을 안내합니다.
AngularJS에서 HTML5 모드 사용
$locationProvider.html5Mode는 이전 HTTP 프로토콜 대신 URL에 HTML5 모드를 사용해야 함을 브라우저에 알리는 방법입니다. 이를 통해 브라우저는 이전 브라우저에서 지원되지 않는 pushState와 같은 기능을 사용할 수 있습니다.
또한 이전 모델에 비해 몇 가지 장점이 있기 때문에 AngularJS 애플리케이션에 사용해야 합니다.
$locationProvider.html5Mode를 통해 개발자는 URL 탐색 및 브라우저 내 애플리케이션의 URL 처리를 위한 강력하고 안정적인 솔루션을 제공하는 URL 탐색 및 기록 관리를 위해 HTML5의 기록 API를 사용할 수 있습니다.- 디버그하기가 더 쉽고 Chrome 개발자 도구 내에서 모든 URL을 검사할 수 있습니다.
- 특히 페이지 사이를 이동할 때 더 나은 성능을 제공합니다.
- 사용자에게 북마크 가능한 경험을 제공하고 링크 공유, 딥 링크 등과 같은 기능을 활성화합니다.
AngularJS에서 HTML5 모드를 활성화하는 단계
다음 단계는 html5Mode용 AngularJS 애플리케이션을 설정하는 방법을 보여줍니다.
-
애플리케이션 모듈에
ngHref라이브러리를 포함합니다. -
$locationProvider()함수를 재정의하고html5Mode를 true로 설정하는 새 서비스 공급자를 만듭니다. 이 속성을 false로 설정하면html5Mode가 비활성화되고 기본 브라우저의 위치 처리가 사용됩니다.
타입스크립트 코드:
var app = angular.module('Deo', ['ui.router']);
app.controller('Sample', function($scope, $state) {
$scope.name = 'demo';
});
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$stateProvider
.state('Home', {
url: '/Home',
template: '<h3>Home tab is active</h3>',
})
.state('About', {
url: '/About',
template: '<h3>About tab is active</h3>'
})
;
})
HTML 코드:
<!DOCTYPE html>
<html ng-app="Deo">
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
<script data-require="ui-router@*" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script>
<script src="app.component.js"></script>
</head>
<body ng-controller="Sample">
<h2>Example of Angular html5Mode</h2>
{{state.current.name}}<br>
<ul>
<li><a ui-sref="Home">Home</a>
<li><a ui-sref="About">About</a>
</ul>
<div ui-view=""></div>
</body>
</html>
여기를 클릭 위 코드의 라이브 데모를 확인하십시오.
작가: Muhammad Adil
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook