前面的文章我们介绍了在做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过滤器）