ionic教程之Win10環境下ionic+angular實現滑動菜單及列表

jopen 8年前發布 | 54K 次閱讀 Win10 移動Web開發框架移動開發 Ionic Framework angularjs

寫博客，不容易，你們的評論和轉載，就是我的動力，但請注明出處,隔壁老王的開發園： http://www.cnblogs.com/titibili/p/5124940.html

2016年1月11日 21：53 作者：隔壁老王的開發園

內容摘要：初識ionic框架，及ionic CSS樣式、UI控件的添加，了解angular在ionic中的重要性

經過上一篇的博客介紹，我們已經完成了win10下ionic的環境搭載工作，原文鏈接:

http://www.cnblogs.com/titibili/p/5102035.html

接下來，我們來修改官方框架sidemenu實現自定義的webapp樣式。

工具如下：webstorm（IDE）

首先，我們來創建一個sidemenu app,

命令提示符敲入： ionic start TestSideApp sedemenu

如下圖：

創建好了，進入我們創建的TestSideApp,

命令行敲入： cd TestSideApp

再運行看一下效果，

命令行敲入： ionic serve

這個就是我們創建的一個官方sidemenu布局的網頁，接下來，我們要開始對它進行修改，很多讀者可能會問，你為什么不創建一個空的項目然后進行演示？我在這里說一下，框架是一個工具，而工具是拿來用的，為了避免重復造輪子，降低學習成本，我們直接上手ionic官方給的案例，豈不是更直接？

打開webstorm(File->Open)或者在所創建的目錄下打開TestSideApp文件夾，我們將會分別看到如下目錄（先操作后講解）：

緊接著，我們打開www目錄下的index.html文件,我們會看到下圖所示的ng-app=”starter”,除了<body>標簽之外的內容，你都可以理解成引入那些依賴。。。（說的不夠學術哈）

看圖：

在webstorm下ctrl+鼠標左鍵點開這個starter；

我們驚奇的發現這個starter是來自于app.js這個文件，

我們可以很容易觀察到下圖的這三個東西和網頁中的一模一樣的名字，也就是說，不出意外的話，網頁左邊的內容跟它們有關系，看圖：

好，點開它們

除了最后一個多了一個controller外，這三個家伙除了名字不同，完全一樣，也就是說，我們想要在左邊滑動菜單內添加內容，只需要先模仿它們的寫法；抱著強烈的好奇心，我忍不住ctrl+左鍵點開了PlaylistCtrl

驚奇的發現：

原來，這里就是編寫網頁中這六個鬼東西的啊，二話不說，先改成中文；

好，玩夠了，我們回到app.js敲入如下方框內的代碼：

現在來給大家稍微解釋一下打問號的這兩個東東，

（//定義自己去查）url的作用如下圖：

TemplateUrl的作用就是指向templates文件夾內的網頁

由此我們可知，是時候該創建一個網頁了，來，跟隔壁老王嗨起來：

左鍵單擊左面templates------>File------>New

這里要注意一下，還記得我們所有的視圖也好，JS文件也好，都是包含在下圖這個starter里面的，也就是說上圖的laowang.html里面就不必再包含index.html中<html></html>這樣的標簽了，我們只需要寫的就少了很多，大大的提高效率，這就是框架的好處哈~~

也就是說，我們可以開始使用ionic的標簽來寫我們的視圖了，具體的組件樣式介紹，可以去官網上查看，ionic官方鏈接在這： http://ionicframework.com/docs/components/#header

所以，如下圖，我們這樣寫：

到這里還不能顯示我們創建的上圖這個網頁，所以我們往下看，

我們可以發現，它們有聯系：

所以，我們需要在menu.html中添加如下內容：

保存全部，運行一下，我們就完成了下圖所示的效果：

接下我們美化一下：

怎么玩，看官方文檔隨意發揮，最后老王的效果圖如下：

好，趕快打包成手機APP，看一下吧~

不懂如何打包成android應用和修改應用圖標及開啟界面的同學，請留言，我再出一篇教程

哈哈，終于操作完了，接下來我給大家系統的講解一下，ionic+Angular+Cordova都是些什么鬼~~~~~

好，接下來我將通過這個ionic官方案例，給在座的你講解整個項目的結構，以及我們所要用到的代碼塊是如何運作的，在此之前，請大家先看幾個圖：

由上圖可知，在HybridApp（混合App）的開發中, ionic主要負責View（視圖）的功能，而Angular主要負責controller（控制器）和model（模型），而cordova/phonegap負責將這個網頁項目打包成android、ios、winphone應用。

上圖這個不用說了吧，哈哈~

依我個人理解ionic就是用來做外觀的，也就是用來決定長相的，angular負責業務邏輯，（很有內涵），cordova用來打包；所以我們要想玩轉ionic ，做完這篇文章大概了解一下ionic的視圖是如何實現的，然后就趕緊奔向angular的懷抱吧，剛開始接觸你可能會覺得，怎么寫幾個界面繞來繞去的，但從MVC的角度出發，ionic這樣一個MVC框架，當后面需要寫的東西多的時候，你就會感激它的好了，國內的相關資料很少，有的也大多是全部代碼都往一個界面敲，完全無法應用到實戰中，如果不了解angular的初學者看了，完全就是“What the fuck.”

所以，重要的事情說三遍：

學好Angular

當然，以上所說的均不涉及服務端、數據庫開發~！~

下面，我給大家看些血脈噴張的圖：