<a target="_blank"></a>
接下來你要安裝一個 cordova 和 ionic的指令行工具，操作如下：
npm install -g cordova ionic
安裝完成之後，你可以嘗試開始建立一個工程：
進入項目目錄，添加ionic平台，建立應用，在虛拟機中運作，成為高富帥……
cd myionicapp
ionic platform add android
ionic build android
ionic emulate android
下面就是樣例應用的效果：
我們已經有一個不錯的開始了，現在我們來建立一個todo清單的應用，我們從空白模闆開始：
ionic start mytodolist blank
如果你進入到項目目錄，你會看到angularjs檔案，這是我們添加相關代碼的地方。
<ion-list>
<ion-item>scuba diving</ion-item>
<ion-item>climb mount everest</ion-item>
</ion-list>
之後我們看一看添加ion-list之後我們的html檔案是什麼樣的：
<!doctype html>
<html>
<head>
<metacharset="utf-8">
<metaname="viewport"content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<linkhref="lib/ionic/css/ionic.css"rel="stylesheet">
<linkhref="css/style.css"rel="stylesheet">
<!-- if using sass (run gulp sass first), then uncomment below and remove the css includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<scriptsrc="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<scriptsrc="cordova.js"></script>
<!-- your app's js -->
<scriptsrc="js/app.js"></script>
</head>
<bodyng-app="starter">
<ion-pane>
<ion-header-barclass="bar-stable">
<h1class="title">my todo list</h1>
</ion-header-bar>
<ion-content>
</ion-content>
</ion-pane>
</body>
</html>
然後我們可以在 www/js/中建立一個controllers.js檔案，來定義一個新的cntroller，我們暫且叫它todolistctrl。這是controllers.js檔案的内容：
angular.module('starter.controllers',[])
.controller('todolistctrl',function($scope){
});
在上面的代碼中，我們定義了一個叫starter的module和一個叫作calledtodolistctrl的controler。
然後我們就要把這個module加到我們的應用中了。打開www/js/app.js ，然後把module添加進去：
angular.module('starter',['ionic','starter.controllers'])
.run(function($ionicplatform){
$ionicplatform.ready(function(){
if(window.statusbar){
statusbar.styledefault();
}
})
我們繼續，定義一個$scope來攜帶todo list的條目，todolistctrl中聲明一個新的$scope變量，如下：
$scope.todolistitems =[{
task:'scuba diving',
status:'not done'
},{
task:'climb everest',
}]
把controllers.js添加到index.html中：
<ion-listng-controller="todolistctrl">
<ion-itemng-repeat="item in todolistitems">
{{item.task}}
</ion-item>
我們現在需要在index.html中添加一個button來觸發事件：
<scriptid="modal.html"type="text/ng-template">
<div class="modal">
<div class="bar bar-header bar-calm">
<button class="button" ng-click="closemodal()">back</button>
<h1 class="title">add item</h1>
</div>
<br></br>
<form ng-submit="additem(data)">
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="todo item" ng-model="data.newitem">
</label>
<button class="button button-block button-positive" type="submit">
additem
</button>
</form>
</script>
現在确認一下，在上面的操作中，我們在modal中添加了一個header，一個input box和一個button。
我們同樣有需要一個回退的button在header中，它用來觸發 closemodal() 功能。
現在我們開始綁定 ionic modal 到我們的 controller中，我們通過如下的方法把 $ionicmodal 注入到controller中：
.controller('todolistctrl',function($scope, $ionicmodal){
// array list which will contain the items added
$scope.todolistitems =[];
//init the modal
$ionicmodal.fromtemplateurl('modal.html',{
scope: $scope,
animation:'slide-in-up'
}).then(function(modal){
$scope.modal = modal;
// function to open the modal
$scope.openmodal =function(){
$scope.modal.show();
};
// function to close the modal
$scope.closemodal =function(){
$scope.modal.hide();
//cleanup the modal when we're done with it!
$scope.$on('$destroy',function(){
$scope.modal.remove();
//function to add items to the existing list
$scope.additem=function(data){
$scope.todolistitems.push({
task: data.newitem,
data.newitem ='';
$scope.closemodal();
我們在上面的代碼中使用了 .fromtemlateurl 來加載html的内容，然後在初始化的時候通過兩個選項定義了$scope和animation的類型。
當然我們也定義了打開、關閉moda和添加條目到數組的方法。
好了，萬事俱備，虛拟機走起，看起來還不錯吧。
原文釋出時間：2014-12-08
本文來自雲栖合作夥伴“linux中國”