Question

目前我正在不同页面进行路由，并且没问题

angular.module('myApp',[]).config(function ($routeProvider, $locationProvider)
{
    $locationProvider.html5Mode(true);
    $routeProvider.
    when("/",
    {
        templateUrl: "index.html"
    }).
    when("/foodscreen",
    {
        templateUrl: "addfood.html"
    })
});

通过这种方式一切都很好，但现在我在单页结构中使用AngularJs和JQuery-Mobile进行应用，所以我的问题是如何在单页结构中配置路由

单页结构示例

<body>
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Welcome To My Homepage</h1>
    </div>
    <div data-role="content">
        <p>I Am Now A Mobile Developer!!</p>
    </div>
    <div data-role="footer">
        <h1>Footer Text</h1>
    </div>
</div>

Answer 1

以下是我在backbonejs中的表现。样品是咖啡脚本。首先，你需要告诉jqm不要监听哈希变化：

$(document).on "mobileinit", ->
  # Prevents all anchor click handling including the addition of active button state and alternate link bluring.
  $.mobile.linkBindingEnabled = false
  # Disabling this will prevent jQuery Mobile from handling hash changes
  $.mobile.hashListeningEnabled = false
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;

主干中的示例路由配置：

routes:
  "": "home"
  "home": "home"

home: ->
  $.mobile.loading "show"
  currentView = new HomeView(
    el: "#home"
    model: new HomeModel()
  )
  # render the page... view is using underscorejs for applying templates
  currentView.render()
  # need to apply jqm styles...
  $(currentView.el).trigger('create');
  # now use jqm to change the page
  $.mobile.changePage "#" + currentView.el.id,
    reverse: false
    changeHash: false

路由部分特定于backbonejs。这是一个类似http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/的链接。当我在pagehide事件中删除页面时，我遇到了问题。我认为更优雅的方法是简单地使用触发器（'create'）方法来获取页面上的jqm标记。希望这有帮助！

单页结构中的AngularJs路由[JQM-Single Page]

1 个答案: