“外部”导航以纠正angular.js url（直接链接/刷新/等）

I am developing an angular app and have quick question. As a 'single page app' angular 'takes over' the URL mappings, so I can navigate from "/" -> '/about' etc, and navigations all happen on the client in a single page.

我正在开发一个角度应用程序,并有快速的问题。作为“单页应用程序”,角度'接管'URL映射,因此我可以从“/” - >'/ about'等导航,导航全部发生在客户端的单个页面中。

What I am trying to figure out is how to get to the correct page on the client when the client navigation is bypassed. So for instance, instead of going to http://www.myapp.com, then clicking 'about' and going to 'http://www.myapp.com/about', how do I handle the user going directly to 'http://www.myapp.com/about', I can obviously redirect them to the "/" but I'd still like them to 'end up' at '/about' as that's what they'ed expect. Similarly, there's the same issue on a refresh. If I'm sitting at '/about', and do a browser refresh, that request is going to '/about' on the server and bypassing the app, so again, need to I guess, reload the app at the root, but still make it back to /about.

我想弄清楚的是当绕过客户端导航时如何到达客户端上的正确页面。例如,不是去http://www.myapp.com,而是点击'about'并转到'http://www.myapp.com/about',我如何处理用户直接进入' http://www.myapp.com/about',我显然可以将它们重定向到“/”,但我仍然希望它们“最终”在'/ about',因为这是他们所期望的。同样,刷新时也存在同样的问题。如果我坐在'/ about',并进行浏览器刷新,该请求将在服务器上转到'/ about'并绕过应用程序,所以再次需要我猜,在根处重新加载应用程序,但仍然让它回到/关于。

Thanks In Advance.

提前致谢。

EDIT: Thanks for there responses, I think maybe I haven't asked the question clearly. I understand routing, etc within my angular app. So setting it up to say load 'partials/about.html' when an '/about' href is clicked. My issue is that assuming that that is already working, a user goes directly to 'www.myapp.com/about'. The angular application 'lives' on the root. So presumably, the server would do a redirect to '/'. That loads the app but doesn't 'set' angular to the route that the user expected. So the question, is there someway to tell the app "When you load, go to /about" perhaps based on the referrer or something.

编辑:谢谢你的回复,我想也许我没有清楚地问过这个问题。我理解我的角度应用程序中的路由等。因此,当点击'/ about'href时,将其设置为加载'partials / about.html'。我的问题是假设已经有效,用户可以直接访问'www.myapp.com/about'。角度应用程序“存在”根目录。因此,服务器可能会重定向到'/'。这会加载应用程序,但不会“设置”角度到用户期望的路线。所以问题是,有人告诉应用程序“当你加载,转到/关于”可能基于引用者或其他东西。

2 个解决方案

#1

What server are you using ?

你用的是什么服务器?

You can create a catch-all route in your router. Like match '*' => 'Angular#App' (Rails)

您可以在路由器中创建一个包罗万象的路由。喜欢匹配'*'=>'Angular#App'(Rails)

or (express)

app.use(function (req, res) {
  res.writeHeader(200, {'Content-Type': 'text/html'});
  res.end(indexFileContent);
});

#2

I think you are talking about client side routing in Angular - not server side. Anyway, my answer is assuming this.

我想你在谈论Angular中的客户端路由 - 而不是服务器端。无论如何,我的回答是假设这一点。

Angular contains a routing service that allows you to define client side routes that map to url's that come after the base server url. Here is an example of how you can set it up:

Angular包含一个路由服务,允许您定义映射到基本服务器URL之后的URL的客户端路由。以下是如何设置它的示例:

angular.module('myApp',[])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {templateUrl: '/home-partial', controller: 'HomeCtrl'})
        .when('/about', {templateUrl: '/about-partial', controller: 'AboutCtrl'})
        .when('/contact', {templateUrl: '/contact-partial', controller: 'ContactCtrl'})
        .otherwise({redirectTo: '/'});
  }])

Provided you have the partials setup on the server side and the controllers setup too, when a user navigates to each url, the correct controller and partial will be pulled up and you can choose to do whatever you need in each of those controllers.

如果您在服务器端设置了局部设置并且控制器也设置了,当用户导航到每个URL时,将拉出正确的控制器和部分控制器,您可以选择在每个控制器中执行任何操作。

There are other options you can use also, I just use the routes in this way. Check out the AngularJS documentation for more info

您还可以使用其他选项,我只是以这种方式使用路线。查看AngularJS文档以获取更多信息

#1