如何在angularJS中配置routeProvider和locationProvider？

小编典典

如何在angularJS中配置routeProvider和locationProvider？

angularjs

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

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});
     });

在HTML

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

阅读 218

2020-07-04

共1个答案

小编典典

我看到的唯一问题是相对链接和模板因此无法正确加载。

来自有关HTML5模式的文档

相对链接

请务必检查所有相对链接，图像，脚本等。您必须在主html文件（<base href="/my- base">）的开头指定网址库，或者必须/在所有地方都使用绝对网址（以开头），因为相对网址将解析为绝对网址使用文档的初始绝对URL，该URL通常与应用程序的根目录不同。

在您的情况下，可以/在href属性中添加正斜杠（
自动$location.path执行此操作），也可以在配置路由时添加正斜杠。这样可以避免出现类似的路由，并确保模板正确加载。
__templateUrl``example.com/tags/another

这是一个有效的示例：

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

和

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: '/' });
});

如果使用的是Chrome，则需要从服务器上运行。

2020-07-04