我正在学习AngularJS,有一件事真的让我很恼火。

我使用$routeProvider为我的应用程序声明路由规则:

$routeProvider.when('/test', {
  controller: TestCtrl,
  templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });

但是当我在浏览器中导航到我的应用程序时,我看到app/#/test而不是app/test。

所以我的问题是为什么AngularJS把这个散列#添加到url ?有可能避免吗?


当前回答

如果你想在OS X 10.8和Apache上配置这个,那么你可能会在你的.htaccess文件中找到以下帮助:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

Options +FollowSymlinks如果没有设置,可能会在日志中给你一个禁止错误,如下所示:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

重写base是必需的,否则请求将被解析到您的服务器根目录,在本地默认情况下不是您的项目目录,除非您特别配置了vhosts,所以您需要设置路径,以便请求找到您的项目根目录。例如,在我的机器上,我有一个/Users/me/Sites目录,其中保存了我所有的项目。就像旧的OS X设置。

接下来的两行有效地表示如果路径不是目录或文件,所以你需要确保你没有与你的应用程序路由路径相同的文件或目录。

下一个条件是,如果请求没有以指定的文件扩展名结束,那么在那里添加您需要的内容

最后一个是为index.html文件服务——你的应用程序为所有其他请求服务。

如果你仍然有问题,那么检查apache日志,它可能会给你有用的提示:

/private/var/log/apache2/error_log

其他回答

如果你像其他人说的那样启用了html5mode,并创建一个包含以下内容的.htaccess文件(根据你的需要进行调整):

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

当用户进入正确的路线时,他们将被引导到你的应用程序,你的应用程序将读取路线,并将他们带到正确的“页面”。

编辑:只要确保没有任何文件或目录名称与您的路由冲突。

事实上,非HTML5浏览器需要#(标签)。

否则,它们只会在提到的href处对服务器进行HTTP调用。 #是一个旧的浏览器短路,它不触发请求,这允许许多js框架在此基础上构建自己的客户端重路由。

你可以使用$locationProvider.html5Mode(true)告诉angular在可用的情况下使用HTML5策略。

以下是支持HTML5策略的浏览器列表:http://caniuse.com/#feat=history

如果你想在OS X 10.8和Apache上配置这个,那么你可能会在你的.htaccess文件中找到以下帮助:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

Options +FollowSymlinks如果没有设置,可能会在日志中给你一个禁止错误,如下所示:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

重写base是必需的,否则请求将被解析到您的服务器根目录,在本地默认情况下不是您的项目目录,除非您特别配置了vhosts,所以您需要设置路径,以便请求找到您的项目根目录。例如,在我的机器上,我有一个/Users/me/Sites目录,其中保存了我所有的项目。就像旧的OS X设置。

接下来的两行有效地表示如果路径不是目录或文件,所以你需要确保你没有与你的应用程序路由路径相同的文件或目录。

下一个条件是,如果请求没有以指定的文件扩展名结束,那么在那里添加您需要的内容

最后一个是为index.html文件服务——你的应用程序为所有其他请求服务。

如果你仍然有问题,那么检查apache日志,它可能会给你有用的提示:

/private/var/log/apache2/error_log

你也可以使用下面的代码重定向到主页(主页):

{ path: '', redirectTo: 'home', pathMatch: 'full'}

在如上所述指定重定向后,您可以重定向其他页面,例如:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

在Angular 6中,你可以使用路由器:

RouterModule.forRoot(routes, { useHash: false })