H5分享系列一----ionic/Angular框架概览

参考文档/资源

• To 美工：开发人员与美工的配合工作，请查看：
• Theming Ionic Apps
• Components
• ionicons
• 使用自定义icon
• To 开发人员：
• ionic官方文档
• ionic CLI
• Angular官方文档
• Angular架构
• Angular组件通讯
• Angular DI
• TypeScript文档
• cordova文档
• ionic远程调试
• ionic多首页-DeepLinker

分享大纲

ionic 技术架构

ionic技术架构

ionic 安装

Requirement

• Node.js 6
• xCode（非必需，只在运行iOS模拟器时需要）
• Android SDK/JDK （非必需，只在运行Android模拟器时需要）

安装

$ npm install -g ionic cordova

创建ionic项目

// 创建一个项目，名称为：cutePuppyPics；--v2表示使用ionic2；默认会以`tutorial`为模板来创建项目，可修改。
$ ionic start cutePuppyPics --v2

tutorial项目分析

开发工具的选择

浏览器调试

// -c表示打印客户端日志，-s表示打印服务端日志。
$ ionic serve -c -s

项目的文件结构

├── node_modules                               # 第三方库
├── platforms                                  # android/ios工程目录
│   ├── android
│   └── ios
├── plugins                                    # native插件
│   ├── cordova-plugin-console
│   ├── cordova-plugin-device
│   ├── cordova-plugin-splashscreen
│   ├── cordova-plugin-statusbar
│   ├── cordova-plugin-whitelist
│   └── ionic-plugin-keyboard
├── resources                                 # android/ios资源文件，如：app icon, 启动页面
│   ├── android
│   └── ios
├── src                                       # 业务逻辑代码目录，大部分时间我们都跟它打交道
│   ├── app                                   # App级别代码目录
│   ├── assets                                # 资源文件目录，如：图片/字体
│   ├── pages                                 # 页面存放目录
│   └── theme                                 # 公共样式
└── www                                       # typescript编译后的目录，可直接放到web服务器上
    ├── assets
    └── build

命名规范

详见Angular命名约定

App的入口

main.dev.ts -> app.module.ts -> app.component.ts

page跳转

iOS模拟器调试

$ ionic emulate ios

QA