|
一般教程的练习都是一个todo List，下面我们用Ionic来做一下todo app，完成后，你们发现，异常简单！
在之前生成的目录结构中，打开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里面创建这种app非常简单，可以使用 ionic start myApp sidemenu 来创建模板，也可以自己手写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目录下创建app.js文件，这是我们程序的入口文件，里面将会创建程序的路由，即跳转地址。下面我们初始化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节点通信是通过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使用双大括号作为变量引用，这里我们声明了一个循环 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，再在浏览器里运行一下，可以看到数据出现了！
一个基本的示例就是这样啦。
|
