Ionic 初识

yiding_123

浏览: 40275 次
性别:
来自: 上海

最近访客更多访客>>

cgrregedit

jxjxtang

cuvier

richo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ionic

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 网站

http://www.runoob.com/angularjs/angularjs-intro.html

学习ionic网站

http://www.ionic.wang/js_doc-index.html

http://www.runoob.com/ionic/ionic-tutorial.html

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 网站

http://www.runoob.com/angularjs/angularjs-intro.html

学习ionice网站

http://ionicframework.com/ 官网

http://www.ionic.wang/js_doc-index.html 中文网站

cordova插件，当然也可以从官网上找

http://ngcordova.com/docs/plugins/toast/

分享到：

Android布局之FrameLayout | 关于solr早期版本的下载

2016-09-23 15:50
浏览 717
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ionic 初识

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Ionic 初识

评论

发表评论

相关推荐

最近访客更多访客>>