Ionic2QuickStart

零起步的Ionic2 App开发培训教程

目标

独立地完成基于Ionic2的Hybrid App开发。

方式

以案例为主，以集中培训+自学为培训方式，边学边做。

学习计划

以半天为1课时，一天两课时。总共44课时。

• JavaScript(非重点)

  • 简单介绍JS的特性：弱类型、继承、方法
  • 常用的DOM Api
  • 1课时

• SCSS(非重点)

  • css3 简介
  • 使用css进行页面布局
  • SCSS 简介
  • 1课时

• TypeScript

  • 基础类型
  • 变量声明
  • 接口
  • 类
  • 函数
  • 泛型
  • 枚举
  • 类型推论
  • 类型兼容性
  • 高级类型
  • Symbols
  • Iterators 和 Generators
  • 模块
  • 命名空间
  • 命名空间和模块
  • 模块解析
  • 声明合并
  • 书写.d.ts文件
  • JSX
  • Decorators
  • 混入
  • 三斜线指令
  • 10课时

• Ionic2

  • 架构
  • 调试
  • 显示数据
  • 输入与表单
  • DI
  • 模板语法
  • 指令(组件\属性型指令\结构型指令)
  • 服务
  • 管道
  • 事件与生命周期
  • 常用组件
  • 导航及页面参数传递
  • 模块
  • 28课时

• Cordova插件开发

  • Cordova与原生代码交互原理
  • Cordova插件开发(iOS和Android)
  • Cordova插件发布与集成
  • 4课时

培训前准备

1. 安装 Visual Studio Code

   下载地址：https://code.visualstudio.com/Download

2. 安装Node.js 6.0+

   下载地址：http://nodejs.cn/download/

3. 安装cnpm

   Windows 命名行: npm install -g cnpm --registry=https://registry.npm.taobao.org

   MAC Terminal: sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装ionic-cli

   Windows 命名行: cnpm install -g ionic cordova

   MAC Terminal: sudo cnpm install -g ionic cordova

5. 创建Hello World

   根据Ionic2官方文档，创建并运行Hello World. http://ionicframework.com/docs/v2/getting-started/installation/

   ionic start HelloWorld
   cd HelloWorld
   cnpm install
   ionic serve

6. 自学Git

   http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000

参考资料

• JavaScript:http://www.runoob.com/js/js-tutorial.html
• SCSS: http://www.sass-zh.com/
• TypeScript: http://www.tslang.cn/docs/tutorial.html
• Ionic2: http://ionicframework.com/docs/v2/
• Angular2: https://angular.cn/docs/ts/latest/quickstart.html