混合app開發(fā)基礎(chǔ)-1、課件筆記

第1章移動開發(fā)基礎(chǔ)介 混合開發(fā)介 介紹今天主要內(nèi)容學(xué)習(xí)內(nèi) App開發(fā)方式介 App三種開發(fā)方式對 App三種開發(fā)方式原理介 混合APP開 企業(yè)為什么選擇Hybrid開 如何選擇APP的開發(fā)方 流行開發(fā)方式介 Html5+介 Ionic介 ReactNative介 JqueryMobile介 AppCan介 移動開發(fā)基礎(chǔ)知識介 Cordova介 Ng-cordova介 ES6介 Angular介 Angular2介 Ionic2介 第2章學(xué)習(xí)方法介 思想態(tài) 新技術(shù)學(xué)習(xí)的本 如何學(xué)習(xí) 每天都應(yīng)該上的幾個 第3章Ionic 對照官網(wǎng)和PPT過 代碼演示效果和 第4章Ionic 對照官網(wǎng)和PPT過 代碼演示效果和 石第1章混合app開發(fā)課程介application（應(yīng)用web前端的知識開發(fā)出來app的方式就叫做混合app開“錢”有移動開發(fā)經(jīng)驗的開發(fā)人員比普通的web前端開發(fā)人員工資要高出一截我們用學(xué)過的前端知識可以開發(fā)出一個可以安裝在里面的app。下面的截圖就是用混合開發(fā)中Ionic框架方式開發(fā)第2章混合開發(fā)簡appWebApp:就是在瀏覽器中運行的web應(yīng)NativeApp:用android和Object-C等原生語言開發(fā)的應(yīng)HybridApp:就是外面是原生的殼，里面是webapp應(yīng)用，兼具2者的優(yōu)企業(yè)要根據(jù)自身的特點進(jìn)行app開發(fā)方式的選擇，不要為了混合而混合?；旌蟖pp的開發(fā)方式是未來的主流趨勢。第3章流行開發(fā)框架介JqueryReact首先要認(rèn)識Html5+是什么HTML5，簡稱“HTML5+”，是為了更好的推進(jìn)HTML5的、更好的為HTML5開發(fā)者服務(wù)而由產(chǎn)業(yè)鏈主流廠商共同組成的一個。致力于整合資源，建立圍繞HTML5開發(fā)者的生態(tài)系統(tǒng)，通過共同為HTMLl5開發(fā)者服務(wù)。W3C的指導(dǎo)單位CSDN和DCloud是的處單位Dcloud官官網(wǎng)Emmet語法:HBuilder：是一款web開發(fā)工具。它能大幅提升開發(fā)效率，對程序員也設(shè)計了更人文的UI，它包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。到現(xiàn)在5+Runtime：是一個H5的增強(qiáng)引擎。這是一個可以去調(diào)用H5的能力和原生操作系統(tǒng)的產(chǎn)品。MI框架：是高性能的前端框架，可用開發(fā)高性能pp，也是目前最接近原生p效果的框架，可以有效解決HTM5原生開發(fā)中遇到的部分問題，同時體積也小。應(yīng)用流：會讓用戶感覺一點開就可以用，這也是現(xiàn)有的應(yīng)用方式的要因素，給最終用戶去使用應(yīng)用有更好的體驗。Html5+的優(yōu)提供了一個自定制的IDE工具，支持非常好，輕量級，甚至不需要安裝直開發(fā)出來的app的性能很好，用戶體驗很高豐富的api支持，號稱有40萬+Html5+的缺打包比較麻現(xiàn)在那些公司在用Ionic官網(wǎng)地Ionic官網(wǎng) Ionic中文網(wǎng)首先要認(rèn)識Ionic框架IONIC是目前最有潛力的一款HTML5應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。它使用JavaScriptMVVM框架和AngularJS來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它Web和移動開發(fā)者的共同選擇。Ionic是一個專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于平臺原生應(yīng)用的一個開發(fā)框架。Ionic框的目的是從web的角度開發(fā)應(yīng)用，基于PhoneGap的編譯平臺，可以實現(xiàn)Ionic框架構(gòu)CSS框架-提供原生App質(zhì)感的CSS樣式模擬。ionic這部分的實現(xiàn)使用了ionicons圖標(biāo)樣式庫。JavaScript-提供移動Web應(yīng)用開發(fā)框架。ionic基于AngularJS基礎(chǔ)框架開發(fā)，遵循AngularJS的框架約束ionic使用AngularJSUIRouter實現(xiàn)前端路由。命令行/CLI-命令行工具集用來簡化應(yīng)用的開發(fā)、構(gòu)造和仿真運行。ionic命令行工具使用了Cordova，依賴于平臺SDK（Android&iOS）實現(xiàn)將移動Web項目打包成原生App。Ionic特基于Angular語法，簡單易是一個輕量級框架。性能優(yōu)越，運行速度快完美的融合下一代移動框架，支持Angularjs的特性MVC，代碼易護(hù)提供了漂亮的設(shè)計SASS構(gòu)建應(yīng)用程序，它提供了很多UI組件專注原生，讓你看不出混合應(yīng)用和原生的區(qū)提供了強(qiáng)大 令行工具。Ionic開發(fā)有哪些由于ionic使用了HTML5和CSS3的一些范，所以要求iOS7+/在低于這些版本的上使用ionic開發(fā)的應(yīng)用，有時會發(fā)生莫名其妙的現(xiàn)在那些公司再用Ionic ReactNative官網(wǎng)地RN官網(wǎng)RN中文網(wǎng) Reactnative原理ReactNative實現(xiàn)是什么ReactNative里面webview，這貨Hybridapp，里面執(zhí)行JS是用的JavascriptCore。把Nativecode十來個最基本的類（RCTDeviceEventEmitter、RCTRenderingPerf等）、或組件（RCTView、RCTTextField、RCTTextView、RCTModalFullscreenView等）封裝成二十來個基本組件（Popover、Listview實現(xiàn)了一套類似css的子集，用來解決樣式問題，相當(dāng)復(fù)雜和強(qiáng)大，靠這個才能將Native的組件組成JS層的基本組件再組成業(yè)務(wù)端的業(yè)務(wù)組件ReactNative中，寫JS的工程師解決的是「將基本組件拼裝成可用的React組件」的問題，寫NativeCode的工程師解決的是「提供組件，提供ReactNative不用Webview，徹底擺脫了Webview讓人不爽的交互和性能問題有較強(qiáng)的擴(kuò)展性，這是因為Native端提供的是基本控件，JS可以自由組合可以直接使用Native原生的「?！箘赢??？梢酝ㄟ^更新遠(yuǎn)端JS，直接更新app?，F(xiàn)在那些公司在用React淘寶部分功能也在用這個東JqueryMobile官網(wǎng)地官網(wǎng)地址 中文網(wǎng)地址/jquerymobile APi學(xué)習(xí)地址http: JqueryMobilejQueryMobile是一個為觸控優(yōu)化的web框架，用于創(chuàng)建web應(yīng)用程jQuery適用于所有流行的智能和平板電jQueryMobile構(gòu)建于jQuery庫之上，這使其更易學(xué)習(xí)，如果您通jQuery的話它使用HTML5、CSS3、JavaScriptAJAX通過盡可能少的代碼來完成AppCan官網(wǎng)地官網(wǎng)地址 首先來認(rèn)識AppCan是什么開發(fā)平臺是基于HTML5技術(shù)的跨平臺移動應(yīng)用快速開發(fā)一體化解決方案。開發(fā)者利用HTML5+CSS3+JavaScript技術(shù)可以快速地開發(fā)與本 平臺提供了UI快速開發(fā)框架、本地功能調(diào)用API接口、應(yīng)用打包系統(tǒng)、IDE集成開發(fā)環(huán)境和本地應(yīng)用調(diào)試模擬接口，人性化的開發(fā)環(huán)境，豐富的開發(fā)資源，強(qiáng)大的服務(wù)支持，使開發(fā)者可誰在用項目演示 第4章學(xué)習(xí)方法介積極努懂得取舍，莫一門新技術(shù)無非就是一些新概念的提出，伴隨著一套完整的規(guī)則約1、官網(wǎng)看2、官網(wǎng)看不懂找相應(yīng)的中文3、根據(jù)快速開始的指引或者從上找一些快速開始的kit學(xué)習(xí)，勤習(xí)，至少要把大部分的api都搞過一次。4、加qq群 5、搜博每天都應(yīng)該上的幾個Cnode社第5章Ionic框架主要技術(shù)介Cordova官網(wǎng)地官網(wǎng)地址Cordova是什Cordova提供了一組設(shè)備相關(guān)的API，通過這組API，移動應(yīng)用能夠以JavaScript原生的設(shè)備功能，如頭、麥克風(fēng)等。Cordova支持如下移動操作系統(tǒng)：iOSAndroid,ubuntuphoneosBlackberry,WindowsPhone,PalmWebOS,Bada和Symbian。phonegap的關(guān)系Cordova是貢獻(xiàn)給Apache后的開源項目，是從PhoneGap中抽出的代碼，目前(PhoneGap和ApacheCordova之間的)唯一區(qū)別是的包的名字，這Ng-cordova官網(wǎng)地官網(wǎng)地址 Ng-cordova是什么ngCordova是在CordovaApi基礎(chǔ)上封裝的一系列開源的AngularJs服務(wù)和指令擴(kuò)展，讓開發(fā)者可以方便的在HybridApp開發(fā)中調(diào)用設(shè)備能力，即可以在AngularJs代碼中設(shè)備能力Api。cordova插件的sucesserrorjs回調(diào)方法中，是無法使用angularjs$scope對象和注入的方法的，只能全局的方法和變量，這樣會導(dǎo)致很多麻煩，必須使用傳統(tǒng)的js方法寫很多難看的代碼。使用ngCordova應(yīng)該可以解決Angular官網(wǎng)地Angular中文 Angular官 Angular是什么AngularJS誕生于2009年，由MiskoHevery等人創(chuàng)建，后為所購。是一款優(yōu)秀的前端JS框架，已經(jīng)被用于的多款產(chǎn)品當(dāng)中。AngularJS有著諸多特性，最為的是：MVVM、模塊化、自動化雙向數(shù)據(jù)Angular優(yōu)點有哪些模板功能強(qiáng)大豐富，并且是式的，自帶了豐富Angular指是一個比較完善的前端MV*（MVW:Model-View-Whatever）框架，包含自定義ective，比jQuey插件還靈活，但是需要深入了解ective的一些特性，簡單的封裝容易，復(fù)雜一點沒有提供詳細(xì)的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在diectve使用$pase。ng模塊化比較大膽的引入了依賴注入，能夠很容易的寫出可復(fù)用的代碼，對于敏捷開發(fā)的團(tuán)隊來說非常有幫助，我們的項目從上線到目前，UI變化很大，在摸索中迭代產(chǎn)品，但是js的代碼基本上很少改動。Angular支持單元測試和e2e-testingAngular1、單頁面應(yīng)用2、Angular更適合于CRUD的管理系統(tǒng)開發(fā)4、hybrid開發(fā)Angular1、內(nèi)容，需要SEO的。(SEO目前也有了prerender解決方案2、交互頻繁的，如游戲之類交互體驗。（單頁面應(yīng)用程序3、太過于簡單的頁面。（因為要考慮mvc,注入等，就會笨重ES6ES6歷199611月，JavaScript的創(chuàng)造者Netscape公司，決定將JavaScript提交給國際標(biāo)準(zhǔn)化組織ECMA，希望這種語言能夠成為國際標(biāo)準(zhǔn)。次年，ECMA發(fā)布262號標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器語言的標(biāo)準(zhǔn)，并將這種語言稱為ECMAScript。這個版本就是ECMAScript1.0版。ES6是什么ECMAScriptJavaScript的關(guān)系是，前者是后者的規(guī)格，后者是前者的一20156月，ECMAScript6正式通過，成為國際標(biāo)準(zhǔn)Node.jsJavaScript語言的服務(wù)器運行環(huán)境。它們對ES6的支持度，比瀏覽器更高。通過它們，可以體驗ES6的特性。這個標(biāo)準(zhǔn)的牛之處就在于會逐步統(tǒng)一前端，因為新增加的module,異步編程，Generator函數(shù)這些東西在angular中和node中都有很好的實現(xiàn)了。ES6學(xué)習(xí)地ECMAScript6址 Angular2官網(wǎng)地址有關(guān)Angular2.0的一切Angular2初體驗發(fā)布Angular2Beta為什么要是用Angular2技術(shù)性能的限制——AngularJS當(dāng)初是提供給設(shè)計人員用來快速構(gòu)建HTML表單的一個內(nèi)部工具。隨著時間的推移，各種特性被加入進(jìn)去以適應(yīng)不同場景快速變化的WEB——在語言方面，ECMAScript6的標(biāo)準(zhǔn)已經(jīng)完成，這意味著瀏覽器將很快支持例如模塊、類、lambda表達(dá)式、generator等新的特性，而這些特性將顯著地改變JavaScript的開發(fā)體驗。在開發(fā)模式方面，Web組件也將很快實現(xiàn)。然而現(xiàn)有的框架，包Angular1.x對WEB組件的支持都不夠好簡單易用——說實話，Angular1.x太復(fù)雜了，學(xué)習(xí)曲線太陡峭了，這讓人望而生畏。Angular團(tuán)隊希望在Angular2中將復(fù)雜性裝地更好一些，讓移動化——想想5年 現(xiàn)在的計算模式已經(jīng)發(fā)生了顯著地變化，到都是和平板。Angular1.x沒有針對移動應(yīng)用特別優(yōu)化，并且缺少一些關(guān)鍵Angular2的事情，一旦涉及到移動（性能、加載時間），注重這方面會使問題得解決。模塊化：各個模塊將從Angular的中移除，從而獲得更好的性能。這現(xiàn)代化：Angular2.0將把ES6和“常青”現(xiàn)代瀏覽器（自動更新到版Ionic2官網(wǎng)地官網(wǎng)地Ionic2第6章IonicIoniccss如果你對AngularJS這樣的東西不感，可以只使用ionic的CSS架直接在HTML中引入ionic.css就可以了ionicCSS框架主要提供預(yù)定義CSS類，來幫助我們快速構(gòu)建適用于端的UI。Ioniccss定高條塊定.bar——將元素為屏幕上絕對定位的塊狀區(qū)域，具有固定的高效果截條塊位.bar-header-置.bar-subheaderheader之下.bar-footer-置.bar-subfooterfooter之上置內(nèi).content-流式定位，內(nèi)容在文檔流中按順序定.scroll-content-絕對定位，內(nèi)容元素占滿整個bar子元有三種.bar子元素的樣式是預(yù)定義的<any<any標(biāo)題文字-對包含標(biāo)題文字的元素應(yīng)用.title樣式，通常使用h1元素。-對用作按鈕的元素，應(yīng)用.button樣式，通常使用buttona元素作為按鈕。注意按鈕將使用.bar的配色方案-包含一組按鈕。對用作的元素，應(yīng)用.button-bar樣式，通常使用div元素作為。bar在條塊元素上應(yīng)用.item-input-inset樣將input包裹在應(yīng)用.item-input-wrapper樣式的元素小色ionic定義了九種前景/背景/邊框的色彩樣式<any<anyclass="positive-bgenergized"...</any>圖.icon-將元素為圖.ion-{icon-name}-要使用的具體圖<any<anyclass="iconion-ioniccalm"></any>內(nèi)邊ionic定義了常用的內(nèi)邊距樣式樣式名很直白，邊距統(tǒng)一為10px?？梢栽谌魏卧厣蠎?yīng)用這些樣式<any<anyclass="padding-top">.padding-top</any>列使用.list定義列表容器，使用.item定義列表成員<any<anyclass="list"><anyclass="item">...</any><anyclass="item">...</any><any<anyclass="item">...</any><anyclass="item">...</any></any>成員列表的樣式定制主要發(fā)生在.item元素上ionic使用.button樣式定義按鈕元開關(guān)通常用來設(shè)置兩種狀態(tài)-開啟和<any<anyclass="itemitem-toggle"><labelclass="toggletoggle-balanced"<inputtype="checkbox"<divclass="track"><divclass="handle"></div></div></label></any>復(fù)選框通常用來在一組列表中選中部分成<any<anyclass="itemitem-chexkbox"><anyclass="checkbox"<inputtype="checkbox"</any></any><label<labelclass="itemitem-radio"><inputtype="radio"name="group"><divclass="item-content">f支付寶客戶端支付</div><iclass="radio-iconion-checkmarkassertive"></i></label>單選按鈕通常不單獨使用，將他們放入一個列<any<anyclass="list"><any<anyclass="itemitem-radio">...</any><anyclass="itemitem-radio">...</any></any><any<anyclass="itemrange"<anyclass="iconicon-volume-low"></any><input<inputtype="range"name="volume"><anyclass="iconicon-volume-high"></any></any><any<anyclass=itemitem-select”<labelclass="item-input"><anyclass="input-label"></any><select><option>...</option><option>...</option>...</select></</label></any><anyclass="tabs"><anyclass="tab-item">...</any><anyclass="tab-item">...</any>...</any>選項卡是一個可以包含多個按鈕或的容器，通常用于提供一致的導(dǎo)航體驗。ionc中使用<anyclass="tabs"><anyclass="tab-item">...</any><anyclass="tab-item">...</any>...</any>使用.badge樣式插入徽章在.tab-item同級.has-badge樣<any<anyclass="tabs"><anyclass="tab-itemhas-badge"<anyclass="badge">...</any></any>...</any>第7章IonicIonicionicAngularJS進(jìn)行了擴(kuò)展，主要就是將移動端開發(fā)中常UI組件抽象成AngularJS的指令，便于我們在開發(fā)中快速構(gòu)建應(yīng)用界面。Ion-nav-ionic里，我們使用ion-nav-view指令代替AngularUIRoute中的ui-指令，來進(jìn)行模板的渲染<ion-nav-<ion-nav-view></ion-nav-view>Ion-cache-view-是否對這個模板視圖進(jìn)行緩存允許值為：true|false，默認(rèn)為trueIon-header-<ion-header-<ion-header-bar>...</ion-header-bar>ion-header-bar指令有兩個可選的屬性align-title-設(shè)置標(biāo)題文字的對齊方式。允許值：left|right|center，默認(rèn)center。no-tap-scroll-當(dāng)點擊標(biāo)題時是否將內(nèi)容區(qū)域自動滾動到最開始。允許值：true|false，默認(rèn)為true。Ion-footer-<ion-footer-<ion-footer-bar>...</ion-footer-bar>ion-footer-bar指令有一個可選的屬性align-title-設(shè)置標(biāo)題文本的對齊方式。允許值：left|right|centerIon-<ion-<ion-content>...</ion-content>ion-content占據(jù)headerfooter以外的剩余區(qū)域。當(dāng)內(nèi)容超過可視區(qū)域時，ion-content可以滾動以顯示被隱藏的部分。默認(rèn)ionic自定制的滾動視圖，可以overflow-scroll屬性設(shè)語<ion-<ion-tabs><ion-tabtitle="...">...</ion-tab><ion-tabtitle="...">...</ion-tab>...</ion-tabs>注意 ion-tabs指令放在ion-content之內(nèi)ion-tab的內(nèi)容應(yīng)當(dāng)放入ion-view指令內(nèi)，否則ionic在計算布局時可select(index)index0index0，1，selectedIndex如果當(dāng)前沒有選中的選項頁，則返回-1。語列表是常用的信息組織方<ion-<ion-list><ion-item>...</ion-item><ion-<ion-item>...</ion-item></ion-list>屬type-列表種type屬性是可選的，可用來設(shè)置列表的種list-inset|card。這兩種列表都產(chǎn)生內(nèi)嵌的效果，區(qū)別在于card列表有邊框的陰影效果。show-delete-是否顯示成員內(nèi)的delete按show-delete屬性是可選的。如果在成員內(nèi)有delete按鈕（ion-delete-button），使用這個屬性來通知列表是否顯示元素刪除按鈕。允許的值為：true|falseshow-reorder-是否顯示成員內(nèi)的reorder按show-reorder屬性是可選的。如果在成員內(nèi)有reorder按鈕（ion-reorder-button），使用性來通知列表是否顯示元素重排序按鈕。允許的值為：true|falsecan-swipe-是否支持滑動方式option按can-swipe屬性是可選的。如果在成員內(nèi)有option按鈕（ion-option-button），使用這個屬性來允許或通過向左滑動成員來打開option按鈕。允許的值為：true|false，默認(rèn)為true。成員按ion-option-button-選項按鈕一個ion-item內(nèi)可以包含多個選項按鈕。選項按鈕是隱藏的，需要用戶向左動成員，以顯示選項按鈕?？梢允褂胕on-tabscan-swipe屬性允許或滑動開啟選項按鈕。ion-delete-button-刪除按一個ion-item內(nèi)最多有一個刪除按鈕。刪除按鈕在顯示時總是位于成員的最左端?？梢允褂胕on-tabsshow-delete屬性顯示或隱藏刪除按鈕ion-reorder-button-重排按一個ion-item內(nèi)最多有一個重排按鈕。重排按鈕在顯示時總是位于成員的最右端?？梢允褂胕on-tabsshow-reorder屬性顯示或隱藏重排按鈕API:如果需要從中控制列表元素，可以使用$ionicListDelegate服務(wù)showReorder([showReorder-顯示/關(guān)閉排序showReorder的允許值為：true|false?？梢允褂靡粋€作用域上的表式showDelete([showDelete-顯示/關(guān)閉刪除按showDelete的允許值為true|false?？梢允褂靡粋€作用域上的表式canSwipeItems([canSwipeItems-是否允許通過滑動方式來顯示成員canSwipeItems的允許值為：true|false?？梢允褂靡粋€作用域上的達(dá)closeOptionButtons-關(guān)閉所有選復(fù)選按鈕:ion-<ion-<ion-checkbox>...</ion-checkbox>1、使用ion-checkbox指令復(fù)選按鈕元素與標(biāo)準(zhǔn)的checkbox相比，使用ionicion-checkbox有幾個勢樣式更美觀，與移動端的UI更匹支持?jǐn)?shù)據(jù)綁定。使用可選的ng-model屬性，可以直接將選中狀態(tài)直接使用文本子元素作為2、也可以使用ng-checked進(jìn)行手動的狀態(tài)選單選按鈕:ion-<ion-<ion-radio>...</ion-radio>HTMLradio相比，ion-radio的改進(jìn)也是明顯的1、與移動端的UI2、使用可選的ng-model屬性，實現(xiàn)與作用域變量的數(shù)據(jù)綁3、使用可選的ng-value屬性，可以使用作用域變量設(shè)置單選按鈕應(yīng)的開關(guān)按鈕:ion-<ion-<ion-toggle></ion-toggle>ion-toggle有兩個可選的屬性ng-model-模型和復(fù)選按鈕一樣，開關(guān)按鈕也可以使用可選的ng-model屬性實現(xiàn)與作用域變量的雙向綁定。toggle-class-樣式可以使用可選的toggle-class屬性為開關(guān)按鈕額外的樣式。比如：toggle-{color}用來配色方案。語<ion-<ion-slide-box><ion-slide>...</ion-slide><ion-slide>...</ion-slide>...</ion-slide-box>屬does-continuedoes-continuetrue，就可以讓幻燈頁組首尾連接起來，循環(huán)切換。auto-playauto-playtrue，可以讓幻燈頁自動切換。切換的間隔默認(rèn)是4000ms，slide-intervalslide-interval-自動的間隔時間，默認(rèn)為showr分頁器用來指示幻燈頁的選中狀態(tài)，位于幻燈片的底部。允許值為：true|方法事pager-clickpager-clickon-slide-changedactive-slideupdate()update()slide(to[,speed])tospeedprevious()next()currentIndex()slideCount()模態(tài)框 框常用來供用戶進(jìn)行選擇或編輯，在模態(tài)框關(guān)閉之前，其他的用戶交互 在ionic中使用模態(tài)框有三個步驟框模使用ion-modal-view指令框模板，框模板通常置入script內(nèi)以構(gòu)造內(nèi)聯(lián)模<scriptid="a.html"type="text/ng-<ion-modal-<!--框內(nèi)容--</ion-modal-創(chuàng)建框?qū)Ψ?wù)$ionicModal有兩個方法用來創(chuàng)建框?qū)ο骹romTemplate(templateString,options)fromTemplateUrl(templateUrl,options)操作框?qū)ο罂驅(qū)ο笥幸韵路椒ㄓ糜陲@示、隱藏或刪除框show()-顯 hide()-隱 remove()-移 isShown()-框是否可視js代angular.module('testApp',.controller('MyController',function($scope,$ionicModal)$ionicModal.fromTemplateUrl('modal.html',scope:animation:'slide-in-}).then(function(modal)$scope.modal= $scope.openModal=function() $scope.closeModal=function() //$scope.$on('$destroy',function() //$scope.$on('modal.hide',function()// //$scope.$on('modal.removed',function()// 27上拉菜單titleTextbuttonstextcancelTextdestructiveText-選項按鈕的文本。如果不設(shè)置此字段，則上拉菜單中不出現(xiàn)buttonClickedcanceldestructiveButtonClicked-選項按鈕的回調(diào)函數(shù)，當(dāng)用戶點擊時觸cancelOnStateChangecssClassCSS2、創(chuàng)建上拉3、代angular.module('mySuperApp',angular.module('mySuperApp',.controller(function($scope,$ionicActionSheet)//$scope.show=function()//buttons:{text:'<b>Share</b>This'{text:'Move'}destructiveText:destructiveText:titleText:'ModifyyourcancelText:buttonClicked:function(index)return$ionicPopup.show(options).then(function(){$ionicPopup.show(options).then(function(){//這個函數(shù)在彈出框關(guān)閉時被調(diào)});alert(options-confirm(options)-prompt(options)-js代5151angular.module('mySuperApp',52.controller(function($scope,$ionicPopup,$timeout)//$scope.showPopup=function()$scope.data=//varmyPopup=template:'<inputtype="password"ng-title:'EnterWi-FisubTitle:'Pleaseusenormalscope:buttons:{text: