|
一般教程的練習(xí)都是一個todo List,，下面我們用Ionic來做一下todo app，完成后，你們發(fā)現(xiàn),，異常簡單,！
在之前生成的目錄結(jié)構(gòu)中,，打開www/index.html文件,，下面我們來改寫它：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- Needed for Cordova/PhoneGap (will be a 404 during development) --> <script src="cordova.js"></script> </head> <body> </body> </html> |
這里，我們包含了ionic必需的組件,，ionic.css和ionic.js,，ionic.css是整個ui框架的核心，ionic.js是包含了眾多angularJS組件,。cordova.js是cordova打包app時用,。
下面看一下app的原型圖：
這是一個側(cè)滑（sidemenu）型的app，這ionic里面創(chuàng)建這種app非常簡單,，可以使用 ionic start myApp sidemenu 來創(chuàng)建模板,，也可以自己手寫html。
|
|
<body> <ion-side-menus> <ion-side-menu-content> </ion-side-menu-content> <ion-side-menu side="left"> </ion-side-menu> </ion-side-menus> </body> |
下面,，在www/js目錄下創(chuàng)建app.js文件,，這是我們程序的入口文件，里面將會創(chuàng)建程序的路由,，即跳轉(zhuǎn)地址,。下面我們初始化app：
|
|
angular.module('todo', ['ionic']) |
在index.html里面添加 app.js的引用：
|
|
<script src="js/app.js"></script> |
在body標(biāo)簽里面加入angularJS的入口標(biāo)志：
這樣，app就已經(jīng)成型了,，下面看一下完整的代碼：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<body ng-app="todo"> <ion-side-menus> <!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> </ion-content> </ion-side-menu-content> <!-- Left menu --> <ion-side-menu side="left"> <ion-header-bar class="bar-dark"> <h1 class="title">Projects</h1> </ion-header-bar> </ion-side-menu> </ion-side-menus> </body> |
下面我們可以測試一下了,，測試可以在瀏覽器測試，或者真機(jī)模擬,，ionic提供了一個 ionic serve 命令,，內(nèi)置了瀏覽器可以測試，運(yùn)行這個命令會啟動一個瀏覽器窗口運(yùn)行我們的app。
或者是使用模擬器：
$ ionic build ios
$ ionic emulate ios
基本成型了,。下面我們來填充內(nèi)容：
為body添加一個controller,angularJS里面,，與dom節(jié)點(diǎn)通信是通過controller來實(shí)現(xiàn)的：
|
|
<body ng-app="todo" ng-controller="TodoCtrl"> |
|
|
<!-- Center content --> <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content> <!-- our list and list items --> <ion-list> <ion-item ng-repeat="task in tasks"> {{task.title}} </ion-item> </ion-list> </ion-content> </ion-side-menu-content> |
angularJS使用雙大括號作為變量引用，這里我們聲明了一個循環(huán) ng-repeat 來遍歷tasks變量,，下面看app.js代碼：
|
|
angular.module('todo', ['ionic']) .controller('TodoCtrl', function($scope) { $scope.tasks = [ { title: 'Collect coins' }, { title: 'Eat mushrooms' }, { title: 'Get high enough to grab the flag' }, { title: 'Find the Princess' } ]; }); |
這里我們聲明了 task 數(shù)組,，用來填充到todo列表里面，對應(yīng)的是ng-repeat里面的tasks,，再在瀏覽器里運(yùn)行一下,，可以看到數(shù)據(jù)出現(xiàn)了！
一個基本的示例就是這樣啦,。
|
