整合jQuery Mobile+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() {
- }
