Question

我正在尝试为angularJS中的webapps创建一个目录结构，现在我的问题是我使用$ routeProvider，这在链接中添加了一个井号（＃）。我尝试了这个功能

$locationProvider.html5Mode(true);

但在我使用thyis函数后，routeProvider不再起作用，它不会加载任何应该在哪里的ng-view。这是我的routeprovider

$routeProvider
            .when('/', { templateUrl: '/view/home.html' })
            .when('/blog', { templateUrl: '/view/blog.html' })
            .when('/contact', { templateUrl: '/view/contact.html' })
            .otherwise({ redirectTo: '/' });

是否有其他方法可以删除哈希并使应用程序不是单页应用程序？谢谢你，丹尼尔。

Answer 1

在角项目中从Url中删除＃。

http://localhost/#/about ---＆gt; http://localhost/about

1）在index.html中添加基本网址

2）在你的app.js或routes.js

中使用html5历史记录

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

3）服务器端配置 - Grunt服务器：中间件：function（connect）{ var middlewares = []; middlewares.push（modRewrite（[ '！/ assets | \ .html | \ .js | \ .css | \ woff | \ ttf | \ swf $ /index.html' ]））;

    middlewares.push(connect.static('.tmp'));
    middlewares.push(connect().use(
      '/bower_components',
      connect.static('./bower_components')
    ));
    middlewares.push(connect.static(appConfig.app));

    //middlewares.push(require('grunt-connect-proxy/lib/utils').proxyRequest);
    return middlewares;
  }

  -Ngnix Server  
  location ~ ^/(scripts.*js|styles|images) {
        gzip_static on;
        expires 1y;
        add_header Cache-Control public;
        add_header ETag "";
        break;
    }

   #location /api1 {
   #  rewrite ^/api1/(.*) /$1 break;
   #  proxy_redirect off;
   #  proxy_pass https://api1.example.com;
   #  proxy_set_header X-Real-IP $remote_addr;
   #  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   #  proxy_set_header X-Forwarded-Proto https;
   #  proxy_set_header Authorization $http_authorization;
   #}

   #location /api2 {
   #  rewrite ^/api2/(.*) /$1 break;
   #  proxy_redirect off;
   #  proxy_pass https://api2.example.com;
   #  proxy_set_header X-Real-IP $remote_addr;
   #  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   #  proxy_set_header X-Forwarded-Proto https;
   #  proxy_set_header Authorization $http_authorization;
   #}

   location / {
     try_files $uri /index.html;
   }

Answer 2

您需要在路线文件中，就像您一样： $locationProvider.html5Mode(true); 并且您必须在头部添加到索引文件中： <base href="/">

Answer 3

$locationProvider.hashPrefix('!')

现在你可以在没有#的情况下使用像'/ home'这样的链接（仅适用于html5浏览器）

角度删除哈希标志

3 个答案: