混合app開發

學習目標：
  瞭解目前移動app開發的三種模式
  瞭解mvc和mvvm架構模式
  熟悉混合app的開發應用場景
  掌握混合app開發的概念
  掌握angularjs、ionic、和cordova在混合app開發中的做用、

  目前移動app開發主要分爲三種模式
  Native App 、 Web App 、Hybrid App
  原生ap是使用相應平臺特有的開發工具進開發 外觀和性能極佳 但開發成本高 由於每一種移動操做系統都須要獨立開發項目

  web App
  網頁應用程序
  須要依賴於移動端瀏覽器
  主要使用htmlo5 JavaScript css可是有侷限性 好比沒有訪問原生設備api的功能

  hybird App 混合模式移動應用
    混合app依賴於原生容器 經過該容器裏邊能夠編寫網頁程序以及調用設備api
    原理 在原生app當中嵌入輕量級的瀏覽器 html5開發部分原生功能 這樣裏邊的web app也有訪問設備api的功能


    使用混合app更加的經濟 並且節約成本 集成了原生app和 webapp的優勢
    web編寫的代碼兼容不一樣移動平臺
    使用混合app可以封裝大量的原生插件
    下降開發成本和時間成本
    目前 資訊類app 和視頻app廣泛採用native框架中嵌入web內容的混合
    好比美團 愛奇藝微信等均採用混合App開發模式


    目前流行的混合開發模式 AngularJS+ionic+Cordora

    使用基於MVC的MVVM模式開發模式

    M 數據來源
    V 數據渲染
    C事件處理

   MVVM（採用數據的雙向綁定 視圖的變更自反映在視圖模型上 MVC當中視圖依賴於模型 但模型不依賴於視圖 並且視圖能夠直接訪問模型）
   好比 表單提交
   講請求轉交給模型視圖
   模型視圖操做模型 數據更新
   模型處理完數據後通知視圖模型數據發生變化
   視圖模型更新視圖數據
   視圖講數據變化展現給用戶

   AngularJS框架採用了接近MVVM模式的實現方式

   angular特徵：模型師徒 自動化雙向數據綁定 模板 指令 服務 依賴注入 路由等 
   提供簡介的方式建立單頁面應用

   單頁面應用：
   簡單的講就是隻在一個頁面內完成整個網站的複雜頁面交互二不刷新頁面的應用

   要實現單頁面須要哪些技術
   數據來源
   數據渲染
   事件處理
   優勢：
   相應速度快
   無需加載整個頁面
   先後端分離
   後端再也不負責模板輸出
   後端API通用化
   Cordora是一個免費開源移動框架 提供了一組設備相關的api 經過這組api 移動應用可以經過JavaScript技術訪問原生的設備功能 好比攝像頭 麥克風等 基於web標準建立的所以應用程序的移植性很好
   經過Cordora的應用經過SDK打包成爲應用程序 能夠從每種設備的應用程序商店下載
   Cordora做用是將完成編碼的移動app打包成原生app 部署到特定的移動和平臺

   ionic是目前最有用簽了的一款混合式html5移動開發框架 經過sass構建應用程序
   使用標準的html css JavaScript目前支持Android和ios
   提供了大量的UI組件
   ionic最大的亮點是集成了angular Cordora
   目前用於ios7+ Android4.1+
   ionic主要爲混合app提供一個原始容器

   後邊初次認識angular須要熟悉的知識點
   瞭解angular指令
   環境配置
   模塊和控制器 （重點知識）
   做用域
   表達式 （重點知識）
   雙向綁定 （重點知識）


   angular1 （基於ES5）
   angular2（基於ES6 須要熟悉ts）
   兩個版本區別很大
   第二個版本可能須要一如第三方庫用於解決有些瀏覽器不支持ES6 的問題

   AngularJS 是經過模塊來組織、實例化、啓動應用程序的  
   angularjs 當中模塊module 的做用是存儲一組angularjs功能組件 如類 含稅 變量等 病能夠與其餘模塊產生互相依賴的關係 只經過公開的藉口與其餘模塊合做 使用者只須要關注公開的藉口
   模塊聲明的方式
   var app = angular.module('main.demo',[]);
   第二個數字用於保存該模塊因此來的其餘模塊的名稱 若是數組爲空說明模塊沒有依賴
   定義模塊後 能夠在html標籤上用ng-app指令作綁定操做
   好比爲某個div使用該模塊
  // <div ng-app="main.demo"></div>
  這個操做的做用：
  讓angular框架在指定的標籤上面啓動 並載入模塊
  載入該模塊後 在標籤內部就可使用該模塊上的各類angular功能組件 好比控制器
  控制器與ng-controller angular控制器是常規的JavaScript對象 最大做用時間做用域和模板上的html標籤綁定在一塊兒 而後html上面的angular表達式就能夠依賴於該做用域執行  一般一個控制器對應一個模板 一個模板能夠有多個控制器

  建立控制器
  app.controller("maincontroller",function($cope){//$cope爲孔子器的回調函數 參數$cope表示模塊的做用域 該cope是應用在視圖和控制器之間的紐帶 在回調函數當中能夠爲該模塊準備各類數據

  });
  爲某個div綁定該控制器
   // <div ng-controller="maincontroller"></div>
  這樣在該便籤上面中可使用控制器maincontroller所指定的全部數據

 當一個控制器被定義的時候就產生一個做用域

 <h1>{{welcome}}</h1>
<button ng-click="say()">點擊我出發angular回會話</button>
$scope.say = function(){
      $scope.welcome = "我是被注入的模塊當中的函數";
    };
控制器當中使用函數

angular全部的應用都有一個根做用域$rootScope 他能夠做用在ng-app綁定的全部html以及子元素上面 根做用域上面的值能夠在任何控制器上面使用
app.controller('myCtrl',function($scope,$rootScope){
做用域的嵌套
angular利用JavaScript的原型鏈實現做用域的嵌套關係當在當前做用域找不到相關的屬性的時候將上一級尋找 但沒法到下一級做用域尋找


表達式的使用
能夠包含 數字 字符串 運算符 函數調用等等
angular當中不會使用eval函數調用執行表達式 而是將表達式卸載插值語法中或者在指令當中輸入
例如
{{value = value+1}}
例如

例如在這裏尋找myCtrl2做用域上的值t
這是一個數組{{arr[0]}}
字符串拼接{{t+'hello'}}
{{1+2}}
{{t}}<br/>


屬性表達式
angular的屬性表達式對應的全局變量是當前做用域的
JavaScript屬性表達式對應的全局變量是window
$window 指向window
所以在angular當中 使用$window.alert();實現 JavaScript當中的alert()效果
$是angular的專屬符號用於區分開開發人員自定義的屬性的符號
在表達式執行時 angular 容許其值爲undefined 和null同時容許爲定義的函數 （不會觸發異常）
 大多時候表達式用於數據綁定的例如
 {{a.b}}

 在angular當中 不容許使用 條件判斷 循環 拋出異常 等循環控制語句
 邏輯代碼都應該寫在控制器當中


經過過濾器鏈來傳遞表達式的結果
例如將日期對象轉換爲用戶本地的時間格式或者將英文字母轉換爲大寫
name|uppercase|filter 鏈式調用過濾器
123|number:2 小數點位數

angularjs 指令
angular是結合模板和指令來向用戶呈現html視圖的 模板是如今的基本的html
指令用於輸出或者綁定表達式
ng-model=""
ng-bind=""
這些大量的ng前綴的指令 用於處理dom操做功能
指令的實質是綁定在dom元素上的函數
函數內部能夠實現調用dom 調用方法 定義行爲 綁定控制器和對象等
、指令會在瀏覽器解析dom元素時和元素的其餘屬性同樣被解析

自動化雙向數據綁定
單向綁定即任何對數據模型或者相關內容的概念都不會自動化反映帶視圖上面
雙向數據 是當視圖發生改變的時候 數據模型也會發生變化
數據模型發生變化 視圖也會發生變化



angular指令 
學習目標：
熟悉經常使用的內置命令
如何自定義命令
掌握ng-repeat 指令的使用方法
自定義指令的約束
指令的做用域


根據使用場景和做用能夠將指令分爲裝飾器型指令deractor和組件型指令component
裝飾器指令：爲dom添加行爲 ng-click ng-hide ng-show 控制dom的顯示和隱藏 
負責搜索頁面數據的bi8anhua 而後利用髒檢查機制 保持數據視圖與做用域數據的同步

組件型： 包含業務須要的視圖和交互邏輯 例如彈出框 上拉菜單 組件型指令具備高內聚（組件內部實現了他應該包含的功能） 低耦合（與外部組件之間儘可能少地互相依賴）的特色


內置指令大體分爲：
程序控制類指令、
ng-app 初始化一個應用程序 該元素也是跟做用域的起始點
初始化 
ng-init="h='root'"
ng-controller 在控制器當中編寫屬性和方法

數據綁定類指令、
ng-model 將某個做用域內的數據綁定到表單控件上
ng-bind 使用給定的變量或者表達式的值替換html的內容
{{h}}<br/>
      替換<span ng-bind="h">替換掉這裏邊的值</span><br/>
狀態設置指令、
用於改變元素的顯示狀態 爲元素綁定樣式 設置元素只讀和禁用 設置顯示和隱藏等
ng-style
ng-class
ng-readonly 只讀 會被提交
ng-disabled  無效 不會被提交
ng-hide
ng-show

事件綁定類指令、
ng-click
ng-dbclick
ng-focus  支持a input select textarea window對象
ng-blur 支持a input select textarea window對象
ng-change 支持input select textarea  

訪問流程類指令
ng-if 若是裏邊的值爲真則 往html當中添加元素 不然不添加元素
bg-switch 分支判斷 該指令根據表達式顯示或隱藏對應的部分 
ng-repeat 循環集合 輸出指定次數的html元素 這裏的集合必須爲數組或者對象

遍歷數組  item in collection
遍歷對象 (key,value) in collection 同時 輸出key


和加載處理類指令等




爲了由於數組出現重複值沒法正確輸出的問題這裏能夠這樣寫
item in goods track by $index


加載處理類指令
用於解決angularjs應用在加載時代碼未加載完的問題
ng-cloak 防止angular代碼由於代碼爲完成加載而出現閃爍的問題{{angular}} 解決方法在須要防止閃爍的地方添加 ng-cloak以及引入angular-csp.js文件 實現理論 這個css文件做用在設置了ng-cloak的元素在angular未加載的時候不顯示該元素
ng-src 防止src值爲angular代碼 此時使用ng-src 中的值 確保在angular代碼執行以前不顯示圖片
ng-href

自定義指令

屬性：
template 
String：若是爲字符串類型此時能夠是一段html
function 返回值爲html並且接受兩個參數 tElement 使用該函數的指令 tAttrs 使用該指令的元素的屬性的集合 爲一個對象
replace
false 不替換使用該指令的元素的元素 而是追加到這個元素的內部
true 直接替換子元素
templateUrl 
function 接受兩個參數 tElement tAttrs 
transclude 
boolean 是否保留原來的元素的子元素


還可設置自定義指令的約束
E html元素形式標記
C css 類名形式
M 註釋的方式
A html屬性的方式
app.directive('myDerective',function(){
    return {
      template:"<span>算法分析</span>",
      replace:true,//直接替換掉原來的元素
      restrict:"ECMA" //默認爲A 
    }
  });//自定義指令



  angular相關原理
  瞭解angular中國MVVM實現方式
  熟悉angular啓動流程
  髒檢查機制的實現原理
  $waich()函數和$apply()函數的做用
  熟悉依賴注入和控制反轉
  掌握angular的三種依賴注入方式


  view 轉註界面的顯示和渲染 包含聲名指令和html標籤的視圖模板
  viewModel $scope充當了viewModel角色 負責view和Model的交互和協助 view利用用戶界面的交互操做model model爲view提供數據
  Mode是與程序的業務邏輯相關的數據的封裝載體
  controller 負責viewModel的初始化 組合多個服務來獲取業務領域Model的數據 將數據放在viewModel上面
  對於Model的變化也會反映在viewModel上面切經過髒檢查機制 $digest來更新到view上面


  首先考慮數據結構 而後設計數據交換和邏輯 最後實現視圖

  啓動流程
  在angular啓動時 帶有指令的html 模板會被解析器解析渲染成視圖