第一章： ionic介绍及环境搭建
ionic = Cordova + angular + ionic CSS;
ionic是基于google的angular的框架，在angular基础上做一个封装，ionic调用原生的功能是基于Cordova(Cordova能调用javascript原生的功能Api),ionic内部有封装一套自己的CSSUI库组件。
一.开发工具介绍：
1.Webstorm
2.Visual Studio Code(微软)
二.环境搭建：
安装Nodejs；
npm install -g Cordova ionic //安装ionic；
注意：ionic有可能安装失败
检查自己的nodejs版本；
安装cnpm npm install -g registry=https://registry.npm.taobao.org,以后所有的npm指令都可以用cnpm代替;
第二章：通过指令新建一个ionic项目
1.新建一个项目 ：
a.. ionic start myAppName tabs;
b.. cd到刚创建的项目文件夹中；
c.. ionic serve 运行项目；
第三章： ionic项目目录结构分析
ionic基本目录结构
1.hooks：编译cordova自定义的脚本，方便整合到我们的编译系统和版本系统中；
2.node_modules: node的各种依赖包；
3.platforms:生成android和iOS安装包路径（platforms\android\build\outputs\apk:apk
所在位置)，执行Cordova platform add android后会生成；
4.plugins:插件文件夹，放置各种Cordova插件；
5.resources：资源包（android和iOS一些启动图标和启动动画资源）
6.src：开发的工作目录，页面、样式、脚本和图片都放在这个目录下，平常开发只要关注这个文件夹目录；
7.www：静态文件；
8.config.xml:打包成app的配置文件
9.package.json: 配置项目的元数据和管理项目所需要的依赖；
10.tsconfig.json：typescript项目的根目录，用来指定这个项目的根文件和编译选项；
11.tslint.json:格式化和校验typescript；
src里面的基本结构
1. app:应用的根目录
2. assets:资源目录（静态文件、图片、js框架…）等
3. pages:页面文件；
4.theme:主题文件，设置主题信息；
第四章 创建组件
1.cd 到项目目录
2.通过指令ionic g component组件名称 来创建组件
3.创建完成后在src目录下面会多出一个components的目录，这个目录里面放置以后创建的所有组件；
4.若要使用创建的组件，必须在app.modules.ts里面注册我们的模块，注册完成后可以在其他的pages（page里面也要注册组件）里面使用这些组件；
第五章 创建页面
1.cd到项目目录；
2.通过指令ionic g page页面名称 来新建页面；
3.跟创建组件一样，要在用到的地方导入我们新建的页面；
第六章 创建请求服务（http、jsonp请求）
一ionic get请求数据：
1.在app.module.ts文件中引入HttpModulu、JsonpModule,并且在下面的@NgModule方法中注入HttpModulu、JsonpModule;
2.在需要用到请求的页面引入Http；
3.在构造函数内声明http；
4.在对应的方法中使用方法请求；
5.jsonp方式请求的话，要在请求路径后面拼接上&callback=JSONP_CALLBACK
二.ionic post请求数据
1.引入Headers、Http模块，
import {Http,Jsonp,Headers} from "@angular/http";
2.实例化headers，
private headers = new Headers({'Content-Type': 'application/json'});
3.post提交数据，
this.http.post('http://localhost:8008/api/test',JSON.stringify({username: 'admin'}),{headers:this.headers})
// .toPromise()
.subscribe(function(res){
console.log(res.json());
});
网友评论