返回 登录
0

我的ionic开发第一课

阅读478

一、熟悉基础技术
1.angularJS
将后端开发的mvc思想运用到前段开发,当服务器把前段的页面(模板)和所需数据发送到浏览器端,由angularJS来组装模板和数据。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
2.cordova
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。
3.ionic
“in today’s landscape we feel there is something missing to easily bridge the gap between HTML5 and native app development”;
“Ionic is that missing piece when creating native apps with web standards. Just drop in some CSS and JavaScript, and you’ll quickly get up to speed developing native applications with HTML5”
—–摘自http://blog.ionic.io/where-does-the-ionic-framework-fit-in/
ionic使得使用html5开发与原生java开发的app一样的应用成为可能,它就像一座桥梁,基于angularJS脚本框架,结合app开发所需的css样式和html页面。它就像后端开发SSH框架中的spring,spring粘合了Struts和hibernate,而ionic则粘合了html5应用开发的所需的一切。

二、Hello world
本文是基于ionic-1.2.4最新版本。
1.安装nodejs,cordova,ionic这些基础的构件,这些度娘都知道。
2.创建工程:ionic start ionicApp
3.运行工程:ionic serve
1)目录结构分析
1.link href=”lib/ionic/css/ionic.css” rel=”stylesheet”
ionic框架样式
2.link href=”css/style.css” rel=”stylesheet”
你自己的样式,你可以覆盖ionic自带的样式
3.script src=”lib/ionic/js/ionic.bundle.js”/script
整合了angularJS各种构件的ionic.js->胶水
4.script src=”js/app.js”/script
app级别的脚本配置,页面(路由)分发,键盘等
5.script src=”js/controllers.js” script
页面级别的:每个页面模板的控制器
6.script src=”js/services.js” script
与后端交互,发送请求后端数据,将数据返回到controller.

评论