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
需要装一些东西
打包过程遇到些问题,先不管,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
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)
没看懂什么意思,不知道怎么用,也没搜到怎么用,碰到再说吧。
是不是这一个意思
导航条
</ion-header-bar>
身子
-content>
底部条
</ion-footer-bar>
-view>
</ion-nav-view>
问题:里写html代码是怎么一回事?
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路由提供了一个更强大的状态管理,即状态可以被命名,嵌套, 以及合并视图,允许一个以上模板呈现在同一个页面。
当用户在你的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'
})
通过属性禁用缓存
...
$ionicNavBarDelegate
看来ionic当中,也是有代理概念的
在后退按钮上显示上一个标题,也用$ionicNavBarDelegate。
{{getPreviousTitle() || 'Back'}}
function MyCtrl($scope, $ionicNavBarDelegate) {
$scope.getPreviousTitle = function() {
return $ionicNavBarDelegate.getPreviousTitle();
};
}
问题:nav-clear?
nav-transition
就是窗口切换的风格
设置使用的过渡类型,可以是:ios, android, 和 none。
Home
这个应该会经常用到,应该也是一个ionic的全局service
$ionicHistory 用于跟踪用户在 app 内的浏览记录。
问题:没有例子,没太明白。
ion-infinite-scroll
当页面滚动到底部时,可以出发加载数据的方法。
$ionicScrollDelegate
好多坑啊,但是都爬过去了。
关键点:menu的概念、路由、调用
菜鸟教程-ionic–>End!