Jquery mobile 单页结构中的AngularJs路由[JQM单页]_Jquery Mobile_Angularjs_Angular Routing

Jquery mobile 单页结构中的AngularJs路由[JQM单页]

jquery-mobile angularjs

Jquery mobile 单页结构中的AngularJs路由[JQM单页],jquery-mobile,angularjs,angular-routing,Jquery Mobile,Angularjs,Angular Routing,目前，我在不同的网页做路由，它将罚款 angular.module('myApp',[]).config(function ($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); $routeProvider. when("/", { templateUrl: "index.html" }). when("/foodscreen", {

目前，我在不同的网页做路由，它将罚款

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>


欢迎来到我的主页
我现在是一个移动开发者
页脚文本
欢迎来到我的主页
我现在是一个移动开发者
页脚文本

以下是我在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。这里有一个类似的链接。在pagehide事件中删除页面时出现问题。我认为更优雅的方法是简单地使用trigger（'create'）方法将jqm标记返回到页面上。希望这有帮助

你所说的单页结构是什么意思。在单页应用程序中，您的所有部分都加载到一个div。。。或者你的所有内容都在一个页面上，当你点击一个链接时，它只会在页面上下滚动并发送给你内容？我更新了我的问题，并给出了我使用的Dangular和JQM包含竞争技术的单页示例。每个模块的路由模块彼此冲突。如果您使用angular，请为移动L&F使用Twitter引导。如果您使用JQM，请使用手柄或胡须作为模板。JQM pagechange的内部结构确实会把angular的路由搞砸——我从经验中知道。如果您仍想继续使用procede@Emmentaler，谢谢您的建议。你是对的，这真的让我搞砸了我假设你想使用angularJs路由而不是jqm？我对backbonejs做了类似的事情。基本上，您需要告诉jqm不要监听散列更改，以便angularJs能够处理它。如果这是你想要的，让我知道，我可以提供一些示例代码给你。