Ionic 初识
Ionic 是什么
Ionic既是一个CSS框架也是一个Javascript UI库。许多组件需要Javascript才能产生神奇的效果，尽管通常组件不需要编码，通过框架扩展可以很容易地使用，比如我们的AngularIonic扩展。
Ionic遵循视图控制模式，通俗的理解和 Cocoa 触摸框架相似。在视图控制模式中，我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。 一个很好的例子就是标签栏（Tab Bar）视图控制器处理点击标签栏在一系列可视化面板间切换。
浏览我们的API文档来了解视图控制器和Ionic中可用的Javascript实用工具。
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和 AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选择。
ionic 特点
- 1.ionic 基于Angular语法，简单易学。
- 2.ionic 是一个轻量级框架。
- 3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
- 4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
- 5.ionic 专注原生，让你看不出混合应用和原生的区别
- 6.ionic 提供了强大的命令行工具。
- 7.ionic 性能优越，运行速度快。
怎么学习
学习ionic之前要先了解熟悉angularjs,ionic其实就是在angularjs之上做的扩展。
学习angularjs 网站
学习ionic网站
ionic和cordova关系
cordova是 一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的核心功能——包括地理定位，加速 器，联系人，声音和振动.
Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成android ios移动app应用
那我不用命令安装ionic 可以使用ionic开发app吗？答案是可以得。
就可以把ionic当作一款html5 移动app框架，把phonegap/cordova 当作打包 并且调用原生的框架就可以了
怎么搭建ionic开发环境
1.下载js库
从官网下载最新的ionic库 http://ionicframework.com/docs/overview/#download，目前版本为ionic-v1.3.1，下载解压后目录结构如下 css/ => 样式文件 fonts/ => 字体文件 js/ => Javascript文件 version.json => 版本更新说明
2.安装nodejs
从官网上 https://nodejs.org/en/ 下载最新版本
3.安装cordova
此步聚需要在第2步完成之后。参考http://cordova.apache.org/#getstarted
Cordova command-line 可以通过nodejs安装， 打开cmd窗口执行以下命令 npm install -g cordova.
4.安装ionic
虽然我们可以不用通过安装ionic打包工具来开发混合应用，但是还是推荐大家安装下ionic，因为通过ionic可以创建一个demo工程，里面的框架基本都写好了，我们只需要在上面修改，这样不用重头去搭建一个环境，当然如果我们本地已有这个一个demo工程，用cordova打包也是可以的。
安装命令 npm install -g ionic
5.安装android环境
Android SDK下载地址：http://developer.android.com/sdk/index.html
第一个demo, Hello world
1.将ionic 库引入
我们只需要在项目中引入以上目录中的 css/ionic.min.css 和 js/ionic.bundle.min.js 文件即可创建 ionic 应用。
2.参考ionic文档，里面有很多控制的使用说明
<html ng-app="helloApp">
<head>
<title>Hello world</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script type="text/javascript">
angular.module('helloApp', ['ionic'])
.controller('helloCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="helloCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello World!</h1>
</ion-header-bar>
<ion-content>
<p>我的第一个 ionic 应用。</p>
</ion-content>
</body>
</html>资料链接
学习angularjs 网站
相关推荐
yaodilu 2020-05-10
SXIAOYI 2020-09-16
有心就有方向 2012-09-03
zfyaixue 2013-06-14
pigsmall 2020-11-19
Ladyseven 2020-07-25
whileinsist 2020-06-24
gufudhn 2020-06-12
冰蝶 2020-06-05
LinuxAndroidAI 2020-06-04
supperme 2020-05-28
e度空间 2020-04-27
云端漂移 2020-04-09
peterwzc 2020-03-17
ebuild 2013-05-14
donghedonghe 2013-05-31
tdeclipse 2011-02-28
linuxprobe0 2013-04-15