在angular.js使用HTML5 pushState的 [英] Using HTML5 pushstate on angular.js
问题描述
我想实现HTML5的pushState的,而不是通过Angularjs使用的导航#。我试图寻找谷歌的答案,也试过没有运气的角度IRC聊天室呢。
这是我的 controllers.js
:
函数PhoneListCtrl($范围,$ HTTP){
$ http.get('手机/ phones.json')。成功(功能(数据){
$ scope.phones =数据;
});
}功能PhoneDetailCtrl($范围,$ routeParams){
$ scope.phoneId = $ routeParams.phoneId;
}功能greetCntr($范围,$窗口){
$ scope.greet =功能(){
$(#模式)了slideDown()。
}
}
app.js
angular.module('phoneapp',[])。
配置(['$ routeProvider',函数($ routeProvider){
$ routeProvider。
当('/手机',{
templateUrl:'谐音/电话list.html',
控制器:PhoneListCtrl
})。
当('/手机/:phoneId',{
templateUrl:'谐音/电话detail.html',
控制器:PhoneDetailCtrl
})。
除此以外({
redirectTo:'/电话
});
}])
注入$ locationProvider到你的配置,并设置 $ locationProvider.html5Mode(真)
。
<一个href=\"http://docs.angularjs.org/api/ng.%24locationProvider\">http://docs.angularjs.org/api/ng.$locationProvider
简单的例子:
JS:
myApp.config(函数($ routeProvider,$ locationProvider){
$ locationProvider.html5Mode(真);
$ routeProvider
。当('/第1页',{模板:page1.html',控制器:'Page1Ctrl'})
。当('/第2页',{模板:page2.html,控制器:'Page2Ctrl'})
});
HTML
&LT; A HREF =/第1页&gt;页面1 LT; / A&GT; | &所述; A HREF =/ 2页&gt;页面2'; / A&GT;
I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.
This is my controllers.js
:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
function greetCntr($scope, $window) {
$scope.greet = function() {
$("#modal").slideDown();
}
}
app.js
angular.module('phoneapp', []).
config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}])
Inject $locationProvider into your config, and set $locationProvider.html5Mode(true)
.
http://docs.angularjs.org/api/ng.$locationProvider
Simple example:
JS:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
HTML:
<a href="/page1">Page 1</a> | <a href="/page2">Page 2</a>
这篇关于在angular.js使用HTML5 pushState的的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!