ionic是基于angularjs的前端框架，用于实现移动app。
下面是第一段代码，先贴代码，有时间再整理：
demo1.htm
<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>ionic-demo1</title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <script type="text/javascript" src="lib/ionic/js/ionic.bundle.js" charset="utf-8"></script> </head> <body> <ion-nav-bar class="bar-stable"></ion-nav-bar> <ion-nav-view></ion-nav-view> <script type="text/javascript"> var app = angular.module('app',['ionic']); app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('dash', { url: '/dash', templateUrl: 'dash.html', controller: 'DashCtrl' }); $urlRouterProvider.otherwise('/dash'); }); app.controller('DashCtrl', function($scope) {}); </script> </body> </html>
引入了ionic.bundle.js脚本后，不用引用angular.js就可以使用angular了，我开始百思不得其解，折腾老半天。。。
dash.html
<ion-view view-title="Dashboard"> <ion-content class="padding"> <div class="list card"> <div class="item item-divider">Recent Updates</div> <div class="item item-body"> <div> There is a fire in <b>sector 3</b> </div> </div> </div> <div class="list card"> <div class="item item-divider">Health</div> <div class="item item-body"> <div> You ate an apple today! </div> </div> </div> <div class="list card"> <div class="item item-divider">Upcoming</div> <div class="item item-body"> <div> You have <b>29</b> meetings on your calendar tomorrow. </div> </div> </div> </ion-content> </ion-view>
整个示例用到了三个ionic的标签：
ion-nav-bar 页面的头部导航bar
ion-nav-view 页面的正文内容
ion-view 页面内容