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 技术架构

H5分享系列一----ionic/Angular框架概览_第1张图片
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

你可能感兴趣的:(H5分享系列一----ionic/Angular框架概览)