如何在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> 

6 Solutions collect form web for “如何在angularJS中configurationrouteProvider和locationProvider?”

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

从有关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以查看正在开发的应用程序。

希望有所帮助!

  • 如何用Angular.js实现分页/表格布局?
  • Bootstrap,Angular.js和Ember.js中使用的数据属性选项是否与Unobtrusive Javascript原则相冲突?
  • 如何将自定义validation添加到AngularJS窗体?
  • onLoad和ng-init之间的区别
  • AngularJS 1.3或AngularJS 1.2.x
  • AngularJS。 如何从控制器组件外部调用控制器function
  • 使用带有UTCdate的AngularJSdatefilter
  • ng-mouseover并留下来在angularjs中使用鼠标切换项目
  • 从jquery $ .ajax到angular $ http
  • 在angular.js中parsingJSONP $ http.jsonp()响应
  • 用简单的数组init初始化ng选项