整合jQueryMobile+AngularJs的示例分析，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
兩者都是不錯的JS編程框架，但是各自用途不同
1. jQuery Mobile提供了不錯的圖形空間，以及依賴于jQuery本身，提供了不少空間操作的API
2. Angular沒有啥控件，但是是一個很好的JS的MVC框架，以及提供了空間的數據綁定功能。
于是，開始有些開源的項目把兩者整合在一起，比如
https://github.com/opitzconsulting/jquery-mobile-angular-adapter
但是有了這個adapter，兩者就可以很好的工作了么，NO。有些問題，比如 兩者page加載方式是不一樣的，對于每個page, Angular是導航的使用route在需要的時候把page片段加載到瀏覽器的，URL類似于http://angular.github.io/angular-phonecat/step-7/app/#/phones/motorola-xoom-with-wi-fi，注意在#后面才是真正的資源地址，然后初始化資源對應的controller，這樣你可以初始化顯示數據。然后jQuery Mobile是需要一次性把所有page都加載到客戶端。這樣子的話，如果如果在jQuery Mobile中你為每個page定義一個angular的controller，那么初始化你的angular controller的時候頁面還未顯示
我們需要一個設計實現，為每個jQuery Mobile Page定義一個Angular的controller，每個controller完成對應的page的數據綁定，如何實現
1. 頁面開發使用jQuery Mobile, 我們為root body定義一個root的angular controller比如<body ng-controller="AppCtrl">
2. 導航問題：導航使用jQuery Mobile的$.mobile.changePage而不使用angular的route,因為頁面使用的jQuery Mobile寫的。頁面導航除了切換page，最重要的一點是初始化頁面數據，而因為在jQuery mobile下面，在頁面加載階段所有的controller都初始化了，你只能導航時在root controller里再去重新刷新顯示頁面的綁定數據，這樣要求所有頁面的綁定數據需要在root controller里面定義，按照angular的規則，所有的子controller都會繼承這些數據定義。定義的時候***使用結構而不是用primary type，這樣子controller可以直接飲用，比如定義一個shop的數據結構
$scope.shop = {}; $scope.shop.catelogs = null; $scope.shop.advices = []; $scope.shop.child = []; $scope.shop.products = [];3. 我往往會個導航定義一個單獨的控制器，使用它初始化page controller，比如
angular .module( 'ngPageNav', [], [ '$provide', function($provide) { $provide .factory( 'ngPageNavigator', [ '$http', function($http) { function nav($scope, $http, action, data, ignoreStack) { ..... } return { nav : nav, back : back }; } } ]);} ]).value('name', 'ngPageNav');
3. 你調用$.mobile.changePage往往頁面綁定數據變了，但是頁面不會刷新page頁面，最簡單的處理方式是往后臺send 一個dummy的請求。
4. 如果你在打開你的jQuery Mobile的時候需要直接切換到某個page，請在你的root controller里面監聽jqmInit
$scope.$on("jqmInit",function() { }看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
