193

アプリで HTML5 モードを有効にしたいと考えています。ここに示すように、構成用に次のコードを配置しました。

return app.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix = '!';

    $routeProvider.when('/', {
        templateUrl: '/views/index.html',
        controller: 'indexCtrl'
    });
    $routeProvider.when('/about',{
        templateUrl: '/views/about.html',
        controller: 'AboutCtrl'
    });

ご覧のとおり、 を使用し、 の$locationProvider.html5modeすべてのリンクをng-hrefを除外するように変更しました/#/。

問題

現時点でlocalhost:9000/は、インデックス ページに移動して表示し、 のような他のページに移動できますlocalhost:9000/about。

ただし、localhost:9000/aboutページを更新すると問題が発生します。次の出力が得られます。Cannot GET /about

ネットワークコールを見ると：

Request URL:localhost:9000/about
Request Method:GET

一方、最初にlocalhost:9000/移動してから、ナビゲートするボタンをクリックすると、次のようになり/aboutます。

Request URL:http://localhost:9000/views/about.html

ページを完全にレンダリングします。

更新時に角度を有効にして正しいページを取得するにはどうすればよいですか?

4

23 に答える 23

64

ブラウザのリンクが次のように見えるように設定するものはほとんどありません。http://yourdomain.com/pathこれらはAngular構成+サーバー側です

1)AngularJS

$routeProvider
  .when('/path', {
    templateUrl: 'path.html',
  });
$locationProvider
  .html5Mode(true);

2）サーバー側、.htaccessルートフォルダー内に配置してこれを貼り付けるだけです

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

angularjs の html5 モードと、さまざまな環境ごとに必要な構成について読むためのより興味深いものhttps://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server -to-work-with-html5mode また、この質問はあなたに役立つかもしれません$location / html5 と hashbang モードの切り替え / リンクの書き換え

于 2014-09-21T16:26:01.017 に答える
37

同様の問題があり、次の方法で解決しました。

  • <base href="/index.html">インデックスページでの使用

  • 次のように、ノード/Express サーバーですべてのルートをキャッチするミドルウェアを使用します (ルーターの後に配置します)。

app.use(function(req, res) {
    res.sendfile(__dirname + '/Public/index.html');
});

それはあなたを立ち上げて走らせるはずだと思います。

Apache サーバーを使用している場合は、リンクを mod_rewrite することをお勧めします。難しいことではありません。設定ファイルを少し変更するだけです。

angularjsでhtml5modeが有効になっていることを前提としています。今。angular 1.2では、ベースURLを宣言することは実際には推奨されなくなっていることに注意してください。

于 2013-08-13T16:35:31.320 に答える
15

アプリをロードするには、すべてを index.html に書き換えるようにサーバーを構成する必要があります。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5モード

于 2014-03-12T20:33:26.647 に答える
10

grunt プロジェクトでの URL 書き換えをシミュレートするための単純な接続ミドルウェアを作成しました。https://gist.github.com/muratcorlu/5803655

そのように使用できます：

module.exports = function(grunt) {
  var urlRewrite = require('grunt-connect-rewrite');

  // Project configuration.
  grunt.initConfig({
    connect: {
      server: {
        options: {
          port: 9001,
          base: 'build',
          middleware: function(connect, options) {
            // Return array of whatever middlewares you want
            return [
              // redirect all urls to index.html in build folder
              urlRewrite('build', 'index.html'),

              // Serve static files.
              connect.static(options.base),

              // Make empty directories browsable.
              connect.directory(options.base)
            ];
          }
        }
      }
    }
  })
};
于 2013-06-18T09:08:46.600 に答える
8

AngularJS を使用して MVC を使用して .NET スタックを使用している場合、URL から「#」を削除するには、次の手順を実行する必要があります。

  1. _Layout ページでベース href を設定します。<head> <base href="/"> </head>

  2. 次に、angular app config に以下を追加します。$locationProvider.html5Mode(true)

  3. 上記では URL から「#」を削除しますが、ページの更新は機能しません。たとえば、「yoursite.com/about」にいる場合、ページの更新で 404 が返されます。これは、MVC が角度ルーティングを認識しておらず、MVC パターンによってMVC ルーティング パスに存在しない「about」の MVC ページを探します。これを回避するには、すべての MVC ページ リクエストを 1 つの MVC ビューに送信します。これは、すべての URL をキャッチするルートを追加することで実行できます。

routes.MapRoute(
        name: "App",
        url: "{*url}",
        defaults: new { controller = "Home", action = "Index" }
    );
于 2015-09-22T23:04:41.397 に答える
5

他の人が述べたように、サーバー上のルートを書き換えて設定する必要があります<base href="/"/>。

の場合gulp-connect:

npm install connect-pushstate

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  pushState = require('connect-pushstate/lib/pushstate').pushState;
...
connect.server({
  ...
  middleware: function (connect, options) {
    return [
      pushState()
    ];
  }
  ...
})
....
于 2014-07-02T01:55:38.537 に答える
4

Grunt と Browsersync の場合は、ここでconnect-modrewrite を使用します

var modRewrite = require('connect-modrewrite');    


browserSync: {
            dev: {
                bsFiles: {

                    src: [
                        'app/assets/css/*.css',
                        'app/*.js',
                        'app/controllers/*.js',
                        '**/*.php',
                        '*.html',
                        'app/jade/includes/*.jade',
                        'app/views/*.html',
               ],
            },
        options: {
            watchTask: true,
            debugInfo: true,
            logConnections: true,
            server: {
                baseDir :'./',
                middleware: [
                       modRewrite(['!\.html|\.js|\.jpg|\.mp4|\.mp3|\.gif|\.svg\|.css|\.png$ /index.html [L]'])
                ]
            },

            ghostMode: {
                scroll: true,
                links: true,
                forms: true
                    }
                }
            }
        },
于 2016-08-22T09:47:17.483 に答える
3

私は解決しました

test: {
        options: {
          port: 9000,
          base: [
            '.tmp',
            'test',
            '<%= yeoman.app %>'
          ],
         middleware: function (connect) {
                  return [
                      modRewrite(['^[^\\.]*$ /index.html [L]']),
                      connect.static('.tmp'),
                      connect().use(
                          '/bower_components',
                          connect.static('./bower_components')
                      ),
                      connect.static('app')
                  ];
              }
        }
      },
于 2015-02-19T08:50:18.103 に答える
2

Expressでサーバーリダイレクトがありました：

app.get('*', function(req, res){
    res.render('index');
});

を追加した後でも、ページの更新の問題が引き続き発生していました<base href="/" />。

解決策: ページ内の実際のリンクを使用してナビゲートしていることを確認してください。URL にルートを入力しないでください。ページが更新されます。（ばかげた間違い、私は知っています）

:-P

于 2014-01-29T22:00:22.063 に答える
0

JHipsterで生成されたjava + angular アプリでも同じ問題が発生しました。プロパティのすべてのAngularページのフィルターとリストで解決しました：

アプリケーション.yml:

angular-pages:
  - login
  - settings
...

AngularPageReloadFilter.java

public class AngularPageReloadFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        request.getRequestDispatcher("index.html").forward(request, response);
    }
}

WebConfigurer.java

private void initAngularNonRootRedirectFilter(ServletContext servletContext,
                                              EnumSet<DispatcherType> disps) {
    log.debug("Registering angular page reload Filter");
    FilterRegistration.Dynamic angularRedirectFilter =
            servletContext.addFilter("angularPageReloadFilter",
                    new AngularPageReloadFilter());
    int index = 0;
    while (env.getProperty("angular-pages[" + index + "]") != null) {
        angularRedirectFilter.addMappingForUrlPatterns(disps, true, "/" + env.getProperty("angular-pages[" + index + "]"));
        index++;
    }
    angularRedirectFilter.setAsyncSupported(true);
}

希望、それは誰かに役立つでしょう。

于 2015-10-28T14:06:15.103 に答える
0

index.html と Gruntfile.js が同じディレクトリにある場合に機能する、さらに優れた Grunt プラグインを見つけました。

https://npmjs.org/package/grunt-connect-pushstate

その後、Gruntfile で次のようにします。

 var pushState = require('grunt-connect-pushstate/lib/utils').pushState;


    connect: {
    server: {
      options: {
        port: 1337,
        base: '',
        logger: 'dev',
        hostname: '*',
        open: true,
        middleware: function (connect, options) {
          return [
            // Rewrite requests to root so they may be handled by router
            pushState(),
            // Serve static files
            connect.static(options.base)
          ];
        }
      },
    }
},
于 2014-01-14T10:27:55.410 に答える
0

Gulp + browserSync:

npm 経由で connect-history-api-fallback をインストールし、後で serve gulp タスクを構成します

var historyApiFallback = require('connect-history-api-fallback');

gulp.task('serve', function() {
  browserSync.init({
    proxy: {
            target: 'localhost:' + port,
            middleware: [ historyApiFallback() ]
        }
  });
});
于 2016-01-25T02:38:21.783 に答える
0 
I solved same problem using modRewrite.  
AngularJS is reload page when after # changes.  
But HTML5 mode remove # and invalid the reload.  
So we should reload manually.
# install connect-modrewrite
    $ sudo npm install connect-modrewrite --save

# gulp/build.js
    'use strict';
    var gulp = require('gulp');
    var paths = gulp.paths;
    var util = require('util');
    var browserSync = require('browser-sync');
    var modRewrite  = require('connect-modrewrite');
    function browserSyncInit(baseDir, files, browser) {
        browser = browser === undefined ? 'default' : browser;
        var routes = null;
        if(baseDir === paths.src || (util.isArray(baseDir) && baseDir.indexOf(paths.src) !== -1)) {
            routes = {
                '/bower_components': 'bower_components'
            };
        }

        browserSync.instance = browserSync.init(files, {
            startPath: '/',
            server: {
            baseDir: baseDir,
            middleware: [
                modRewrite([
                    '!\\.\\w+$ /index.html [L]'
                ])
            ],
            routes: routes
            },
            browser: browser
        });
    }
于 2015-02-21T13:48:19.987 に答える