整合jQuery Mobile+AngularJs 經(jīng)驗談
兩者都是不錯的JS編程框架，但是各自用途不同
1. jQuery Mobile提供了不錯的圖形空間，以及依賴于jQuery本身，提供了不少空間操作的API
2. Angular沒有啥控件，但是是一個很好的JS的MVC框架，以及提供了空間的數(shù)據(jù)綁定功能。
于是，開始有些開源的項目把兩者整合在一起，比如
https://github.com/opitzconsulting/jquery-mobile-angular-adapter
但是有了這個adapter，兩者就可以很好的工作了么，NO。有些問題，比如 兩者page加載方式是不一樣的，對于每個page, Angular是導(dǎo)航的使用route在需要的時候把page片段加載到瀏覽器的，URL類似于http://angular.github.io/angular-phonecat/step-7/app/#/phones/motorola-xoom-with-wi-fi，注意在#后面才是真正的資源地址，然后初始化資源對應(yīng)的controller，這樣你可以初始化顯示數(shù)據(jù)。然后jQuery Mobile是需要一次性把所有page都加載到客戶端。這樣子的話，如果如果在jQuery Mobile中你為每個page定義一個angular的controller，那么初始化你的angular controller的時候頁面還未顯示
我們需要一個設(shè)計實現(xiàn)，為每個jQuery Mobile Page定義一個Angular的controller，每個controller完成對應(yīng)的page的數(shù)據(jù)綁定，如何實現(xiàn)
1. 頁面開發(fā)使用jQuery Mobile, 我們?yōu)閞oot body定義一個root的angular controller比如<body ng-controller="AppCtrl">
2. 導(dǎo)航問題：導(dǎo)航使用jQuery Mobile的$.mobile.changePage而不使用angular的route,因為頁面使用的jQuery Mobile寫的。頁面導(dǎo)航除了切換page，最重要的一點是初始化頁面數(shù)據(jù)，而因為在jQuery mobile下面，在頁面加載階段所有的controller都初始化了，你只能導(dǎo)航時在root controller里再去重新刷新顯示頁面的綁定數(shù)據(jù)，這樣要求所有頁面的綁定數(shù)據(jù)需要在root controller里面定義，按照angular的規(guī)則，所有的子controller都會繼承這些數(shù)據(jù)定義。定義的時候***使用結(jié)構(gòu)而不是用primary type，這樣子controller可以直接飲用，比如定義一個shop的數(shù)據(jù)結(jié)構(gòu)
- $scope.shop = {};
- $scope.shop.catelogs = null;
- $scope.shop.advices = [];
- $scope.shop.child = [];
- $scope.shop.products = [];
3. 我往往會個導(dǎo)航定義一個單獨的控制器，使用它初始化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. 你調(diào)用$.mobile.changePage往往頁面綁定數(shù)據(jù)變了，但是頁面不會刷新page頁面，最簡單的處理方式是往后臺send 一個dummy的請求。
4. 如果你在打開你的jQuery Mobile的時候需要直接切換到某個page，請在你的root controller里面監(jiān)聽jqmInit
- $scope.$on("jqmInit",function() {
- }
