2017-03-01 5 views
1

ng-viewport를 사용하여 index.html에 내 페이지를 표시하고 HTML 5 모드에서 기본 URL (예 : http://localhost:86)을 열면 모든 것이 정상적으로 작동합니다 내 집이나 방문 페이지 인 (http://localhost:86/app/dashboard)로 바뀌면 다른 모든 리디렉션이 제대로 작동합니다.HTML 5 모드 딥 링크 및 새로 고침이 작동하지 않음 AngularJS

우리는 전체 URL (예 : http://localhost:86/app/dashboard)을 직접 열려고 시도하고 내 index.html 페이지를로드하지만 로고 및 이미지와 같은 정적 콘텐츠 만 표시하고 내 동적 웹 페이지를 표시하지 않으면 문제가 발생합니다. ng-viewport 섹션에 표시됩니다. 페이지를 새로 고침 할 때도 동일한 동작이 발생합니다.

다음은 내가 작성한 코드입니다.

JS 코드

$locationProvider.html5Mode({ enabled: true });

HTML 코드

<head> 
    <base href="/"/> 
</head> 
<body> 
    <div> 
     <img class="rotate" src="../assets/img/logo_img.png" /> 
    </div> 
    <div style="height: 100%" ng-viewport autoscroll> 
    </div> 
</body> 

의 Web.config

<?xml version="1.0" encoding="UTF-8"?> 
<system.webServer> 
    <defaultDocument> 
     <files> 
     <clear /> 
     <add value="index.html" /> 
     <add value="Default.htm" /> 
     <add value="Default.asp" /> 
     <add value="index.htm" /> 
     <add value="iisstart.htm" /> 
     <add value="default.aspx" /> 
     </files> 
    </defaultDocument> 
    <security> 
     <requestFiltering> 
     <hiddenSegments> 
      <remove segment="App_Data" /> 
     </hiddenSegments> 
     </requestFiltering> 
    </security> 
    <rewrite> 
     <rules> 
     <clear /> 
     <rule name="AngularJS" enabled="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll" trackAllCaptures="false"> 
       <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> 

경로 설정 코드

static $routeConfig = [{ 
     path: '/dashboard/:type', 
     component: 'dashboard' 
    }, { 
     path: '/dashboard', 
     component: 'dashboard' 
    }, { 
     path: '/mail', 
     component: 'mail' 
    }, { 
     path: '/solution/:id', 
     component: 'solutionDetails' 
}] 

답변

0

문제는 js 및 css 파일의 상대 경로와 절대 경로와 관련이 있습니다. index.html에서로드하는 모든 파일 경로 앞에 /를 추가했습니다. 이제 모든 것이 매력처럼 작동합니다.

**Earlier :** <script src="app.js"></script> 

**Now:** <script src="/app.js"></script>