前面的文章我們介紹了在做Ionic應用之前我們有必要了解、掌握的Angular知識點。現在，我們開始試做我們的第一個Ionic應用。這個例子很簡單，非常適合剛接觸Ionic的同學。
首先我們獲取一下項目文件，你可以到github上現在到本地地址：https://github.com/ionic-in-action/chapter3.git。你可以用任何編寫html頁面的工具（如：editplus）打開項目。接下來你可以運行看一下已經寫好的基礎HTML模板（如圖）。
Angular開發簡單來說就是用Javascript創建一個Angular應用並在HTML中使用它。Angular和頁面的DOM元素精密結合，所以你可以一個Angular應用嚴格限制在一個DOM元素及其子元素中。在本例中使用的是<html>元素，所以Angular可以訪問整個頁面。Ionic通常使用的是<body>元素。接下來，我們正式開始試做我們的第一個Ionic應用。
首先，我們打開index.html頁面，要創建一個Angular應用，你需要在一個元素上使用ng-app指令並聲明應用名稱。我們在index.html頁面中添加這個指令<html lang="en" ng-app="App">。現在你已經把一個名為App的Angular應用附加到了HTML根元素上。這樣Angular應用就可以訪問整個DOM，不過你也可以把它附加到<body>標簽中。我建議把它放在<html>或者<body>中元素中。
我們還么有在Javascript中聲明這個應用，下面我們來完成這一步。Angular有一套模板系統，用來封裝程序代碼。聲明模板時，你需要提供名字和一個數組，其中包含所有依賴（此應用中沒有依賴）。Ionic本身也是一個Angular模塊。Angular模板的聲明方式如下，創建一個新文件夾js/app.js，並寫入如下代碼：
angular.module('App',[]);
接下來我們需要給HTML文件添加一個<script>標簽來載入Angular模塊。在index.html文件中，把下面的代碼寫到</body>標簽之前：
<script src="js/app.js"></script>
在此之前，你需要確保Angular庫已經被載入，應為Javascript文件的載入和執行順序和他們在文件中的聲明順序相同。
做完上面這些之后，我們在瀏覽器的看到的效果，並沒發生改變。這是因為我們還沒有添加控制數據和業務邏輯的代碼。現在我們來添加所需要的代碼，新建文件js/editor.js。
angular.module('App')//引用App模板，把它引入這個控制器中
.controller('EditorController',function($scope){//聲明EditorController控制器，傳入一個包含依賴列表的函數
//創建模型的值，並存儲到$scope中
$scope.state={
editing=false;
}
})
這個控制器現在非常簡單，只是創建了一個簡單的模型state。$scope服務被注入，所以你可以設置它的state屬性。記住，$scope中的值被稱為模型，可以再視圖中訪問。現在需要修改index.html文件，把剛才的控制器加入應用。在HTML結尾，</body>元素之前寫入<script>標簽:
<script src="editor.js"></script>
最后一步是把控制器附加到DOM。這會給控制器床見一個新的子作用域。我們需要一個特殊的HTML屬性，它是一個Angular指令，用來聲明控制器被附加的位置。在這個例子中，我們把它附加到index.html的第25行，帶container類的div上：
<div class="container" ng-controller="EditorController">
做完上面這些，接下來我們就給將數據加載並顯示到應用中了。在應用左側有一個創建好的筆記列表。我已經加入了一些簡單的筆記。我們已經創建了自己的控制器，因此可以更新控制器從而把數據載入應用。要實現這個功能需要使用Angular的$http服務，這樣就可以使用HTTP請求來從Node服務器加載數據。我們需要修改控制器，通過HTTP請求訪問服務器的筆記服務並把返回的數據賦值給作用域。打開js/editor.js文件並更新下面的代碼。
angular.module('App')
.controller('EditorController',function($scope,$http){//把$http服務注入控制器
$scope.editing=true;
$http.get('/notes').success(function(data){//使用$http.get加載筆記；如果成功，使用返回的數據
$scope.notes=data; //把從http返回的數據賦值給$scope
}).error(function(err){
$scope.error='Could not load notes';
});
});
現在，屏幕上海看不到任何數據，你需要更新模板文件來把筆記列表顯示到左側。這需要模板綁定和其他幾個Angular指令把數據從$scope中顯示出來。打開index.html文件，並將有底線部分的代碼加入：
<div class="col-sm-3"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"> <button class="btn btn-primary btn-xs pull-right" >New</button>My Notes </h3> </div> <div class="panel-body"> <p ng-if="!notes.length">No notes</p> <ul class="list-group"> <li class="list-group-item" ng-repeat="note in notes">{{note.title}}<br /><small>{{note.date|date:'short'}}</small></li> </ul> </div> </div> </div>
現在你在刷新index.html頁面就能看到頁面左側已經有數據加載出來了。控制器加載完數據之后，模板就會把筆記列表顯示出來。如果列表正在加載或者目前沒有筆記，那么ng-repeat列表為空，ng-if會顯示“No notes”消息。每次更新notes模型時都會對表達式求值，所以只要notes模型至少一個元素，表達式!notes.length就會返回false，段落元素被隱藏。這種方式可以很簡單的用Angular指令根據$scope的值來修改模板。ng-repeat會循環數組中的每個元素（或者對象中的每個屬性）並為每個元素創建一個DOM元素。在這個應用中，數組的每個筆記都會生成一個<li>元素，它會展示筆記最后一次保存的標題和日期。
模板中綁定的note.date數據后面有個|date:'short'，這是一個過濾器，它會在不改動作用域的前提下修改顯示內容。舉個例子，這里我們有一個日期對象並使用Angular的date過濾器，顯示出來的是人類可讀的格式，但是在作用域中原始的數據對象仍然保持原狀。在表達式中可以通過管道符號來使用過濾器。過濾器可以串聯——換句話說，你可以添加多個過濾器。舉個例子，你可以使用一個過濾器來對數組排序（使用orderBy過濾器）