项目初始化，参考官方文档：http://ionicframework.com/getting-started/ 我们 $ ionic start myApp tabs 为例，初始化完成之后，项目结构应该是这样的： {} index.html： 项目主页面，这个页面目前不需要
项目初始化，参考官方文档：http://ionicframework.com/getting-started/
我们 $ ionic start myApp tabs 为例，初始化完成之后，项目结构应该是这样的：
{}
index.html： 项目主页面，这个页面目前不需要改，当你需要引入别的js或者css是可以在这里添加；
templates/*.html： 各个模块对应的模板，会在 /www/js/app.js 中指定；
app.js： 定义项目module,routers,template 等一些配置 ，后面要修改配置都会在这个文件里，大致代码所示；
javascriptangular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])// [ ... ]可以引入别的module
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
/* ... */
.state('tab.chat-detail', {
url: '/chats/:chatId',//对应的 url规则， chatId可以在 ChatDetailCtrl 中使用$stateParams.chatId来获取
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',//这里指定模板文件
controller: 'ChatDetailCtrl'//这里指定 的 controller 在 controller.js 中声明
}
}
});
$urlRouterProvider.otherwise('/tab/dash');
});
controllers.js： 编写每个controller对应的具体功能，页面要绑定什么事件、有哪些功能都需要在这里添加；
services.js： 通过factory的方式，定义一些服务，如加载数据等；
ionic 预定义了很多常用的组件如：Lists、Loading、Popover、Tabs等；具体可以在 http://ionicframework.com/docs/ 查看；
之外的就是AngularJs的知识，比如指令；
html<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
ng-repeat 可以遍历数组，语法和模板语言差不多；
ng-src 对应img的src，这么写好处是避免在html初始化时去加载无效的img路径{{chat.face}}；
ng-click 可以绑定点击事件，remove方法在对应的controller中声明；
原文地址：http://nero-zou.com/use-ionic-build-hybrid-mobile-app/