ionic初体验

1.ionic混合开发需要了解和学习的框架 phonegap angularJS

1.1 AngularJS是一个新出现的强大客户端技术，提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML，CSS和javascript，并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。
特性 1.MVC
2.模块化与依赖注入
3.双向数据绑定（模型和视图之间的自动同步）
4.指令与UI控件（ng-repeat ng-model ng-init...）

1.2 Ionic 是一个强大的 HTML5 应用程序开发框架,ionic之前为什么要学angularjs了 最主要的是ionic相当于 angularjs的扩展 , 通俗的就是angularjs移动端的表现形式。
ionic菜鸟 http://www.runoob.com/ionic/ionic-tutorial.html

ionic 官方网站：http://ionicframework.com/
ionic 官方文档：http://ionicframework.com/docs/

1.3 PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用IOS，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系人，声音和振动等
(cordovan)

2.演示一个完整的Demo并分析下流程。

1.需要安装node.js 因为安装中需要在命令行使用npm工具
2.安装ionic sudo npm install -g cordova ionic（mac端）
3.创建应用$ ionic start myApp tabs

创建Android 和 iOS 应用
$ cd myApp
$ ionic platform add android （ios）
$ ionic build android $ ionic emulate android （ios）

分析index.html页面

index.html页面

1.body中是绘制整个页面的，在body这个标签上加上了ng-app 标记，表示body这个标签之内的东西由angularJs来解析，angularJs承包了body这个鱼塘，并且起了一个名字：starter，这样就会告诉Angular 去管理页面上的所有DOM 元素。

2.在最后一行，有个ion-nav-view组件，该组件的作用为：在app启动时，$stateProvider就会检查url，检查它的索引匹配状态，然后尝试将对应的html加载到内。

3. 这是第2个tab页，是一个list列表。首先定义了页面的标题：Chats ，然后定义了一个列表，接着定义列表的item，其中有这么一句：ng-repeat="chat in chats"
   *** , ng-repeat是angular的标签，表示遍历，后面的写法应该就是遍历chats了，那么问题来了：chats从哪来的呢？

---

*其实Chats和$scope一样都是服务，只不过$scope是系统服务（就是有系统来定义的），而Chats是自定义服务，需要自己写代码定义

一个controller对应了一个$scope对应了一个DOM，强调一下是DOM，不一定是body，也有可能是div，总之就是一个标签都可以配置一个ng-controller。而这个DOM范围内，都可以引用$scope中存储的数据或者函数。

3.分析下ionic在iOS端是如何运行的。

1．用户请求应用起始页。
2．用户的浏览器向服务器发起一次HTTP 连接，然后加载index.html 页面，这个页面里面包含了模板。
3．Angular 被加载到页面中，等待页面加载完成，然后查找ng-app 指令，用来定义模板边界。
4．Angular 遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM 操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会启动起来，并且模板被转换成了DOM 视图。
5．连接到服务器去加载需要展示给用户的其他数据
iOS phonegap原理分析 http://www.cocoachina.com/industry/20140623/8919.html