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