Ionic 2 开发大全

Ionic 3.x 发布了，基于Angular 4.0，支持 Lazy Loading了, 详细信息请查看 - 更新内容。

搭建开发环境

环境安装

1.Windows 平台

npm install -g cordova ionic  
# 安装ant
# 系统环境变量中配置android sdk路径

2.iOS 平台

sudo npm install -g cordova ionic   
sudo npm install -g ios-sim  
ionic platform add ios  # 添加ios平台
ionic build ios # 构建ios项目  
ionic emulate ios   # 模拟器运行  
ionic run ios   # 连接真机后直接运行

模拟器运行

• 支持模拟器运行

  • npm install -g ios-sim

• 列出 iOS 设备类型

  • ios-sim showdevicetypes

• 模拟器运行

  • ionic emulate ios --target="iPad-Air"

• 开启 livereload 和 consolelogs： ionic emulate ios -l -c

• 开启日志(Logging)

  • consolelogs：ionic emulate ios -c

  • serverlogs：ionic emulate ios -s

命令行

1.初始化项目

• ionic start myApp [template name] --v2

  • template name: blank、sidemenu、tabs

• ionic start myApp -a "My Awesome Ionic App"

  • -a: appname

• ionic start myApp -i com.mycompany.appname

  • -i: app id

2.添加构建的平台

• ionic platform add [platform name]

  • platform name: ios、android、windows

• ionic platform remove [platform name]

3.插件管理

• ionic plugin add [plugin id] # 添加插件

• ionic plugin rm [plugin id] # 移除插件

• ionic plugin ls # 列出已安装的插件

4.ionic 生成器

• ionic g [page|component|directive|pipe|provider|tabs]

5.预览应用程序

• ionic serve

  • ionic serve -l 在浏览器中同时预览 iOS、Android、Window 平台

6.获取命令行信息

• ionic info

IDE

1.Visual Studio Code

Visual Studio Code 插件：

• Auto Import

• Debugger for Chrome

• Document This

• Material Theme

• Beautify

• Auto Rename Tag

• Git History

• HTML Snippets

• Path Intellisense

• Angular 2 TypeScript Snippets - Johnpapa

• Angular 2 TypeScript Emmet

• Ionic 2 Commands with Snippets

• ESLint

• Code Runner

• HTML CSS Class Completion

• JavaScript(ES 6) code snippets

• REST Client

2.WebStorm

开发调试

1.Browser 调试工具

• Augury - Rangle.io 开发的 Angular 2 调试工具

2.模拟器/真机调试

• Safari 真机调试

• GapDebug - Genuitec 开发的调试工具

Chrome 插件

• OneTab - 节省高达95%的内存，并减轻标签页混乱现象

• Proxy SwitchyOmega - 轻松快捷地管理和切换多个代理设置

• QR Code Generator - 二维码生成器

• Octotree - Code tree for GitHub

• CORS Toggle - Allow/Disable Cross Domain Request.

• Augury - Rangle.io 开发的 Angular 2 调试工具

• Postman - 功能超级强大 HTTP Client

抓包工具

• Fiddler for Windows - Fiddler是一个 HTTP 协议调试代理工具

• Fiddler-AddOns - Fiddler 插件

• Fiddler CertMaker for iOS and Android - HTTPS 证书生成插件

• HTTPS以及Fiddler抓取HTTPS协议 - APP HTTPS 抓包

• Charles for Mac Mac下HTTP 协议调试代理工具

其他工具

• Shadowsocks

官方资源

• Ionic 官网

• Ionic 2 官方文档

• Ionic 2 Native 插件

• Cordova 官网

• Angular 官网

• TypeScript 官网

• RXJS 官网

• GitHub 官网

英文资源

• awesome-ionic2

• Build a Mobile App with Angular 2 and Ionic 2

• Marking-your-angular-app-fast

• how-does-angular-2-change-detection-really-work

• angular-2-forms-reactive

中文资源

• Ionic 2 With TypeScript 入门

• Angular 中文文档

• Angular 2 之30天通向神乎其技之路

• RxJS 中文文档

• 30天精通 RxJS

• Angular 2 修仙之路

Ionic 2 - 博客(英文)

• joshmorony - ionic-tutorials

Angular 2 - 博客(英文)

• thoughtram

• toddmotto

• nrwl

• angular-university

• scotch

• medium