1:安装一下cnpm用淘宝镜像安装

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

2:使用 cnpm命令安装(全局安装 Angular CLI 脚手架工具)

cnpm install -g @angular/cli

3:ng new 项目名称 创建一个项目

ng new my-app

4:进入刚才创建的项目里面启动服务

cd my-app cnpm install //安装依赖 ng serve

5:运行

ng serve --open

6:项目导入

7:创建组建

cd 项目

ng g component components\login

8:属性 定义 赋值，*ngFor *ngIf 与 [hidden]

[hidden] 可以解决 同数组 引入多模板异常

9:数据双向绑定

需要引入组件

在app.module.ts中增加

import { FormsModule } from '@angular/forms';

imports: [

BrowserModule,

FormsModule

],

事件 [(ngModel)]="属性"

10:公共组件 放到 单独的服务中

11: 创建服务

ng g service service\storage

storage.service.ts

localStorage.setItem(key,JSON.stringify(v))

JSON.stringify(localStorage.getItem(key))

在app.module.ts中 引入 注入

import { StorageService} from 'storage.service.ts文件件目录(去掉后缀)';

providers:[StorageService]

其他组件引入

import { StorageService} from 'storage.service.ts文件件目录(去掉后缀)';

构造函数 声明注入

constructor(private storage:StorageService){

this.storage.setItem("","");

}

二

安装 Ionic

cnpm install -g cordova ionic

ionic -v

ionic start hyd-mobile blank/tabs

ionic serve

5创建 ionic组件

cd hyd-mobile

ionic g component 组件名

第一次创建模块 会生成一个模块管理文件，后期不会生成只会自动追加 引入...

6复制，list展示

7.ionic 组件 根目录引入新建的模块，注册模块

新建的模块需要用 abgularjs的语法需要引入abgularjs相关组件(BrowserModule)

8.创建一个页面

ionic g page 页面名

新建的页面需要在app\app.module.ts 引入、生明

9.页面跳转 路由

10.新增tabs，子页面隐藏tabs，在app\app.module.ts设置

11. ionic开发——Node Sass does not yet support your current environment解决办法

npm uninstall --save node-sass

npm install --save node-sass

@ionic\app-scripts

npm install ion-multi-picker@2.1.0 --save

12.打包

http://blog.csdn.net/liujiawei00/article/details/74356356

https://www.cnblogs.com/jiangtengteng/p/6680654.html

ionic cordova platform add android

ionic cordova build android/ ionic build android --prod

build android -release

(node:17392) UnhandledPromiseRejectionWarning: Error: cmd: Command failed with exit code 1 Error output:

FAILURE: Build failed with an exception.

 

Built the following apk(s):

E:\hy_workspace\hyd-mobile\platforms\android\app\build\outputs\apk\debug\app-debug.apk

【技巧】ionic3优雅解决启动前、后黑白屏问题

https://www.jianshu.com/p/87efc5e396c3

ionic cordova build android --prod

https://www.jianshu.com/p/102bd23625cb

极光推送

https://www.jianshu.com/p/eb8ab29329d9

ionic2实战-签名android App/android打包

https://www.jianshu.com/p/8b2a9c3a1c07

ionic2实战-扫描二维码下载app,同时支持android和ios

https://www.jianshu.com/p/a589335e861e

ionic2实战-封装插件进行精确定位和导航

https://www.jianshu.com/p/85aceaee3b35

语法校验的坑

https://www.cnblogs.com/eedc/p/7833550.html

ionic2实战-添加拍照功能cordova-plugin-camera

https://www.jianshu.com/p/29247301a611

切换淘宝源：

设置：npm config set registry https://registry.npm.taobao.org

查看：npm config get registry