ionic1入门

ionic1入门

参考自：

• Ionic开发实战
• Ionic1与Ionic2的区别
• ionic创建项目遇到的各种问题

简介

ionic 是一个强大的HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)，可以帮助您使用Web技术，比如HTML、CSS和Javascript构建接近原生体验的移动应用程序。

ionic特点：

1. ionic 基于Angular语法，简单易学。
2. ionic 是一个轻量级框架。
3. ionic 完美的融合下一代移动框架，支持Angularjs的特性，MVC，代码易维护。
4. ionic 提供了漂亮的设计，通过SASS构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用。
5. ionic 专注原生，让你看不出混合应用和原生的区别
6. ionic 提供了强大的命令行工具。
7. ionic 性能优越，运行速度快。

ionic1与ionic2的区别

1. ionic1是基于angularjs1，ionic2是基于angularjs2，两者的语法有很大的不同

2. ionic2借助Angular2的革命性改进，与1.x版本相比具有以下优势：

3. 更快的性能：Angular2比Angular1快5到10倍

4. 更清晰的项目结构：Angular2应用是模块化的，每个页面的控制层代码、模板、样式都放在一起。
5. 更强大的CLI：ionic cli可以生成pages,provides,tabs,pipes,components,directives等。如添加一个页面，使用命令ionic g page newPage，就会生成以下文件，并且文件中已经生成了基本的代码

-new-page
--new-page.ts
--new-page.html
--new-page.scss

1. 更友好的页面导航
2. 更强大的模板语法
3. 更高效的开发体验：支持类、模块、接口、lamba表达式

安装

Ionic开发是依赖于Nodejs环境的，所以在开发之前我们需要安装好Nodejs。下载安装：http://nodejs.org/

安装完成之后打开终端，输入命令node -v和npm -v验证是否安装成功，如果返回版本号则说明成功。

在终端命令行中执行：

npm install -g cordova ionic

这是使用npm包管理器安装cordova和ionic，-g的意思是全局安装，全局安装后在终端中任何目录下都可以使用cordova和ionic的命令。

注意：不指定版本的话，默认是安装最新版本，而最新版本可能打包的时候有问题，推荐制定一个不是最新的版本，如 sudo cnpm install –g [email protected] 。我就是最新版本，然后在add ios时一直卡在cordova fetch那里，换一个低版本后，就可以添加ios平台了。

创建ionic项目

Ionic官网提供了三个项目模板blank、tabs和sideMenu，这里创建一个blank（空） 的ionic项目。

ionic start myIonic blank

如果因为npm packages安装导致创建失败的话，可以尝试如下步骤来解决：

1. 先使用国内镜像cnpm来安装：

npm install -g cnpm

1. 然后执行跳过安装npm packages这步，执行如下命令：

ionic start myIonic --skip-npm

如果要设置ionic2项目的版本执行如下命令：

ionic start myIonic --v2 --skip-npm

1. 执行完上面这步之后再到项目的目录,打开cmd执行如下命令：

cnpm install --save

创建项目完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。

目录下有以下文件：

hooks // 在编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中
plugins //cordova插件的目录
scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中
www //我们的开发目录，页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件，可以配置app的id，名称、描述起始页和其他配置
gulpfile.js //gulp构建工具的执行文件，在这个文件中创建任务实现编译scss，css、js优化等
ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json //npm配置文件

调试ionic项目

在ionic项目目录下，打开终端执行

ionic serve

执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面，浏览器打开页面时，Ionic已经给我们开启了livereload模式，开启之后我们编辑www下的文件后，保存时Ionic会通过websocket通知浏览器刷新页面，我们就不用每次修改完毕手动刷新页面了，又极大的提高了我们的工作效率。

开启livereload后Ionic会默认监听www下面的文件，如果需要自定义的话请编辑ionic.project的watchPatterns来设置需要监听的范围。

安装并配置ngCordova

Ionic把一些常用到的插件用angularjs服务做了一层封装：http://ngcordova.com/。

我们只需要在项目中安装ngCordova插件就可以像使用angularjs的服务一样在我们的项目中调用了，我们先安装ngCordova：

npm install ngCordova --save

安装完毕之后再www/index.html中引用

<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js">script>
<script type="text/javascript" src="cordova.js">script>

ng-cordova.js需要在cordova.js引用之前

并在app.js中添加依赖注入关系

angular.module('starter', ['ionic', 'ngCordova'])