[angularjs] AngularJS URL에서 조각 식별자 제거 (# 기호)

angular.js URL에서 # 기호를 제거 할 수 있습니까?

뷰를 변경하고 매개 변수로 URL을 업데이트 할 때 브라우저의 뒤로 버튼 등을 계속 사용할 수 있기를 원하지만 # 기호는 원하지 않습니다.

튜토리얼 routeProvider는 다음과 같이 선언됩니다.

angular.module('phonecat', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
  when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
  otherwise({redirectTo: '/phones'});
}]);

#없이 동일한 기능을 갖도록 이것을 편집 할 수 있습니까?

답변

예, 구성해야합니다 $locationProvider및 설정 html5Mode에 true:

angular.module('phonecat', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

    $routeProvider.
      when('/phones', {templateUrl: 'partials/phone-list.html',   controller: PhoneListCtrl}).
      when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
      otherwise({redirectTo: '/phones'});

    $locationProvider.html5Mode(true);

  }]);

답변

html5 히스토리 API에 대한 브라우저 지원을 확인하십시오.

  if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

답변

예쁜 URL 과 축소 후 코드가 작동 하도록 해시 태그를 제거하려면 아래 예제와 같이 코드를 구성해야합니다.

jobApp.config(['$routeProvider','$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus', {
                templateUrl: 'views/job-list.html',
                controller: 'JobListController'
            }).
            when('/menus/:id', {
                templateUrl: 'views/job-detail.html',
                controller: 'JobDetailController'
            });

         //you can include a fallback by  including .otherwise({
          //redirectTo: '/jobs'
        //});


        //check browser support
        if(window.history && window.history.pushState){
            //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a  tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="https://stackoverflow.com/">

         // to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase

         // if you don't wish to set base URL then use this
         $locationProvider.html5Mode({
                 enabled: true,
                 requireBase: false
          });
        }
    }]);

답변

에 $locationProvider.html5Mode(true)설정된 후 web.config에 규칙을 작성합니다.app.js .

희망은 누군가를 도와줍니다.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

내 index.html에서 이것을 추가했습니다. <head>

<base href="/">

서버에 iis 용 URL Rewriter를 설치하는 것을 잊지 마십시오.

또한 Web Api 및 IIS를 사용하는 경우이 일치 URL은 API 호출을 변경하므로 작동하지 않습니다. 따라서 세 번째 입력 (세 번째 조건 줄)을 추가하고 호출을 제외시키는 패턴을 제공하십시오.www.yourdomain.com/api

답변

AngularJS가있는 MVC가있는 .NET 스택에있는 경우 URL에서 ‘#’을 제거하려면 다음과 같이해야합니다.

_Layout 페이지에서 기본 href를 설정하십시오. <head> <base href="https://stackoverflow.com/"> </head>
그런 다음 각도 앱 구성에 다음을 추가하십시오. $locationProvider.html5Mode(true)
위의 URL에서 ‘#’을 제거하지만 “yoursite.com/about”에있는 경우 페이지 새로 고침이 작동하지 않습니다. 예를 들어 refreash는 404를 제공합니다. 이는 MVC가 각도 라우팅과 MVC 패턴에 대해 알지 못하기 때문입니다. MVC 라우팅 경로에없는 ‘about’에 대한 MVC 페이지를 찾습니다. 이에 대한 해결 방법은 모든 MVC 페이지 요청을 단일 MVC보기로 전송하는 것입니다.

URL :

routes.MapRoute(
    name: "App",
    url: "{*url}",
    defaults: new {
        controller = "Home", action = "Index"
    }
);

답변

html5mode를 조정할 수는 있지만 페이지의 html 앵커에 포함 된 링크 및 브라우저 주소 표시 줄에서 URL의 모양에 대해서만 작동합니다. 페이지 외부에서 해시 태그없이 (html5mode의 유무에 관계없이) 서브 페이지를 요청하면 404 오류가 발생합니다. 예를 들어, 다음 CURL 요청은 html5mode와 상관없이 페이지를 찾을 수 없음 오류를 발생시킵니다.

$ curl http://foo.bar/phones

다음은 루트 / 홈 페이지를 반환하지만

$ curl http://foo.bar/#/phones

그 이유는 요청이 서버에 도착하기 전에 해시 태그 이후의 항목이 제거되기 때문입니다. 따라서에 대한 요청은에 대한 요청으로 http://foo.bar/#/portfolio서버 에 도착합니다 http://foo.bar. 서버는 (아마도) 200 OK 응답으로 응답 http://foo.bar하고 에이전트 / 클라이언트는 나머지를 처리합니다.

따라서 다른 사람과 URL을 공유하려는 경우 해시 태그를 포함 할 수 밖에 없습니다.

답변

2 단계-1 단계를 수행
하십시오. 먼저 앱 구성 파일에서 $ locationProvider.html5Mode (true) 를 설정하십시오.
예를 들어-
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2. 메인 페이지 에서 <base>를 두 번째로 설정합니다 .
예를 들어->
<base href="https://stackoverflow.com/">

$ location 서비스는 HTML5 히스토리 API를 지원하지 않는 브라우저의 해시 파트 메소드로 자동 대체됩니다.