AngularJs 单页结构中的路由【JQM-单页】答案

【问题标题】：AngularJs routing in single page structure [JQM-Single Page]AngularJs 单页结构中的路由【JQM-单页】
【发布时间】：2013-10-13 20:17:23
【问题描述】：

目前我正在不同页面中进行路由，它会很好

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>

【问题讨论】：

单页结构是什么意思。就像在单页应用程序中一样，您的所有部分都加载到一个 div 中......或者您的所有内容都在一个页面上，当您单击链接时，它只会向上和向下滚动页面并将您发送到内容?
我更新了我的问题并给出了我使用的单页示例
Angular 和 JQM 包含相互竞争的技术。每个路由模块相互冲突。如果您使用 Angular，请使用 Twitter Bootstrap for Mobile L&F。如果您使用 JQM，请使用把手或小胡子作为模板。 JQM pagechange 的内部结构真的会搞砸 angular 的路由——我从经验中知道。如果你还想继续github.com/angular-widgets/angular-jqm
@Emmentaler 感谢您的建议。你是对的，它真的把我搞砸了
我假设您想使用 angularJs 路由而不是 jqm？我对backbonejs做了类似的事情。基本上你需要告诉 jqm 不要监听散列变化，以便 angularJs 可以处理它。如果这是您所追求的，请告诉我，我可以为您提供一些示例代码。

标签： jquery-mobile angularjs angular-routing

【解决方案1】：

这就是我在backbonejs 中的做法。样品在咖啡脚本中。首先你需要告诉 jqm 不要监听 hash 变化：

$(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 事件中删除页面时遇到了问题。我认为更优雅的方法是简单地使用 trigger('create') 方法将 jqm 标记返回到页面上。希望这会有所帮助！

【讨论】：