Ionic 2 开发大全

[semlinker]

搭建开发环境

环境安装

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

中文资源

• Ionic 2 With TypeScript 入门
• Angular 中文文档
• Angular 2 之30天通向神乎其技之路
• 30天精通 RxJS
• Angular 2 修仙之路

Ionic 2 - 博客(英文)

• joshmorony - ionic-tutorials

Angular 2 - 博客(英文)

• thoughtram
• toddmotto
• nrwl
• angular-university
• scotch
• medium