【www.shanpow.com--优秀作文】
ionic2中文教程篇一:ionic2 精典入门教程
Ionic 2 With TypeScript 入门
Ionic 2 是一个优秀的前端移动框架，本GitBook将介绍 Ionic 2 的入门知识。
更新历史：
2016.11.21：完成Storage存储，Ionicons图标
2016.11.15：完成主题化
2016.11.13：完成为什么使用TypeScript，FAQ，CLI
2016.11.8：完成使用NPM
2016.11.3：完成资源章节的表单，词汇表
2016.11.2：完成资源章节的开发者小贴士，编辑器和IDE
2016.11.1：完成资源章节的App Build Script，和如何使用第三方库。API文档稍后翻译。
2016.10.31：完成Toggle，Toolbar
2016.10.30：完成Icons,Inputs,Lists,Loading,Menus,Modals,Navigation,Popover,Radio,Range,Searchbar,Segment,Select,Slides,Tabs,Toast
2016.10.28：完成Cards,Checkbox,DateTime,FABs,Gestures,Grid
2016.10.27：完成Buttons
2016.10.26：完成第三章及前三个组件
2016.10.21：完成前两章
2016.10.20：开始编写
Summary
Introduction
1.认识Ionic2
1.1.Ionic2介绍
1.2.Ionic2的优势与不足
1.3.开发基础
2.安装Ionic2
2.1.安装Node.js
2.2.安装Ionic2
2.3.安装Cordova
2.4.安装JDK
2.5.安装Android SDK
3.快速上手
3.1.创建项目
3.2.在浏览器中运行
3.3.项目结构
3.4.添加页面
3.5.导航到页面
4.Components (组件)
Action Sheets
Alerts
Badges
Buttons
Cards
Checkbox
DateTime
FABs
Gestures
Grid
Icons
Inputs
Lists
Loading
Menus
Modals
Navigation
Popover
Radio
Range
Searchbar
Segment
Select
Slides
Tabs
Toast
Toggle
Toolbar
6.Storage 存储
7.主题化
主题化你的Ionic应用
Sass变量
工具属性
平台样式
覆写Ionic变量
8.Ionicons 图标
9.CLI
build
emulate
generate
info
platform
run
serve
start
10.FAQ
11.资源
App Build Scripts
开发者小贴士
编辑器和IDE
Ionic2的表单
词汇表
使用第三方库
使用NPM
为什么选择TypeScript
相关链接
Ionic官网
Ionic2文档
Angular2官方中文网
TypeScript Handbook中文版
ionic2中文教程篇一:更新历史：
ionic2中文教程篇一:Summary
ionic2中文教程篇一:相关链接
ionic2中文教程篇二:Ionic2入坑基础教程和安装指南
安装Ionic
Ionic 2 程序主要通过Ionic命令行工具 CLI 来创建和开发，并使用 Cordova 来构建和部署为原生应用程序。也就是说我们需要先安装一些工具来实现程序开发。
安装Ionic CLI 和 Cordova
要创建 Ionic 2 项目，你需要安装最新版本的 CLI 和 Cordova 。在此之前你需要安装最新版本的 Node.js 。 点这里 下载安装 Node.js ，然后继续安装 Ionic CLI 和 Cordova 来进行应用程序开发：
安装 Ionic
npm install -g ionic
安装 Cordova
npm install -g cordova
命令前面可能需要添加 sudo 提权来进行全局安装。
安装完成后来创建你的第一个 Ionic 应用：
ionic start cutePuppyPics --v2
cutePuppyPics 可以替换成你的应用程序名称。 --v2 表示当前生成的是 Ionic 2 版本的应用，不添加则生成 Ionic 1 应用。
创建完成后 cd 到你的程序目录中，执行 ionic serve 来启动你的Ionic应用，并确保测试在浏览器中能够正常显示：
cd cutePuppyPics
ionic serve
平台指南
对于那些为iOS和Android构建原生应用程序（大多数人），每个平台都有一定的功能和安装要求，才能充分利用Ionic和Cordova开发。
对于iOS开发人员，并按照说明安装或升级Xcode，并注册开发人员帐户，开始为iOS开发应用程序。
对于Android开发人员，并按照说明安装SDK或Android Studio，开始为Android开发应用程序。
Ionic 2 基础教程
确保完成之前的安装并测试启动成功。下面我们将启动新的应用程序，添加页面，并在这些页面之间导航等过程。 让我们开始吧！
启动一个新的Ionic 2应用
用 start 命令来创建一个新的Ionic 2应用。别忘了添加 --v2 来指定这是一个 Ionic 2 的应用程序。再添加一个 tutorial 参数，指定使用 tutorial 模版创建该应用。这样一个基于 TypeScript 的Ionic 2应用就被成功创建了。
ionic start MyIonic2Project tutorial --v2
在这个过程中将会下载 Ionic 2 库包，安装所需的npm模块，并为应用配置好Cordova。如果在创建时不指定 tutorial 参数，ionic默认使用 tabs 模版来创建应用。
在浏览器中查看应用
现在你可以 cd 到创建好的项目文件夹中，使用 serve 命令在浏览器中预览你的应用。
cd MyIonic2Project/
ionic serve
如果成功启动，你将看到上面这样的欢迎界面。
项目结构
让我们来剖析一下Ionic 2应用，在我们创建的文件夹中，我们可以看到一个典型的Cordova项目结构。我们可以在其中安装原生插件，并创建平台特定的项目文件。
./src/index.html
src/index.html 是 Ionic 2 应用的主入口文件，其目的是设置脚本和CSS引导，然后开始运行我们的应用程序。 我们不会在这个文件中花费大量的时间。
为了让应用正常运作，Ionic 2 会在HTML中寻找 <ion-app> 标记。 在这个例子中，我们有：
<ion-app></ion-app>
并且在下方我们还能看到这样的脚本引用：
<script src="cordova.js"></script>
<script src="build/polyfills.js"></script>
<script src="build/main.js"></script>
cordova.js 是Cordova应用的需求文件，我们在开发过程中这个文件将会提示404错误，这不需要担心。Cordova将会在构建过程中自动注入这个文件。
build/polyfills.js 是在构建过程中自动生成的，我们不需要过多关注。
build/main.js 是一个包含了Ionic, Angular和你的JS脚本的文件。
./src/app/app.component.ts
在 app 文件夹中能找到我们的预编译代码。这是Ionic 2应用程序的大部分工作起始的地方。当我们运行 ionic serve 时， app 中的代码将被编译成当前浏览器能够执行的javascript版本（当前是ES5）。也就是说我们可以使用TypeScript或更高级别的 ES6+ 进行开发，而在编译时会自动降级为浏览器可识别的版本。
app.component.ts 是应用的入口文件。
在文件中我们能够看到这样的结构：
@Component({
templateUrl: "app.html"
})
export class MyApp {
constructor(
)
}
每个应用程序都有一个根组件，用于控制应用程序的其余部分。这跟Ionic 1和Angular 1中的 ng-app 非常相似。原先的启动配置被放倒了 app.module.ts 文件中。
在这个组件中，我们设置了模版文件 app.html ，下面我们来看一下这个文件。
./src/app/app.html
app.html 里是我们应用的主模版：
<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
在这个模板中，我们设置了一个 ion-menu 作为侧面菜单，然后一个 ion-nav 组件作为主要内容区域。 ion-menu 菜单的 [content] 属性绑定到了我们 ion-nav 的本地变量 content 上。所以我们知道哪里会发生动作变化。
接下来，我们来看看如何创建更多页面并执行基本的导航。
添加页面
现在我们对Ionic 2应用的布局有一个基本的掌握，让我们来了解一下在应用中创建和导航到页面的过程。
让我们看一下 app.html 页面的底部：
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
注意 [root] 属性绑定。 这本质上是设置了ion-nav组件的“root”页面。 当ion-nav加载时，变量 rootPage 引用的组件将是根页面。
在 app.component.ts 中， MyApp 组件在其构造函数中指定：
...
import { HelloIonicPage } from "../pages/hello-ionic/hello-ionic";
...
export class MyApp {
...
// make HelloIonicPage the root (or first) page
rootPage: any = HelloIonicPage;
constructor(
public platform: Platform,
public menu: MenuController
) {
...
}
...
}
我们看到 rootPage 设置成了 HelloIonicPage ，所以 HelloIonicPage 将是在nav控制器中加载的第一个页面。
创建一个页面
接下来，让我们看看我们正在导入的 HelloIonicPage 。在 src/app/pages/hello-ionic/ 文件夹中，找到并打开 hello-ionic.ts 。
你可能已经注意到每个页面都有自己的文件夹，该文件夹以页面命名。 在每个文件夹内，我们还可以看到一个.html和一个.scss同名文件。 例如，在 hello-ionic/ 我们将找到 hello-ionic.ts ， hello-ionic.html 和 hello-ionic.scss 。 虽然使用这种模式不是必需的，但它可以有助于保持项目的组织结构。
然后我们找到 HelloIonicPage 类，在创建的页面中提供了一个Angular组件和已经使用Ionic的导航系统加载的所有Ionic指令。注意，因为页面是动态加载的，所以它们没有选择器（ selector ）：
import { Component } from "@angular/core";
@Component({
templateUrl: "hello-ionic.html"
})
export class HelloIonicPage {
constructor() {
}
}
所有的页面都会有一个类和一个关联的模版。让我们再看一下 src/app/pages/hello-ionic/hello-ionic.html ，这是一个模版页面：
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Hello Ionic</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h3>Welcome to your first Ionic app!</h3>
<p>
This starter project is our way of helping you get a functional app running in record time.
</p>
<p>
Follow along on the tutorial section of the Ionic docs!
</p>
<p>
<button ion-button color="primary" menuToggle>Toggle Menu</button>
</p>
</ion-content>
<ion-navbar> 是这个页面中导航栏的模版。当我们导航到这个页面，导航栏的按钮和标题作为页面转换的一部分进行过渡。
模板的其余部分是标准的Ionic代码，用于设置我们的内容区域并输出我们的欢迎信息。
创建其他页面
要创建一个其他的页面，我们不需要太多的事情，只要确保配置标题和我们期望在导航栏显示的东西即可。
让我们来看一下 src/app/pages/list/list.ts 。在这里，你会看到一个新的页面被定义：
import { Component } from "@angular/core";
import { NavController, NavParams } from "ionic-angular";
import { ItemDetailsPage } from "../item-details/item-details";
@Component({
templateUrl: "list.html"
})
export class ListPage {
selectedItem: any;
icons: string[];
items: Array<{title: string, note: string, icon: string}>;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get("item");
this.icons = ["flask", "wifi", "beer", "football", "basketball", "paper-plane",
"american-football", "boat", "bluetooth", "build"];
this.items = [];
for(let i = 1; i < 11; i++) {
this.items.push({
title: "Item " + i,
note: "This is item #" + i,
icon: this.icons[Math.floor(Math.random() * this.icons.length)]
});
}
}
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
}
此页面将创建一个包含多个项目的基本列表页面。
总的来说，这个页面和我们之前看到的 HelloIonicPage 非常相似。 在下一节中，我们将学习如何导航到新页面！
导航到页面
回想上一部分我们在 ListPage 类中有一个函数，看起来像这样：
itemTapped(event, item) {
this.navCtrl.push(ItemDetailsPage, {
item: item
});
}
你可能已经注意到我们引用了一个 ItemDetailsPage 。这是一个包含在教程启动器中的页面。我们要在 list.ts 中导入它，我们可以这样导入：
...
import { ItemDetailsPage } from "../item-details/item-details";
...
保存好之后。你会发现 ionic serve 将重新编译应用程序并刷新浏览器，你的修改将会出现在程序中。让我们在浏览器中重新访问我们的应用程序，当我们点击一个项目，它将导航到项目详细信息页面！请注意，菜单切换按钮将被替换为后退按钮。这是Ionic遵循的原生风格，但可以按需配置。
工作原理
Ionic 2 导航的工作原理就像一个简单的堆栈，我们通过 push 将一个页面推到堆栈的顶端，这会让我们的应用前进一步并显示一个返回按钮。反之，我们也可以 pop 掉一个页面。因为我们在构造函数中设置了 this.navCtrl ，我们可以调用 this.navCtrl.push() ,并传递我们要导航到的页面。我们还可以传递一个数据对象给我们想要导航到的页面。使用 push 导航到新页面很简单，而且Ionic的导航系统非常的灵活。你可以查看 导航文档 找到更多高级导航示例。
当涉及到URL，Ionic 2的工作方式有点不同于Ionic 1。不使用URL导航，可以确保我们可以总是回到一个页面（例如应用程序启动）。这意味着我们不只是限于使用href来导航。无论怎样，我们仍然可以选择在必要时使用网址导航到某个网页。
后续步骤
到此你已经完成了Ionic 2基本教程，了解了Ionic 2并开始朝着掌握Ionic 2进发。有能力的话最好去 Ionic官网 阅读完整的技术文档。
建议熟悉一下TypeScript的基本语法和使用，包括@types使用和d.ts编写。
掌握Angular2的基本原理和开发思路。
熟悉Ionic 2的所有Components和API。
了解Cordova的使用方法和插件。
来自：https://segmentfault.com/a/1190000007131084
ionic2中文教程篇二:安装Ionic
ionic2中文教程篇二:安装Ionic CLI 和 Cordova
ionic2中文教程篇二:平台指南
ionic2中文教程篇二:Ionic 2 基础教程
ionic2中文教程篇二:启动一个新的Ionic 2应用
ionic2中文教程篇二:在浏览器中查看应用
ionic2中文教程篇二:项目结构
ionic2中文教程篇二:./src/index.html
ionic2中文教程篇二:./src/app/app.component.ts
ionic2中文教程篇二:./src/app/app.html
ionic2中文教程篇二:添加页面
ionic2中文教程篇二:创建一个页面
ionic2中文教程篇二:创建其他页面
ionic2中文教程篇二:导航到页面
ionic2中文教程篇二:工作原理
ionic2中文教程篇二:后续步骤
ionic2中文教程篇三:ionic中文教程 | 皓眸IT
ionic中文教程
做前端的同学有福了，学完比较热火的angular，你就可以开始动手做静态的WebApp了，这是多么幸福的一件事啊。静态的WebApp，你可以做任何的Demo，甚至可以做一些通关小游戏这个先不谈。做完了WebApp之后，神器IonicFramework来了，只要你的App没有涉及像多媒体处理，特殊传感器的处理，你都可以通过ionic打包成apk或ios应用，不用改写或者改写小部分代码。这是多么神奇哈！
皓眸哥
教程索引：(持续更新)ionic中文教程
转载请注明出处：http://www.haomou.net/2014/10/06/2014_ionic_learn/
ionic简介
ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。目前绑定的与angularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
中文教程三部曲
0. Hybrid_APP
0.1 Hybrid_APP说一说
1. 搭建环境
1.1 ionic框架配置1.2 ionic开发插件之ngCordova配置安装1.3 phoneGap之Android环境搭建1.4 MAC下Android环境与cordova搭建
2. 学习css常用样式
2.0 ionic图标资源索引 想要更换ionic的图标，请参考ionic图标资源，注意所有ios的相关图标并未包括在官方发布的安装包内。2.1 ionic中文详解CSS组件12.2 ionic中文详解CSS组件2
3. 学习js常用控件
3.1 ionic中文javascript API（1）3.2 ionic中文javascript API（2）3.3 ionic中文javascript API（3）
4. 项目实例
4.1 ionic文件选择与上传4.2 ionic开发APP版本调试
5. ionic插件开发定制
5.1 开发ionic插件Android版5.2 开发ionic插件IOS版 （未开放, 您可以在右侧购买电子书）
6. 服务端REST敏捷开发
6.1 REST概念介绍6.2 Token机制与OAUTH2.06.3 跨终端服务端API敏捷开发框架
7. 商店项目实战
7.1 shop项目数据库设计与服务端开发 （制作中）7.2 shop项目网页前台与后台开发（制作中）7.3 shop项目ionic开发手机客户端（制作中）7.4 shop项目调试方法技巧（制作中）(未完待续，近期更新)
正在制作电子书籍和相关视频教程，有想听课或者购买书籍的学员，请提前预约，联系方式：QQ群：345413787皓眸哥微信：807991555
谢谢！
转载请注明出处：http://www.haomou.net/2014/10/06/2014_ionic_learn/
有问题请留言。 请叫我皓眸哥(^_^)
