如何在angularJS中configurationrouteProvider和locationProvider？

我想在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>

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

从有关HTML5模式的文档

相对链接

一定要检查所有相关的链接，图像，脚本等。您必须指定主要html文件（ <base href="/my-base"> ）的头部的url base，或者您必须使用绝对url / ），因为相对URL将通过使用文档的初始绝对URL（通常与应用程序的根目录不同）parsing为绝对URL。

在你的情况下，你可以添加一个正斜杠/ href属性（ $location.path 自动执行此操作），也可以在configuration路由时添加到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，则需要从服务器运行。

尝试这个

如果您将应用程序部署到根上下文（例如https://myapp.com/ ），请将基本URL设置为/：

 <head> <base href="/"> ... </head>

有angular度的文件

AngularJS提供了一个简单而简洁的方法，使用$routeProvider对象将路由与控制器和模板相关联。当最近更新应用程序到最新版本（当前1.2 RC1）时，我意识到$routeProvider在标准angular.js脚本中不再可用。

通过阅读更改日志后，我意识到路由现在是一个单独的模块（我认为是一个伟大的举措），以及animation和其他一些。因此，如果您正在转向1.2版本（或将来版本），那么标准模块定义和如下所示的configuration代码将不再起作用：

 var app = angular.module('customersApp', []); app.config(function ($routeProvider) { $routeProvider.when('/', { controller: 'customersController', templateUrl: '/app/views/customers.html' }); });

你如何解决它？

除了angular.js之外，还可以在页面中添加angular-route.js（在这里抓住angular-route.js的一个版本 – 记住它是一个将被更新的版本候选版本），并将模块定义更改为下列：

 var app = angular.module('customersApp', ['ngRoute']);

如果您使用的是animation，则需要angular-animation.js，还需要引用相应的模块：

  var app = angular.module('customersApp', ['ngRoute', 'ngAnimate']);

您的代码可以如下所示：

  var app = angular.module('app', ['ngRoute']); app.config(function($routeProvider) { $routeProvider .when('/controllerone', { controller: 'friendDetails', templateUrl: 'controller3.html' }, { controller: 'friendsName', templateUrl: 'controller3.html' } ) .when('/controllerTwo', { controller: 'simpleControoller', templateUrl: 'views.html' }) .when('/controllerThree', { controller: 'simpleControoller', templateUrl: 'view2.html' }) .otherwise({ redirectTo: '/' }); });

以下是如何使用requireBase=false标志来configuration$ locationProvider以避免设置基础href <head><base href="/"></head> ：

 var app = angular.module("hwapp", ['ngRoute']); app.config(function($locationProvider){ $locationProvider.html5Mode({ enabled: true, requireBase: false }) });

你可以尝试：

 <a href="#/controllerone">Controller One</a>|| <a href="#/controllerTwo">Controller Two</a>|| <a href="#/controllerThree">Controller Three</a> <div> <div ng-view=""></div> </div>

@简单的解决scheme

我使用一个简单的Python HTTP服务器。当在有问题的Angular应用程序的目录中（使用Mavericks 10.9和Python 2.x的MBP），我只需运行

python -m SimpleHTTPServer 8080

然后，在端口8080上设置简单的服务器，让您在浏览器上访问localhost:8080以查看正在开发的应用程序。

希望有所帮助！

如何在angularJS中configurationrouteProvider和locationProvider？

相对链接

Angularcheckbox和ng-click

在AngularJs中按date降序sorting

Angularjs简单的文件下载

angular.js ng-repeat创build网格

Angular和Express路由

如何在AngularJs中用ng-repeat过滤（key，value）？

AngularJS：了解devise模式

在AngularJs中调用Ajax调用

在ng-init中声明多个值

如何在angularjs中创build简单的拖放操作