ionic1入门

拼搏现实的明天。 2022-05-26 10:15 240阅读 0赞

# ionic1入门 #

参考自：

*  [Ionic开发实战][Ionic]
 *  [Ionic1与Ionic2的区别][Ionic1_Ionic2]
 *  [ionic创建项目遇到的各种问题][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的区别][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/][http_nodejs.org]

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

在终端命令行中执行：

`npm install -g cordova ionic`

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

注意：不指定版本的话，默认是安装最新版本，而最新版本可能打包的时候有问题，推荐制定一个不是最新的版本，如 sudo cnpm install –g cordova@6.5.0 。我就是最新版本，然后在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/][http_ngcordova.com]。

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

`npm install ngCordova --save`

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

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

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

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

[Ionic]: https://blog.csdn.net/i348018533/article/details/47258449
[Ionic1_Ionic2]: https://blog.csdn.net/liayn523/article/details/70820409
[ionic]: http://www.cnblogs.com/xin136/p/6817653.html
[http_nodejs.org]: http://nodejs.org/
[http_ngcordova.com]: http://ngcordova.com/