|
一般教程的練習都是一個todo List，下面我們用Ionic來做一下todo app，完成后，你們發(fā)現，異常簡單！
在之前生成的目錄結構中，打開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的原型圖：
這是一個側滑（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)建程序的路由，即跳轉地址。下面我們初始化app：
|
|
angular.module('todo', ['ionic']) |
在index.html里面添加 app.js的引用：
|
|
<script src="js/app.js"></script> |
在body標簽里面加入angularJS的入口標志：
這樣，app就已經成型了，下面看一下完整的代碼：
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> |
下面我們可以測試一下了，測試可以在瀏覽器測試，或者真機模擬，ionic提供了一個 ionic serve 命令，內置了瀏覽器可以測試，運行這個命令會啟動一個瀏覽器窗口運行我們的app。
或者是使用模擬器：
$ ionic build ios
$ ionic emulate ios
基本成型了。下面我們來填充內容：
為body添加一個controller,angularJS里面，與dom節(jié)點通信是通過controller來實現的：
|
|
<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 數組，用來填充到todo列表里面，對應的是ng-repeat里面的tasks，再在瀏覽器里運行一下，可以看到數據出現了！
一個基本的示例就是這樣啦。
|
