Question

我有一个使用Angular 1.5 Components的小型网络应用。当我启动服务器时，浏览器会将我重定向到预期的http://127.0.0.1:50001/welcome，并显示欢迎页面。如果我想要创建新用户，请点击该链接，将网址更改为http://127.0.0.1:50001/welcome/newUser，然后新用户表单就会出现。

当我尝试直接访问网址（或刷新页面）时会出现问题 - 页面根本无法加载。控制台中没有出现错误 - 没有任何反应。

我的配置如下：

根组件：

.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's

<强>解释

如果您没有基于＃的URL浏览器进入服务器以获取资源但未找到任何内容。因此，当您定义服务器端路由时，它将为主页提供服务，然后进行客户端路由。

Answer 2

您需要在服务器中设置Url Rewriting，以便将所有网址重写为索引页面或后端的默认路由。

无法直接从浏览器访问Angular Component

2 个答案: