ionic之路

Ionic是一个前端的框架，帮助开发者使用HTML5, CSS3和JavaScript做出原生应用。ionic的理念类似前端开发的BootStrap，目标是封装HTML5移动跨平台开发的最佳实践，就像Twitter Bootstrap在前端开发中做的一样。Ionic框架很先进，js部分是基于AngularJS框架，大量使用了Css3，css生成基于Sass，构建工具基于最新的gulp，版本升级基于bower，原生层无缝封装了cordova。

我认为，Bootstrap是针对前端跨平台推出的框架，ionic主打移动前段跨平台，两者都用到了CSS，如果在ionic框架下使用Bootstrap，恐有冲突，且加载过多框架，影响速度，也务必要。

另外，还有JQuery，angularjs有自己的一套框架，JQuery应该是另一套，ionic框架的js部分是基于angularjs的，有很完整的动作方案，所以在ionic当中使用JQuery也有待商榷。

按着草鸟教程，一步一步放下走，进行到Android build时，卡住了，说没有ANDROID_HOME,环境变量什么的，是不是得先装好Android SDK啊？

参考链接：http://www.itwap.net/ArticleContent.aspx?id=26

需要装一些东西

• 1.JDK
• 2.Apache Ant
  环境变量要配好
• 3.Android SDK
• 4.NodeJS
• 5.NodeJS提供的npm安装Ionic和Cordova

打包过程遇到些问题，先不管，ionic应该是开发跨界，做好了webApp再用cordova打包成相应的Android App和iOS App

我现在最重要的是搞懂，ionic的开发阶段，项目结构如何，运行机制，UI组件使用，CSS使用。

ionic serve就可以在浏览器中运行 我创建的myApp就是一个ionic项目，先把它搞懂，然后在按照任务需求去做一个App，在这过程中寻求打包问题的解决。

Cordova干什么用的？
Ionic 底层打包使用 Cordova ( 和 Phonegap 一样 ) 底层打包用 Cordova 是不错的。 Ionic 是一个全堆栈的混合应用开发框架，可以理解成 Ionic = Cordova + AngularJS + Ionic UI

今天的任务：务必把菜鸟的ionic部分吃掉！

ionic 创建 APP 使用 HTML、CSS 和 Javascript 来构建

问题：
.controller(”,function(){}）和.controller(”,[function(){}]）的区别？

ionic icon 比对表：cheatsheet.html

-ionic手势

1.长按 on-hold
用法：button添加on-hold属性，赋值function。

2.单击 on-tap
用法：button添加on-tap属性，赋值function。

3.双击 on-double-tap
用法：button添加on-double-tap属性，赋值function。

4.触碰 on-touch
用法：button添加on-touch属性，赋值function。

5.抬手 on-release
用法：button添加on-release属性，赋值function。

6.拖拽 on-drag
用法：button添加on-drag属性，赋值function。

7.滑动 on-swipe on-swipe-up/right/down/left

8.ionicGestureon(eventType,callback,element)
off(eventType, callback, $element)
没看懂什么意思，不知道怎么用，也没搜到怎么用，碰到再说吧。

-ionic头部和底部

是不是这一个意思

<ion-nav-view>  <ion-view>    <ion-header-bar>       导航条    </ion-header-bar>    <ion-content>       身子    </ion-content>    <ion-footer-bar>       底部条    </ion-footer-bar>  </ion-view></ion-nav-view>

问题：里写html代码是怎么一回事？

-$ionicModal

A modal will broadcast ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ events from its originating scope

model，这是ionic的一个专有概念，模态窗口。

模态窗口的写法：
1.写模态子页面
2.controller里注入$ionicModal服务
3.调用fromTemplate 或 fromTemplateUrl接口，将子窗口页面加工成model并引入当前作用域
4.主页面控件调用modal.show()方法，调出模态窗口
5.调用modal.hide()方法，隐藏模态窗口

Angular的核心为路由服务
AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。

-ionic 导航

当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。

采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。

AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套， 以及合并视图，允许一个以上模板呈现在同一个页面。

此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。

-缓存问题

通常情况下，视图都被缓存了能提升性能。当跳出视图时，他的元素被保留在Dom中，并且它的作用域也从 $watch 中移除。

当我们跳到一个已经被缓存了的视图，视图会被激活，它的作用域被重新连接上，Dom中也保存了他的元素。这也允许保持以前的视图滚动位置。

缓存也可以通过很多方式来开启和关闭的。默认Ionic将最大缓存页面数为10个，并且这并不是唯一可以定制的，应用程序可以显式状态来设置视图应不应该被缓存。

注意，因为我们是缓存这些视图，我们没有破坏作用域。相反, 它的作用域也从 $watch 中移除。

因为接下来的观看作用域并没有被摧毁和重建，控制器也没被再次加载。如果app/controller需要知道什么时候进入或离开一个视图，在视图事件从 ionView 作用内发出, 例如 $ionicView.enter， 可能是有用的。

全局禁用缓存

$ionicConfigProvider 可以用于设置最大允许缓存的视图数量，通过设置为0来禁用所有缓存。

$ionicConfigProvider.views.maxCache(0);


在STATE PROVIDER中禁用缓存

$stateProvider.state('myState', {
cache: false,
url : '/myUrl',
templateUrl : 'my-template.html'
})


通过属性禁用缓存

<ion-view cache-view="false" view-title="My Title!">
...
</ion-view>


$ionicNavBarDelegate
看来ionic当中，也是有代理概念的

在后退按钮上显示上一个标题，也用$ionicNavBarDelegate。

<ion-nav-bar ng-controller="MyCtrl">
<ion-nav-back-button class="button-icon">
<i class="icon ion-arrow-left-c"></i>{{getPreviousTitle() || 'Back'}}
</ion-nav-back-button>
</ion-nav-bar>


function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}


问题：nav-clear？

nav-transition
就是窗口切换的风格
设置使用的过渡类型，可以是：ios, android, 和 none。

<a nav-transition="none" href="#/home">Home</a>


-$ionicHistory

这个应该会经常用到，应该也是一个ionic的全局service
$ionicHistory 用于跟踪用户在 app 内的浏览记录。

-ionic 平台

问题：没有例子，没太明白。

-ionic 对话框

-ionic 滚动条

ion-infinite-scroll
当页面滚动到底部时，可以出发加载数据的方法。

$ionicScrollDelegate

-ionic 侧栏菜单

好多坑啊，但是都爬过去了。

关键点：menu的概念、路由、调用

菜鸟教程-ionic–>End！