在angular.js使用HTML5 pushState的 [英] Using HTML5 pushstate on angular.js

查看:116
本文介绍了在angular.js使用HTML5 pushState的的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想实现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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆