angularjs - 无法直接从浏览器访问 Angular 组件

Question

我有一个使用 Angular 1.5 组件的小型 Web 应用程序。当我启动服务器时，浏览器将我重定向到 http://127.0.0.1:50001/welcome ，这是预期的，欢迎页面出现。如果我想创建一个新用户，我单击链接，URL 更改为 http://127.0.0.1:50001/welcome/newUser新的用户表单出现。

当我尝试直接访问 URL(或刷新页面)时会出现问题 - 页面根本无法加载。控制台中没有出现错误 - 没有任何 react 。

我的配置如下:

根组件:

.component('webGuiComponent', {
  template: '<ng-outlet></ng-outlet>',
  $routeConfig: [
    { path: '/welcome/...', name: 'Welcome', component: 'welcomeComponent', useAsDefault: true }
  ]
})

.value('$routerRootComponent', 'webGuiComponent');

欢迎组件:

.component('welcomeComponent', {
  template: '<header></header><ng-outlet></ng-outlet>',
  $routeConfig: [
    { path: '/', name: 'Index', component: 'indexComponent', useAsDefault: true },
    { path: '/newUser', name: 'NewUser', component: 'newUser' }
  ]
})

.component('indexComponent', {
  templateUrl: '/app/components/welcome/index.html'
});

新用户组件:

.component('newUser', {
  controller: 'userController',
  templateUrl: '/app/components/user/new.html'
})

导航链接使用标准的 ng-links:

<a class="navbar-brand" ng-link="['/Welcome/Index']">Web GUI</a>
<a class="navbar-brand" ng-link="['/Welcome/NewUser']">Sign Up</a>

有谁知道为什么导航在通过 ng-link 完成时有效，但在直接访问 URL 时无效？

Answer 1

您必须为在客户端定义的所有路径添加服务器端路由，这将呈现您的主页。实现取决于您使用的服务器端技术。

或者你必须使用#based Url

说明

当您没有基于 # 的 URL 时，浏览器会转到服务器以获取资源但未找到任何内容。因此，当您定义服务器端路由时，它服务于主页，然后发生客户端路由。