AngularJs маршрутизации в одной структуре страницы [JQM-Single Page]

В настоящее время я делаю маршрутизации в разных страницах и оштрафуютAngularJs маршрутизации в одной структуре страницы [JQM-Single Page]

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

через этот путь все это хорошо, но теперь я делаю заявление с AngularJs и JQuery-Mobile в одной структуре страницы, так мой вопрос в том, что, как я настроить маршрутизацию в структуре одной странице

однослойная структура Page Пример

<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>

источник

2013-10-13 Blu

Что вы подразумеваете под одной структурой страниц. Как и в одностраничном приложении, где все ваши частичные файлы загружаются в div ... или все ваше содержимое находится на одной странице, и когда вы нажимаете на ссылку, она просто просматривает страницу вверх и вниз и отправляет вас на контент ? – rjm226

Я обновил свой вопрос и дал пример одной страницы, который я использовал – Blu

Угловые и JQM содержат конкурирующие технологии. Модули маршрутизации каждого конфликта друг с другом. Если вы используете угловой, используйте Twitter Bootstrap для мобильных L & F. Если вы используете JQM, используйте рули или усы для шаблонов. Внутренности JQM pagechange действительно испортит маршрутизацию углов - я знаю по опыту. ЕСЛИ вы все еще хотите обработать https://github.com/angular-widgets/angular-jqm –

Вот как я делаю это в 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/. У меня были проблемы, когда я удалял страницу на экране. Я думаю, что более элегантный подход состоял в том, чтобы просто использовать метод trigger ('create'), чтобы получить разметку jqm на странице. Надеюсь это поможет!

источник

2013-12-23 20:16:37 bmurmistro

AngularJs маршрутизации в одной структуре страницы [JQM-Single Page]

ответ

Смежные вопросы