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.模拟器/真机调试

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

抓包工具

其他工具

  • Shadowsocks

官方资源

英文资源

中文资源

Ionic 2 - 博客(英文)

Angular 2 - 博客(英文)

阅读 5.6k更新于 2017-04-12
推荐阅读
全栈修仙之路
用户专栏

聚焦全栈,专注分享 Angular、TypeScript、Node.js/Java 、Spring 技术栈等全栈干货。欢迎小伙伴们关注...

2349 人关注
108 篇文章
专栏主页
目录