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

问题描述

我想在angularJS活跃html5Mode，但我不知道为什么它不工作。任何毛病我codeS？

角
    .module（'对myApp'，[]）
    的.config（函数（$ locationProvider，$ routeProvider）{
        $ locationProvider.html5Mode（真）;
        $ routeProvider.when（'/'，{
           templateUrl：'谐音/ home.html做为'，
           控制器：HomeCtrl
        }）;        $ routeProvider.when（'/标签/：TAGID'，{
            templateUrl：'谐音/ result.html'，
            控制器：TagResultCtrl
        }）;
        //$routeProvider.otherwise({redirectTo：'/家，控制器：HomeCtrl}）;
     }）;


在HTML

＆LT; A HREF =标签/ {{tag.id}}＆GT;＆LT; IMG数据NG- SRC ={{tag.imageUrl}}＆GT;＆下; / A＆GT;


解决方案

我看到的是相对链接和模板没有正确加载，因为这样做的唯一问题。

方关于HTML5模式的文档

  

相对链接

  
  

请务必检查所有相关链接，图片，脚本等等。你必须要么在你的主HTML文件（＆LT头指定的URL基地;基地的HREF =/我的基地＆GT ; ），或者你必须使用绝对路径（与 / 到处开始），因为相对URL将使用的初始绝对URL解析为绝对URL文件，这是经常从应用程序的根不同

在你的情况，你可以在的href 属性添加斜线 / （ $ location.path 路由的配置时，做到这一点的自动的），并且还 templateUrl 。这样就避免了像 example.com/tags/another 路线，并确保模板正确加载。

下面是工作的例子：

 ＆LT; D​​IV＆GT;
    ＆LT; A HREF =/＆GT;家庭和LT; / A＆GT; |
    ＆LT; A HREF =/另一个＆GT;另＆LT; / A＆GT; |
    ＆LT; A HREF =/标签/ 1＆gt;标签/ 1＆LT; / A＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV NG-视图＆gt;＆LT; / DIV＆GT;
 

和

 的app.config（函数（$ locationProvider，$ routeProvider）{
  $ locationProvider.html5Mode（真）;
  $ routeProvider
    。什么时候（'/'， {
      templateUrl：/partials/template1.html'，
      控制器：CTRL1
    }）
    。当（'/标签/：TAGID'，{
      templateUrl：/partials/template2.html'，
      控制器：CTRL2
    }）
    。当（'/另一个'，{
      templateUrl：/partials/template1.html'，
      控制器：CTRL1
    }）
    不然的话（{redirectTo：'/'}）;
}）;
 

如果使用Chrome，你需要从服务器上运行这一点。

I want to active html5Mode in angularJS but I don't know why it not working. Any wrong with my codes?

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.

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