整合jQuery Mobile+AngularJs 經驗談

時間 2019-11-06

標籤整合 jquery mobile+angularjs mobile angularjs 經驗欄目 JQuery 简体版

原文原文鏈接

二者都是不錯的JS編程框架，可是各自用途不一樣jquery

1. jQuery Mobile提供了不錯的圖形空間，以及依賴於jQuery自己，提供了很多空間操做的APIgit

2. Angular沒有啥控件，可是是一個很好的JS的MVC框架，以及提供了空間的數據綁定功能。github

因而，開始有些開源的項目把二者整合在一塊兒，好比編程

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

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，好比ide

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