ブラウザでURLを直接訪れても、クリックしたときに動作すると角度ルーティングは機能しませんか？

Question

Iディレクトリ構造のように定義

app 
..views 
....partials 
......main.jade 
......foo.jade 
....index.jade 

とルートとの角度アプリ有する：

'は厳密使用';

angular.module('myApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute', 
    'firebase', 
    'myApp.config' 
]) 
    .config(function ($routeProvider, $locationProvider) { 
    $locationProvider.html5Mode(true); 

    $routeProvider 
     .when('/', { 
     templateUrl: '/partials/main', 
     controller: 'MainCtrl' 
     }) 
     .when('/foo/:fooName', { 
     templateUrl: '/partials/foo', 
     controller: 'FooCtrl' 
     })    
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

私は、サーバー側でExpressを使用していますし、関連するコードは次のとおりです。

// server.js 
    app.configure('development', function(){ 
    app.use(express.static(path.join(__dirname, '.tmp'))); 
    app.use(express.static(path.join(__dirname, 'app'))); 
    app.use(express.errorHandler()); 
    }); 

    app.configure('production', function(){ 
    app.use(express.favicon(path.join(__dirname, 'public/favicon.ico'))); 
    app.use(express.static(path.join(__dirname, 'public'))); 
    }); 

    app.get('/', routes.index); 
    app.get('/partials/:name', routes.partials); 

    //routes.js 
    exports.index = function(req, res){ 
     res.render('index'); 
    }; 


    exports.partials = function(req, res){ 
     var name = req.params.name; 
     res.render('partials/' + name); 
    }; 

メインルートを"/"負荷罰金と予想されるようにするとき、私は"/foo/bar"部分図にfoo.jade負荷にクリックしてください。しかし、URLに直接"/foo/bar"を訪問しようとすると、エクスプレス"cannot GET /foo/bar"から404の応答が得られます。このようなルートは明示的に定義されていないため意味があります。しかし、私はこれが角度ルータを定義する全体のポイントだと考えました。この要求を傍受し、実際に"/partials/foo"を求めています。 私は

//redirect all others to the index (HTML5 history) 
app.get('*', routes.index); 

を追加しようとしたが、それは問題を解決し、静的なJS資産についても、リクエストをキャッチし、かなり悪いですindex.htmlの内容で応答するように見えたのdidnt。 私は何か間違っていると確信しています。 URLに直接アクセスできるようにするにはどうすればよいですか？

Answer 1

ルーティングがこのように動作する理由は、html5モードがオンになっているためです。 次の行に注意してください：$locationProvider.html5Mode(true);

"/foo/bar"に直接アクセスすると、このURLに直接HTTP GET要求が送信されることを理解する必要があります。リンクをクリックしてこのURLにアクセスしようとすると、Angularはこのアクションをインターセプトし、History.pushStateを呼び出してブラウザのリンクのみを更新します。

html5modeルーティングを動作させるために必要な作業は、url rewriteを実装することです。すべてのリクエストは、AngularJSアプリケーションをブートストラップするインデックスファイルにリダイレクトする必要がありますが、これはサーバー上で行う必要があります。 Angularは、目的のページを単独でレンダリングします。

を確認してください。connect mod rewriteは、そのようなことはしません。

あなたもthis middlewareできます。