2016-05-13 3 views
0

私はVisual Studio 2010にウェブサイトを持っています。Angular JSルーティングがURLにファイル名を表示しています(ローカルホスト内)

私はIEを使用してデバッグする場合、私は、ルーティング、現在取り組んでいるが、それは、このようなURLで(私のシングルページアプリの)私の最初のページのファイル名を示している。 http://localhost:1349/DP/index.html#/home

ルーティングは次のように動作しますが、Iファイル名 "index.html"や "#"を見たくない。私は多くの解決策を見て、多くのことを試しました。彼らのどれもは適切に働いていなかった(だから私はここで何もしなかったものを投稿するつもりはない)。

私のページへのリンクは以下のとおりです。

<li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#history">History</a></li> <li><a href="#coachs">Coachs</a></li> <li><a href="#activities">Activities</a></li> <li><a href="#calender">Calender</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#fundraisers">Fundraisers</a></li> <li><a href="#links">Links</a></li> <li><a href="#styletesting">Test Styles</a></li>

ルーティングコードは次のとおりです。

[(関数(){ は '厳格な使用';

あなたとして
var app = angular.module('app', ['ngRoute']); 


// configure our routes 
app.config(['$routeProvider','$locationProvider', 
    function ($routeProvider, $locationProvider) { 

    $routeProvider 


     // catch all go home 
     .when('/', { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }) 

     // route for the home page 
     .when('/home', { 
      templateUrl: 'home.html', 
      controller: 'homeController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl: 'about.html', 
      controller: 'aboutController' 
     }) 

     // route for the contact page 
     .when('/contact', { 
      templateUrl: 'navbar.html', 
      controller: 'contactController' 
     }) 


     // catch all go home 
     .when('/styletesting', { 
      templateUrl: 'styleTesting.html', 
      controller: 'styletestController' 
     }) 


     /* 
     // happens when nothing specificed 
     .otherwise({ 
      redirectTo: '/' 
     }) 
     */ 

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

locationproviderが機能していないためにコメントアウトされていることがわかります。私は試しましたが、どちらもうまくいきませんでした。

私はさまざまな解決策を試していますが、404ページが表示されますが、ng-viewページのセクションはロードされません(ヘッダーとフッターが表示され、index.htmlのコードになります)。

ページURLを表示せずにこれを動作させるには、何が必要ですか?

注:localhost(IISはスタンドアロンIISではなく、Visual Studio 2010に組み込まれています)に開発しており、これをルートドメイン名でWebホストサーバーに展開したいと考えています。だから、両方のために働く必要があります(私は完全なURLのパス/などハードコードを傾けることはできません)。

答えて

1

これはかなりの角度で呼ばれています。あなたは3つのことをする必要があります。

1)app.js$locationProviderサービスを注入し、html5Modeルーティングを有効にする必要があります。 html5Modeルーティングは、HTML5をサポートするブラウザでのみ動作します。

app.config(["$locationProvider", 
    function($locationProvider) { 
     $locationProvider.html5Mode(true); 
    } 
]); 

好奇心が強い場合は、ブラウザでhtml5履歴APIを確認できます。サポートされていない場合、自動的にハッシュURLアプローチを使用します。 https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

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

2)あなたは、インデックスファイルのheadタグにbaseタグを設定する必要があります。

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

あなたはベースのhrefタグを設定したくない場合は、この

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

3)サーバ設定の構成

Apacheの操作を行うことができます。

RewriteEngine On 
    # If an existing asset or directory is requested go to it as it is 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
    RewriteRule^- [L] 

    # If the requested resource doesn't exist, use index.html 
    RewriteRule^/index.html 

IIS:

<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> 
+0

どのようにこれらの設定をIISで設定しますか?それは私のweb.configまたはIIS自体にありますか?私はIISスタンドアロンを使用していません。それはVisual Studio内のものです。 – Brad

+0

私はほとんど/すべてを試していましたが、もう一度見ていきますが、私の問題である可能性のあるIIS設定セクションについて教えてください。 – Brad

+0

@Bradあなたは最初にIISにurl rewriteをインストールする必要があります。 http://www.iis.net/downloads/microsoft/url-rewrite。また、この投稿を見てくださいhttp://stackoverflow.com/questions/28678950/angularjs-routing-not-working-after-site-hosted-into-iis –

関連する問題