如何在 angularJS 中配置 routeProvider 和 locationProvider? [英] How to config routeProvider and locationProvider in angularJS?

问题描述

我想在 angularJS 中激活 html5Mode，但我不知道为什么它不起作用.我的代码有问题吗?

angular.module('myApp',[]).config(function($locationProvider, $routeProvider) {$locationProvider.html5Mode(true);$routeProvider.when('/', {templateUrl: 'partials/home.html',控制器:HomeCtrl});$routeProvider.when('/tags/:tagId', {templateUrl: 'partials/result.html',控制器:TagResultCtrl});//$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});});

在 html 中

 <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>

解决方案

我看到的唯一问题是相关链接和模板因此没有正确加载.

来自关于 HTML5 模式的文档

<块引用>

相关链接

请务必检查所有相关链接、图像、脚本等.您必须在主 html 文件的头部指定 url base (<base href="/my-base">) 或者你必须在任何地方使用绝对 url(以 / 开头)，因为相对 url 将使用文档的初始绝对 url 解析为绝对 url，这通常与应用程序的根不同.

在您的情况下，您可以在 href 属性中添加正斜杠 /($location.path 会自动em>) 以及配置路由时的 templateUrl.这避免了像 example.com/tags/another 这样的路由，并确保模板正确加载.

这是一个有效的例子:

<a href="/">首页</a>|<a href="/another">another</a>|<a href="/tags/1">tags/1</a>
<div ng-view></div>

和

app.config(function($locationProvider, $routeProvider) {$locationProvider.html5Mode(true);$routeProvider.什么时候('/'， {templateUrl: '/partials/template1.html',控制器:'ctrl1'}).when('/tags/:tagId', {templateUrl: '/partials/template2.html',控制器:'ctrl2'}).when('/另一个', {templateUrl: '/partials/template1.html',控制器:'ctrl1'}).otherwise({ redirectTo: '/' });});

如果使用 Chrome，您需要从服务器运行它.

I want to active html5Mode in angularJS, but I don't know why it's not working. Is there anything wrong with my code?

angular
    .module('myApp',[])
    .config(function($locationProvider, $routeProvider) {
        $locationProvider.html5Mode(true);
        $routeProvider.when('/', {
           templateUrl: 'partials/home.html', 
           controller: HomeCtrl
        });

        $routeProvider.when('/tags/:tagId', {
            templateUrl: 'partials/result.html', 
            controller: TagResultCtrl
        });
        //$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
     });

in html

  <a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>

解决方案

The only issue I see are relative links and templates not being properly loaded because of this.

from the docs regarding HTML5 mode

Relative links

Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

In your case you can add a forward slash / in href attributes ($location.path does this automatically) and also to templateUrl when configuring routes. This avoids routes like example.com/tags/another and makes sure templates load properly.

Here's an example that works:

<div>
    <a href="/">Home</a> | 
    <a href="/another">another</a> | 
    <a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>

And

app.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider
    .when('/', {
      templateUrl: '/partials/template1.html', 
      controller: 'ctrl1'
    })
    .when('/tags/:tagId', {
      templateUrl: '/partials/template2.html', 
      controller:  'ctrl2'
    })
    .when('/another', {
      templateUrl: '/partials/template1.html', 
      controller:  'ctrl1'
    })
    .otherwise({ redirectTo: '/' });
});

If using Chrome you will need to run this from a server.

这篇关于如何在 angularJS 中配置 routeProvider 和 locationProvider?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！