Question

本书的主要目的是让你尽可能的熟悉 Ionic。所以，从第一章到第九章，我从 Cordova，AngularJS，Ionic 基本知识开始，逐步深入。

在此附录中，我们将探索其他一些 Ionic CLI：ionc.io， ionic-box 和 Sublime Text 插件

关于本章，你也可以通过以下 Github 目录来访问源代码，发起 issue，与作者沟通:

https://github.com/learning-ionic/Appendix

Ionic CLI

Ionic CLI 越来越强大了。写作此书的时候，最新的 Ionic CLI 版本是 1.5.5。本书使用的是 Ionic 1.5.0.

Ionic 登录

有三种方法登录 ionic 云服务。第一种，有提醒的：

ionic login

第二种，没有提醒的：

ionic login --email arvind.ravulavaru@gmail.com --password 12345678

最后，使用环境变量。可以设置

IONIC_EMAIL 和 IONIC_PASSWORD 环境变量，Ionic CLI 会不用任何提醒，自己去获取。 但是这么做很不安全，因为密码赤裸裸的展示为普通文本。

首先你的有一个 Ionic.io 账号，否则登录不会成功的

Ionic 开始任务

首先，我们看一下 标记选项。

No Cordova

No Cordova 标记

ionic start 任务是最简单的创建 Ionic 应用的方法之一。本书中，我们已经多次用过。但是，我们知道，Ionic 可以不用 Cordova。想要不依赖 Cordova 的依赖的话，在使用
ionic start 的时候就需要添加一个 -w 标记或者 -no-cordova 标记：

ionic start -a "My Mobile Web App" -i app.web.mymobile -w myMobileWebApp maps

生成的项目结构如下：

接着，和往常一样使用

cd 命令，进入 myMobileWebApp 运行 ionic serve 。

新建项目的时候附加 SCSS 支持

新建项目默认附加 SCSS 支持，可以在使用

ionic start 的时候，添加 -s 或者 -sass 标记：

ionic start -a "Example 1" -i app.one.example --sass example1 blank

列出所有 Ionic 模板

想要查看所有的可用模板，运行

ionic start 的时候添加 -l 或者 --list 标记：

ionic start -l

到本书编写的今天为止，有以下可用模板：

在编写本书的今天，

complex-list 模板还是个空白模板，tests 模板是 ionic 团队内部测试使用的。

App ID

如果你在使用 Ionic 云服务的话，那么你在云服务上创建的每个项目都会指派一个 app ID（具体参考下面的

Ionic.io 应用 部分）。 app ID 将会保存在根目录下的的 ionic.project 文件里。当你新建一个项目的时候，app ID 是空的。如果想将新搭建的项目关联到云端已有的应用上的话， 可以运行
ionic start 附加--ion-app-id 标记并传入云服务生成的 app ID：

ionic start -a "Example 2" -i app.two.example --io-app-id "b82348b5" example2 blank

此时，

ionic.project 是这样子的：

{ "name": "Example 2", "app_id": "b82348b5" }

Ionic link

本地创建的项目可以通过以下命令连接到一个云端项目（具体参考

Ionic.io 应用 部分）：

ionic link b82348b

也可以通过以下命令移除已有的 app ID:

ionic link --reset

Ionic info

想要查看已安装的依赖包和他们的版本号，运行：

ionic info

列出的信息应该是这样的：

Ionic 模板

除了可以使用 start 任务查看可用模板之外，也可以通过 templates 任务来查看可以模板：

ionic templates

Ionic browsers

Ionic 默认使用操作系统的默认浏览器渲染 webview 的。 想要获取更好的用户体验或者使用最新特性的话，你可以将默认的浏览器替换为 Crosswalk（ ）或者 Crosswalk Lite（ ( ）。 目前，只能使用这两个浏览器。可以通过以下命令查看当前支持的浏览器：

https://crosswalkproject.org/ https://github.com/crosswalk-project/crosswalk-website/wiki/Crosswalk-Project-Lite

ionic browser list

然后，会看到：

你将看到，目前还不支持

WKWebView 和 UIWebView 。 但是对于 Android 应用，你可以使用 Crosswalk。想要给已有项目（Example 3）添加 Crosswalk 的话，运行：

ionic browser add crosswalk

一旦浏览器添加成功，可以查看

ionic.project 文件进行验证。想要还原默认的浏览器的时候，运行：

ionic browser revert android

Ionic lib

可以通过以下命令更新到最新的 Ionic 库版本：

ionic lib update

也可以传入指定的版本号：

ionic lib update -v 1.0.0-rc.1

Ionic state

你可以通过 Ionic state 任务来管理项目的状态。 这么说吧， 你正在你的 Ionic 应用中添加一些插件和平台以进行测试； 但是你不想在他们测试失败的之后还使用他们。 在这样的情况下，你就可以用 save 和 restore 任务了。你可以通过添加

--nosave 标记来避免将这些插件和平台保存到 package.json ：

ionic plugin add cordova-plugin-console --nosave

在插件和平台（这些插件和平台添加的时候使用了

--nosave 标记）测试正常之后。如果此时想要将他们添加到 package.json 的话，运行如下命令：

ionic state save

这个命令将会查找你已经安装的插件和平台，然后将所需的信息添加到

package.json 文件。 可以通过添加--plugins 标记或者--platform* 标记来指定只保存插件或者平台。如果添加的插件和平台不能如预期运行，那么可以通过以下命令还原项目到之前的状态：

ionic state reset

如果想恢复应用的 Cordova 插件和平台的话，可以在

package.json 里面更新然后运行：

ionic state restore

reset 任务删除 platforms 和 plugins 文件夹然后重新安装，restore 只是恢复 platforms 和 plugins 文件夹里面缺失的平台和插件。

Ionic ions

根据 ions CLI：

"Ionic ions are a curated collection of useful addons, components, and ux interactions for extending ionic." Ionic ions 是一个设计好的用于扩展 ionic 的插件，组件以及用户交互的集合。

截至本书编写的今日为止，还只有 4 个 ions。可以通过以下命令查看 ions 列表：

ionic ions

将会出现如下选项：

你可以通过输出结果里面展示的

Add 任务添加 ion。一旦添加完成，我们就可以去 www/lib/ 下对应的 ion 文件夹内查看此组件。例如，当我们新建一个空白项目（example4）的时候，我们可以通过以下命令添加 Swipe Card：

ionic add ionic-ion-swipe-cards

此时，进入

www/lib/ionic-ion-swipe-cards 文件夹就可以找到对应的 bower 组件来。 在 example14 文件夹内，可以找到更多的设置信息。可以通过以下命令移除 ion：

ionic rm ionic-ion-swipe-cards

ionic add 和 ionic rm 任务也可以用作添加和移除 bower 包。

Ionic resources

当你添加一个新平台的时候，默认会为新平台创建一个

resources 文件夹，且包含图标和截屏。 这些图标和截屏都是默认的图片。 如果想为项目使用你自己的标志或者图片，你只需要运行 Ionic resources 任务就可以了。这个任务将会在
resources 文件夹内查找一个名为 icon.png 的图片用以为此操作系统的所有设备制作图标， resources 文件夹里面的 splash.png 用以为此操作系统的所有设备生成截屏。你可以将这两个图片替换为你自己特色的图片，然后运行：

ionic resources

如果只想转换图标的话，传入

-i 标记，如果只想转换截屏的话，传入-s 标记。

同时，你也可以使用

.png , .psd （样本范例： 与 ， 或者 http://code.ionicframework.com/resources/icon.psd http://code.ionicframework.com/resources/splash.psd） .ai 文件来生成图标。更多信息，参考： http://blog.ionic.io/automating-icons-and-splash-screens/

Ionic server, emulate, run

Ionic 提供了简单的方法用于在浏览器，模拟器以及设备上运行应用。这三个方法都有很多有用的选项。如果想要像在真实设备上那样在模拟器上实时重载，那么在调试的时候，使用

-l 标记实现实时重载，使用-c 激活 JavaScript 控制台错误输出。 这是在 Ionic CLI 中至今使用最好和最广的工具方法。这个任务为了节省了大量的调试时间：

ionic serve -l –c ionic emulate -l –c ionic run -l –c

以下是用在

ionic serve 中的可用选项：

如果你的应用在 Android 和 iOS 有不同的显示效果的时候，可以通过以下命令同时测试：

ionic serve -l

你可以自己学者探索一下上面提供的选项。当使用 ionic run 和 emulate 的时候，可以使用以下选项：

自述性非常的好。

Ionic upload 和 share

可以通过如下命令将你的 Ionic 项目上传到你的 Ionic.io 账户：

ionic upload

使用这个功能需要一个 Ionic.io 账户

应用上传成功之后，就可以通过 来查看新传的 app。可以通过 share 命令来与他人分享这个应用，分享需要传入分享对象的邮件地址；例如：

https://apps.ionic.io/apps

ionic share arvind.ravulavaru@gmail.com

Ionic view

可以通过 Ionic view 在设备上预览你的应用。一旦应用上传到你的 Ionic.io 账户，你可以在 Android 或者 iOS 是下载 Ionic View 应用然后在设备上预览应用。

更多 Ionic View 的信息，参考：

http://view.ionic.io/

Ionic help 和 docs

任何时间点，你都可以通过如下命令查看所有的 Ionic CLI 任务列表：

ionic -h

可以通过如下命令打开 ionic 文档：

ionic docs

想要查看可用文档，运行：

ionic docs ls

想要打开指定文档（如

ionicBody ），运行：

ionic docs ionicBody

Ionic Creator

Ionic Creator 是一个用来轻松搭建 Ionic UI 的工具。 导航到 开始使用此工具。 使用这个工具需要一个 Ionic.io 账号。

http://creator.ionic.io/

有了 Ionic Creator，你可以通过拖动放置 Ionic 组件来创建应用原型。 这个应用是存放在云端的，你可以随时访问并更改。

设计 app 中的 Ionic Creator 截屏：

完成设计之后，可以通过以下三种方法来下载你的 app：

• 第一个，使用 Ionic CLI：

ionic start [appName] creator:c45ac24bd221

• 第二个，下载项目的 ZIP 文件
• 最后个，下载纯 HTML

可以通过点击左上角的 （导出） 按钮看到这些选项。

更多关于 Ionic Creator 信息，参考：

http://thejackalofjavascript.com/ionic-creator-beta/

Ionic.io 应用

你可以在 创建和管理你的 Ionic 应用。 在之前的任务中，我们使用的 app ID 都是我们通过 接口创建项目的时候生成的 app ID。可以通过 页面上的 按钮来创建一个新的 app。 app 创建完成之后，点击 app 的名字就可以看到 app 的详细信息了。在 app 详细信息页面上点击 可以更新 app 设置。

https://apps.ionic.io/apps https://apps.ionic.io/apps
https://apps.ionic.io/apps New App
Settings

可以此页面上查看 Ionic 应用的设置： 截至本书编写之日，使用 Ionic Creator 创建的 app 都没有出现在

http://docs.ionic.io/v1.0/docs/io-quick-start https://apps.ionic.io/apps

Ionic Push

可以通过添加 Push 插件（ ）并进行配置来给你的 Ionic 应用添加推送消息。 也可以通过使用 Ionic 的推送模板来达成：

https://github.com/phonegap-build/PushPlugin

ionic add ionic-service-core ionic add ionic-service-push ionic start myPushApp push cd myPushApp ionic plugin add https://github.com/phonegap-build/PushPlugin.git ionic upload

现在，返回

app.ionc.io 页面的时候，点击之前应用的设置。在 www/js/app.js 的 config 部分，你可以看到之前在应用设置页面做的改动：

.config(['$ionicAppProvider', function($ionicAppProvider) { // Identify app $ionicAppProvider.identify({ // The App ID for the server app_id: 'YOUR_APP_ID', // The API key all services will use for this app api_key: 'YOUR_PUBLIC_API_KEY' }); }])

然后，你可以按照 Android 推送设置引导（( 或者 iOS 推送设置引导（ 实现推送消息。

http://docs.ionic.io/v1.0/docs/push-android-setup） http://docs.ionic.io/v1.0/docs/push-ios-setup）

更多关于给应用整合推送消息的详细信息，请参考：

http://docs.ionic.io/v1.0/docs/push-from-scratch

Ionic Deploy

Ionic Deploy 是一个 Ionic.io 服务。 Ionic 可以让你部署新的变更而不用调教的 App Store。 这样就为开发者想用户推送新的变更节省了大量的时候。

不需要更新安装包的的变更只能被推送-例如，HTML，CSS,JavaScript 和图片资源

截至本书编写之日，Ionic Deploy 还是 Alpha 状态。

更多关于 Ionic deploy 的信息，参考： 和

http://blog.ionic.io/announcing-ionic-deploy-alpha-update-your-appwithout-waiting/ http://docs.ionic.io/v1.0/docs/deploy-from-scratch

Ionic Vagrant box

如果你的项目有多个成员，每个成员使用不用环境开发 Ionic 应用，可以通过 Ionic Vagrant box 来统一大家的开发环境。

如果不懂 Vagrant，查阅： 更多关于 ionic-box 的信息，参考：

http://vagrantup.com https://github.com/driftyco/ionic-box

Ionic Sublime Text 插件

如果你是 Sublime 用户，想自动补齐 Ionic 脚本，那么可以安装以下包：

• Ionic snippets:

https://packagecontrol.io/packages/Ionic%20Snippets

• Ionic Framework snippets:

https://packagecontrol.io/packages/Ionic%20Framework%20Snippets

• Ionic Framework Extended Autocomplete:

https://packagecontrol.io/packages/Ionic%20Framework%20Extended%20Autocomplete