angular+ionic前後端分離開發項目中的使用

Ionic基於AngularJS構建而成，所以學習一些AngularJS的知識很有必要。Ionic並沒有獨立開發一套完整的Web應用框架，而是對AngularJS進行了擴展，給它添加了大量界面組件和其他的移動端友好的特性。 1.index.html 首先會進入index頁面，裡面引入了angular ...

　　Ionic基於AngularJS構建而成，所以學習一些AngularJS的知識很有必要。Ionic並沒有獨立開發一套完整的Web應用框架，而是對AngularJS進行了擴展，給它添加了大量界面組件和其他的移動端友好的特性。

1.index.html

　　首先會進入index頁面，裡面引入了angularjs， cordova等js支持，此外還有app.js, controllers.js, services.js等文件。ng-app=" "，是入口相當於java中的main方法，ng-init進行初始化。

　　之後：

<ion-nav-bar class="bar-stable">
      <ion-nav-back-button>
      </ion-nav-back-button>      
    </ion-nav-bar>

　　導航欄 : ion-nav-bar

　　回退按鈕 : ion-nav-back-button

<ion-nav-view></ion-nav-view>

　　導航視圖 : ion-nav-view　　　　路由對應的頁面，用來答題angular中的ui-view 指令　　導航中的模板內容將被插入此處

<script id="browser.html" type="text/ng-template">
    <ion-modal-view>... ...</ion-modal-view>
</script>        

<script id="eletterBrowser.html" type="text/ng-template">
    <ion-modal-view>... ...</ion-modal-view>
</script>

　　angular模板載入：type="text/ng-template"是指明這是ng模板，id屬性是指實際使用模板時的一個引用，標簽之間的內容才是實際的模板內容。而且，需要註意，id絕對不是URL，這個script標簽絕對不會發出HTTP請求。　　參考：https://blog.csdn.net/yczz/article/details/48316167

　　ionic 模態視窗：ion-modal-view　　在service.js中註入了$ionicModal，進行初始化操作：fromTemplate(templateString, options) ，templateString可以是id的值"browser.html"

　　　　效果類似於點擊“用戶協議”之後，會彈出用戶協議具體內容

　　　　參考：http://www.runoob.com/ionic/ionic-ion-modal.html

　　　　　　　https://www.cnblogs.com/CheeseZH/p/4522264.html

2.app.js是主程式，包含一些設置和啟動腳本angular.module('ePolicy', ['ionic', 'ePolicy.controllers', 'ePolicy.services', 'ePolicy.directives', 'ePolicy.filters', 'ionic-datepicker','ionic-datepickerg', 'jm.i18next'])

.run(function($ionicPlatform, $rootScope, $state, $ionicHistory,HttpRequest, $i18next, DeviceInfo, Authorization, LocalStorage, Prompt, HotPush,$location, NoticeCenter, UserAgent, $ionicActionSheet,JPush) {
    $ionicPlatform.ready(function() {
　　　　// splash 放在最前面熱更新才會起作用
　　　　// lang
　　　　//狀態欄(StatusBar)
　　　　//... ...
    }
　　//全局變數
　　$rootScope.
　　// 返回鍵退出 
　　$ionicPlatform.registerBackButtonAction(function(e) {}
　　// 狀態監聽
　　$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, lionShow) {}
}

　　解釋：

　　angular中一切是基於模塊的angular.module

　　run方法初始化全局數據，只對全局作用域起作用，如$rootScope.多個控制器之間可以共用數據　　angular.run和angular.config的區別

　　$ionicPlatform.ready事件是用於檢測當前的平臺是否就緒的事件，相當於基於document的deviceready事件, 在app中一些通用關於設備的設置必須在這個事件中處理

　　$ionicPlatform.registerBackButtonAction

　　$rootScope.$on('$stateChangeStart')：監聽狀態的改變

　　　　$ionicPlatform文檔:http://www.ionic.wang/js_doc-index-id-56.html

.config(function($ionicConfigProvider,$compileProvider, $sceDelegateProvider, $httpProvider, $stateProvider, $urlRouterProvider, $i18nextProvider) {
　　
        $stateProvider
        .state('tab', {
            url: '/tab',
            abstract: true,
            templateUrl: 'templates/tabs.html',
            controller: 'TabsCtrl'
        })

        .state('tab.home', {
            url: '/home',
            views: {
                'tab-home': {
                    templateUrl: 'templates/tab-home/tab-home.html?version=20170917',
                    controller: 'HomeCtrl'
                }
            }
        })
        //... ...
        ;
        $urlRouterProvider.otherwise('/tab/home');
}

　　解釋：

　　ui-Router文檔：https://blog.csdn.net/mcpang/article/details/55101566

$state / $stateProvider：管理狀態定義、當前狀態和狀態轉換。包含觸髮狀態轉換的事件和回調函數，非同步解決目標狀態的任何依賴項，更新$location到當前狀態。由於狀態包含關聯的 url，通過$urlRouterProvider生成一個路由規則來執行轉換的狀態。
ui-view指示器：渲染狀態中定義的視圖，是狀態中定義的視圖的一個占位符。
$urlRouter / $urlRouterProvider：管理了一套路由規則列表來處理當$location發生變化時如何跳轉。最低級的方式是，規則可以是任意函數，來檢查$location，併在處理完成時候返回true。支持正則表達式規則和通過$urlMatcherFactory編譯的UrlMatcher對象的 url 占位符規則。
state(name,stateConfig);

　　參數：

name：狀態的名稱。
stateConfig：狀態配置對象。配置具有以下各項屬性：
template： string/function，html模板字元串，或者一個返回html模板字元串的函數。
templateUrl：string/function，模板路徑的字元串，或者返回模板路徑字元串的函數。
templateProvider：function，返回html模板字元串或模板路徑的服務。
controller：string/function，新註冊一個控制器函數或者一個已註冊的控制器的名稱字元串。
controllerProvider：function，返回控制器或者控制器名稱的服務
controllerAs：string，控制器別名。
parent：string/object，手動指定該狀態的父級。
resolve：object，將會被註入controller去執行的函數，<string,function>形式。
url：string，當前狀態的對應url。
views：object，視圖展示的配置。<string,object>形式。
abstract：boolean，一個永遠不會被激活的抽象的狀態，但可以給其子級提供特性的繼承。預設是true。
onEnter：function，當進入一個狀態後的回調函數。
onExit：function，當退出一個狀態後的回調函數。
reloadOnSearch：boolean，如果為false，那麼當一個search/query參數改變時不會觸發相同的狀態，用於當你修改$location.search()的時候不想重新載入頁面。預設為true。
data：object，任意對象數據，用於自定義配置。繼承父級狀態的data屬性。換句話說，通過原型繼承可以達到添加一個data數據從而整個樹結構都能獲取到。
params：url里的參數值，通過它可以實現頁面間的參數傳遞。

　　name必須是唯一，相當於id，跳轉可以通過$state.go(name);

　　地址欄跳轉或a標簽的href通過url跳轉。

　　項目中views有三個tabs

　　　　tab-home、tab-my、tab-policy，每個tab下麵有templateUrl和controller對應，（多個頁面可共用一個controller，但一個頁面不能有多個controller）

　　ionic tab(選項卡)：在tabs.html頁面

<ion-tabs class="tabs-icon-top tabs-color-active-assertive" ng-class="hideTabs">

  <!-- Home Tab -->
  <ion-tab title="{{'tabs.home' | i18next}}" icon-off="ion-ios-home-outline-custom" icon-on="ion-ios-home-custom" ng-click="click()">
    <ion-nav-view name="tab-home">
    </ion-nav-view>
  </ion-tab>
  <!-- Policy Tab -->
  <ion-tab title="{{'tabs.policy' | i18next}}" icon-off="ion-ios-paper-outline-custom" icon-on="ion-ios-paper-custom"  ng-click="turn('policy')">
    <ion-nav-view name="tab-policy"></ion-nav-view>
  </ion-tab>

  <!-- My Tab -->
  <ion-tab title="{{'tabs.my' | i18next}}" icon-off="ion-ios-person-outline-custom" badge="badges.carts" badge-style="badge-assertive"icon-on="ion-ios-person-custom" ng-click="clickMy()">
    <ion-nav-view name="tab-my"></ion-nav-view>
  </ion-tab>
</ion-tabs>

　　api：http://www.runoob.com/ionic/ionic-tab.html

　　其他模板頁面：模板視圖 : ion-view

　　　　　　　　　　ionContent易用的內容區域，該區域可以用Ionic的自定義滾動視圖進行配置，或瀏覽器內置的溢出滾動。

指令：directive

$ionicView.beforeEnter　　視圖是即將進入併成為活動視圖。

$ionicView.beforeLeave　　視圖將被關閉並且不是活動頁面。

ionic中關於ionicView 的生命周期：https://www.cnblogs.com/fangshidaima/p/5894086.html

Angularjs 利用 $on、$emit和$broadcast傳值，利用$watch監聽模型變化：https://blog.csdn.net/missa_fei/article/details/52212319

問題：

項目中input框中的{{name}}數據綁定bug，頁面數據在js中可以獲取，但是在js中通過$scope.name = "zhangsan",頁面是undefined,

解決：$scope.name = {name:"zhangsan"}//賦值成對象，頁面通過{{name.name}}就可以實現數據綁定

總結angular+ionic項目中的問題：https://www.cnblogs.com/momozjm/p/6929656.html?utm_source=itdadao&utm_medium=referral

    .directive('timerbutton', function($interval, $i18next, Items, $timeout, HttpRequest, Authorization, Prompt) {
        return {
            restrict: 'AE',
            link: function(scope, element, attrs) {
                scope.timer = false;
                scope.timeout = 60000;
                scope.timerCount = scope.timeout / 1000;
                scope.text = "獲取驗證碼";
                scope.onClick = function() {
                    if(scope.mobileTel.mobileTel == undefined || scope.mobileTel.mobileTel == "") {
                        Prompt.showOnce($i18next("lamessage.APP00015"));
                        return false;
                    };
                    var temp = scope.mobileTel.mobileTel.substring(0, 1);
                    var temp2 = scope.mobileTel.mobileTel.length;
                    if(temp != "1" || temp2 != 11) {
                        Prompt.showOnce($i18next("lamessage.APP00016"));
                        return false;
                    };
                    HttpRequest.query('Policy/getUserInfo/' + Authorization.getLoginVO().userid, true)
                        .success(function(data) {
                            var userInfo = angular.fromJson(data.policyBeanVO.pipBenfRec);
                            var mobileTel = userInfo.clientEnqRec.mobileTel;
                            if(mobileTel==scope.mobileTel.mobileTel){
                        scope.showTimer = true;
                        scope.timer = true;
                        scope.text = "秒後重新獲取";
                        var counter = $interval(function() {
                            scope.timerCount = scope.timerCount - 1;
                        }, 1000);
                        $timeout(function() {
                            scope.text = "獲取驗證碼";
                            scope.timer = false;
                            $interval.cancel(counter);
                            scope.showTimer = false;
                            scope.timerCount = scope.timeout / 1000;
                        }, scope.timeout);
                            HttpRequest.query("Policy/Sms/" + Authorization.getLoginVO().userid + "/" + Authorization.getLoginVO().user.sevrbrh + "/" + scope.mobileTel.mobileTel, true)
                            .success(function(data) {
                                var policyBeanVO = data.policyBeanVO;
                                if(policyBeanVO.message.code != 0) {
                                    Prompt.showOnce(policyBeanVO.message.message);
                                    return false;
                                } else {
                                    scope.validCode = policyBeanVO.message.message;
                                    Items.removeAll();
                                    Items.add(scope.validCode);
                                };
                            });
                        }else{
                            Prompt.showOnce("手機號與系統預留不一致，請核對後重新輸入");
                            return false;
                        }
                    });
                }
            },
            template: '<button on-tap="onClick()"  class="button button-small button-assertive" ng-disabled="timer"><span ng-if="showTimer">{{ timerCount }}</span>{{text}}</button>'
        };
    })

View Code

<timerbutton  show-timer="false">{{'selfservice.Getcode' | i18next}}</timerbutton>