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

時間 2019-11-16

標籤 ionic 教程 win10 win 環境 ionic+angular angular 實現滑動菜單列表欄目 Windows 简体版

原文原文鏈接

寫博客，不容易，大家的評論和轉載，就是個人動力，但請註明出處,隔壁老王的開發園：http://www.cnblogs.com/titibili/p/5124940.htmlhtml

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

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

通過上一篇的博客介紹，咱們已經完成了win10下ionic的環境搭載工做，原文連接:web

http://www.cnblogs.com/titibili/p/5102035.html數據庫

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

工具以下：webstorm（IDE）app

首先，咱們來建立一個sidemenu app,框架

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

以下圖：webstorm

建立好了，進入咱們建立的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

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

下面，我給你們看些血脈噴張的圖：

以上圖片幫助你們理解angular基礎知識，

下面這幾張，是關於ionic的值得保存起來的圖片，廢話少說，看圖：

ionic官方連接在這：http://ionicframework.com/docs/components/#header

寫博客，不容易，大家的評論和轉載，就是個人動力，

但請註明出處,隔壁老王的開發園：http://www.cnblogs.com/titibili/p/5124940.html

真心感謝！~

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

最後，歡迎拍磚~