IT story

해시 '#'이없는 AngularJS 라우팅

hot-time 2020. 4. 21. 08:23

해시 '#'이없는 AngularJS 라우팅

나는 AngularJS를 배우고 있으며 실제로 나를 귀찮게하는 것이 있습니다.

$routeProvider내 응용 프로그램에 대한 라우팅 규칙을 선언 하는 데 사용 합니다.

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

하지만 브라우저에서 내 앱으로 이동하면 app/#/test대신에 표시 됩니다 app/test.

그래서 내 질문은 AngularJS 가이 해시 #를 URL에 추가하는 이유는 무엇 입니까? 피할 가능성이 있습니까?

실제로 HTML5가 아닌 브라우저에는 # (해시 태그)가 필요합니다.

그렇지 않으면 언급 된 href에서 서버에 대한 HTTP 호출을 수행합니다. #은 요청을 발생시키지 않는 오래된 브라우저 단락으로 많은 js 프레임 워크가 자체 클라이언트 측 경로 재 지정을 구축 할 수 있습니다.

당신은 사용 $locationProvider.html5Mode(true)가능한 경우 HTML5 전략을 사용하는 각도 말할 수 있습니다.

HTML5 전략을 지원하는 브라우저 목록은 다음과 같습니다. http://caniuse.com/#feat=history

다른 사람들이 말한 것처럼 html5mode를 활성화 한 경우 .htaccess다음 내용으로 파일을 만듭니다 (필요에 따라 조정).

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

사용자는 적절한 경로를 입력하면 앱으로 연결되며, 앱은 경로를 읽고 경로 내에 올바른 "페이지"로 가져옵니다.

편집 : 파일이나 디렉토리 이름이 경로와 충돌하지 않도록하십시오.

간단하고 짧은 답변을 쓸 수 있습니다

라우터 끝에 끝에 html5Mode (true) 추가하십시오 .

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

HTML 헤드에서 기본 태그 추가

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

위 답변에 대한 자세한 내용은 @plus에게 감사드립니다.

시험

$locationProvider.html5Mode(true)

$ location을 사용하는 $ locationProvider에 대한 추가 정보

다음 정보가 제공됩니다 :
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

깔끔한 URL을 얻고 Angular의 URL에서 해시 태그를 제거하는 것은 매우 쉽습니다.
기본적으로 AngularJS는 해시 태그로 URL을 라우팅합니다 (예 :

수행해야 할 두 가지가 있습니다.

$ locationProvider 구성
상대 링크를위한 기반 설정
$ location 서비스

Angular에서 $ location 서비스는 주소 표시 줄에서 URL을 구문 분석하고 응용 프로그램을 변경하거나 그 반대로 변경합니다.

나는 위치 서비스와 그것이 제공하는 것에 대해 느끼기 위해 공식 Angular $ location 문서를 읽는 것이 좋습니다.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider 및 html5Mode

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

Angular 응용 프로그램을 정의하고 경로를 구성 할 때이 작업을 수행합니다.

angular.module('noHash', [])

.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 히스토리 API 란 무엇입니까? 스크립트를 사용하여 브라우저 기록을 조작하는 표준화 된 방법입니다. 그러면 Angular는 페이지를 새로 고치지 않고 페이지의 라우팅 및 URL을 변경할 수 있습니다. 이에 대한 자세한 내용은 다음 HTML5 History API 기사를 참조하십시오.

http://diveintohtml5.info/history.html

상대 링크 설정

상대 링크를 사용하여 응용 프로그램 주위를 링크하려면 문서 <base>에서 를 설정 <head>해야합니다. Angular 앱의 루트 index.html 파일에있을 수 있습니다. <base>태그를 찾아서 앱에 대해 원하는 루트 URL로 설정하십시오.

예를 들면 다음과 같습니다. <base href="/">

이를 구성하는 다른 많은 방법이 있으며 HTML5 모드를 true로 설정하면 상대 링크가 자동으로 해결됩니다. 응용 프로그램의 루트가 URL과 다른 경우 (예 : / my-base)이를 기본으로 사용하십시오.

이전 브라우저를위한 대체

$ location 서비스는 HTML5 History API를 지원하지 않는 브라우저의 경우 자동으로 hashbang 메소드로 대체됩니다.
이것은 투명하게 발생하며 작동하도록 아무것도 구성 할 필요가 없습니다. Angular $ location 문서에서 대체 방법과 작동 방식을 볼 수 있습니다.

결론적으로

이것은 예쁜 URL을 얻고 Angular 응용 프로그램에서 해시 태그를 제거하는 간단한 방법입니다. 매우 깨끗하고 빠른 앵귤러 앱을 만들어보십시오!

Apache와 함께 Angular를 제공하는 OS X 10.8에서 로컬로 이것을 구성하려면 .htaccess 파일 도움말에서 다음을 찾을 수 있습니다.

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

옵션 + FollowSymlinks를 설정하지 않으면 다음과 같이 로그에 금지 된 오류가 발생할 수 있습니다.

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

다시 쓰기 기본이 필요합니다. 그렇지 않으면 호스트를 특별히 구성하지 않은 경우 요청이 프로젝트 루트가 아닌 로컬 서버 로컬로 요청이 해결되므로 요청이 프로젝트 루트 디렉토리를 찾을 수 있도록 경로를 설정해야합니다. 예를 들어 내 컴퓨터에는 모든 프로젝트를 유지하는 / Users / me / Sites 디렉토리가 있습니다. 이전 OS X 설정처럼.

다음 두 줄은 경로가 디렉토리 또는 파일이 아닌지 효과적으로 말하므로 앱 경로 경로와 동일한 파일이나 디렉토리가 없는지 확인해야합니다.

다음 조건은 요청이 파일 확장자로 끝나지 않는 경우에 필요한 것을 추가합니다.

마지막으로 [L]은 index.html 파일 (다른 모든 요청에 대한 앱)을 제공한다고 말하고 있습니다.

여전히 문제가 있으면 아파치 로그를 확인하면 유용한 힌트를 얻을 수 있습니다.

/private/var/log/apache2/error_log

HTML5 모드를 사용하려면 서버 측에서 URL을 다시 작성해야합니다. 기본적으로 모든 링크를 응용 프로그램의 진입 점 (예 : index.html)에 다시 작성해야합니다. <base>이 경우에는 AngularJS가 응용 프로그램 기반 URL 부분과 응용 프로그램에서 처리해야하는 경로를 구분할 수 있으므로 태그가 필요합니다 . 자세한 내용은 AngularJS 개발자 안내서-$ location HTML5 모드 서버 측 사용을 참조하십시오 .

방법 : html5Mode와 작동하도록 서버 구성 ¹

html5Mode를 사용 설정하면 해당 #문자가 더 이상 URL에 사용되지 않습니다. 이 #기호는 서버 측 구성이 필요하지 않기 때문에 유용합니다. 이 없으면 #URL이 훨씬 멋지게 보이지만 서버 측 다시 쓰기도 필요합니다. 여기 예시들이 있습니다 :

아파치 다시 작성

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx 재 작성

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS 다시 쓰기

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
        </conditions>
        <action type="Rewrite" url="/" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

빠른 다시 쓰기

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

Angular 6에서는 라우터와 함께 다음을 사용할 수 있습니다.

RouterModule.forRoot(routes, { useHash: false })

아래 코드를 사용하여 기본 페이지 (홈)로 리디렉션 할 수도 있습니다.

{ path: '', redirectTo: 'home', pathMatch: 'full'}

위와 같이 리디렉션을 지정한 후 다른 페이지를 리디렉션 할 수 있습니다 (예 :

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

Angular에서는 HTML 5 스타일 (PathLocationStrategy)을 위치 전략으로 사용하는 것이 좋습니다.

** 때문에

사용자가 이해하고 기억하기 쉬운 깨끗하고 SEO 친화적 인 URL을 생성합니다.
서버 측 렌더링을 활용하면 클라이언트에 페이지를 제공하기 전에 서버에서 페이지를 먼저 렌더링하여 애플리케이션로드 속도를 높일 수 있습니다.

이전 브라우저를 지원해야하는 경우에만 Hashlocationstrtegy를 사용하십시오.

자세한 내용을 보려면 여기를 클릭하십시오

참고 URL : https://stackoverflow.com/questions/14319967/angularjs-routing-without-the-hash

'IT story' 카테고리의 다른 글

SQL Server Management Studio에서 기억 된 로그인 및 암호 목록 제거 (0)	2020.04.21
리눅스 용 그래픽 DIFF 프로그램 (0)	2020.04.21
Eclipse에서 TODO 태그 찾기 (0)	2020.04.21
재현 가능한 팬더 예를 만드는 방법 (0)	2020.04.21
누락 된 모든 파일에 대해 Mercurial의 'hg remove'를 수행하는 방법은 무엇입니까? (0)	2020.04.21

현재글해시 '#'이없는 AngularJS 라우팅

hot-time

해시 '#'이없는 AngularJS 라우팅

해시 '#'이없는 AngularJS 라우팅

간단하고 짧은 답변을 쓸 수 있습니다

최신 정보

방법 : html5Mode와 작동하도록 서버 구성 ¹

아파치 다시 작성

Nginx 재 작성

Azure IIS 다시 쓰기

빠른 다시 쓰기

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

해시 '#'이없는 AngularJS 라우팅

해시 '#'이없는 AngularJS 라우팅

간단하고 짧은 답변을 쓸 수 있습니다

최신 정보

방법 : html5Mode와 작동하도록 서버 구성 1

아파치 다시 작성

Nginx 재 작성

Azure IIS 다시 쓰기

빠른 다시 쓰기

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바

방법 : html5Mode와 작동하도록 서버 구성 ¹