使用 AngularJS 和 Express 进行路由答案

【问题标题】：Routing with AngularJS and Express使用 AngularJS 和 Express 进行路由
【发布时间】：2017-12-26 02:29:05
【问题描述】：

我正在尝试在 Express 旁边使用 AngularJS ngRoute，但我不断收到以下错误：

无法获取 /profile

这是我的代码：

.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
      $routeProvider.when('/profile', {
        templateUrl: 'views/partials/profile.html',
        controller: 'kontrola'
      })

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



    app.get('/', routes.index)
    app.get('/login', routes.login)
    app.get('/signup', routes.signup)

我该如何解决？

【问题讨论】：

标签： angularjs express routing

【解决方案1】：

Angular 的 ngRoute 用于客户端路由，而 express 用于服务器端路由。

您需要在服务器中设置一个处理程序来提供静态文件，如下所示（假设您的 views 文件夹位于 static 文件夹中：

app.set('views', path.join(__dirname, 'static'));

然后当您转到http://yourservername/#/profile 时，您将获得您的个人资料视图。

如果你想使用html5mode，你需要一个这样的标签：

<head>
   .....
    <base href="/">

</head>

【讨论】：

感谢 Shimon 的回复，但我尝试将部分文件移动到 views 文件夹，在服务器上设置处理程序，如 app.set('views', path.join(__dirname, 'static') );并导航到 localhost/3000/#/profile 但它仍保留在当前索引页面中并将 url 更改为 localhost:3000/#!#%2Fprofile 而你可以看到我试图避免 #!在 url 这就是为什么我使用 $locationProvider 但仍然出现
所以你不会再收到cannot Get /profile了，对吧？
所以现在这只是一个角度问题，你使用的是什么版本的角度？
我正在使用以下版本：
当然。它仅在我直接输入 localhost/3000/#!/profile 时才有效

【解决方案2】：

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

  $routeProvider.when('/profile', {
    templateUrl: 'partials/pro.html',
    controller: 'kontrola'
  })

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

}])

代替：

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

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

  $routeProvider.when('/profile', {
    templateUrl: 'partials/pro.html',
    controller: 'kontrola'
  })

【讨论】：