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

angularjs4+ionic3集成搭建的更多相关文章

  1. Spring+SpringMvc+Mybatis框架集成搭建教程

    一.背景 最近有很多同学由于没有过SSM(Spring+SpringMvc+Mybatis , 以下简称SSM)框架的搭建的经历,所以在自己搭建SSM框架集成的时候,出现了这样或者那样的问题,很是苦恼 ...

  2. Spring+SpringMVC+Mybatis(SSM)框架集成搭建

    Spring+SpringMVC+Mybatis框架集成搭建教程 一.背景 最近有很多同学由于没有过SSM(Spring+SpringMvc+Mybatis , 以下简称SSM)框架的搭建的经历,所以 ...

  3. SpringBoot+Mybatis集成搭建

    本博客介绍一下SpringBoot集成Mybatis,数据库连接池使用alibaba的druid,使用SpringBoot微框架虽然集成Mybatis之后可以不使用xml的方式来写sql,但是用惯了x ...

  4. Ionic3环境搭建及创建

    初次尝试Ionic,边学习边记录下来,以免以后忘记了,入坑向( ̄ω ̄;) 1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http ...

  5. Spring+SpringMvc+Mybatis框架集成搭建教程一(项目创建)

    一.框架搭建环境 Spring 4.2.6.RELEASE SpringMvc 4.2.6.RELEASE Mybatis 3.2.8 Maven 3.3.9 Jdk 1.7 Idea 15.04 二 ...

  6. Spring+SpringMvc+Mybatis框架集成搭建教程四(项目部署及测试)

    在IDEA中将项目部署到本地Tomcat下进行运行并验证整合结果 (1).点击如下图所示的下拉按钮,弹出Edit Configurations...后点击该项. (2).跳出如下界面后,点击红框内的& ...

  7. AngularJS4.0环境搭建详解--windows系统环境

    第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...

  8. windows环境下简单Jenkins持续集成搭建

    Jenkins是基于Java开发的持续集成工具,所以在安装Jenkins之前我们要确定电脑上已经安装了Java JDK并且环境变量配置正确,否则在启动使用java -jar Jenkins.war启动 ...

  9. EMQ --集成搭建

    集群方式接受 Erlang/OTP 最初是爱立信为开发电信设备系统设计的编程语言平台,电信设备(路由器.接入网关.…)典型设计是通过背板连接主控板卡与多块业务板卡的分布式系统. Erlang/OTP ...

随机推荐

  1. Ubuntu下freeradius-server的安装与mysql-server的关联

    1.创建freeradius数据库 #service mysql start ... #mysql -u root -p Enter password: 456456 ... mysql> cr ...

  2. [译]bare repository

    git init --bare 使用--bare创建的repository没有工作目录, 在这个repository中不能修改文件和commit. 中心repository必须是bare reposi ...

  3. 限制波尔兹曼机(Restricted Boltzmann Machines)

    能量模型的概念从统计力学中得来,它描述着整个系统的某种状态,系统越有序,系统能量波动越小,趋近于平衡状态,系统越无序,能量波动越大.例如:一个孤立的物体,其内部各处的温度不尽相同,那么热就从温度较高的 ...

  4. 【转】MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作

    [转]MyBatis学习总结(二)——使用MyBatis对表执行CRUD操作 上一篇博文MyBatis学习总结(一)——MyBatis快速入门中我们讲了如何使用Mybatis查询users表中的数据, ...

  5. Myeclipse Professional 2014使用软件获取激活码的方法(声明:破解仅仅是为个人使用Myeclipse,不作为商业获利.商业活动请购买正版软件)

    一下说明全部为网络来源,已经忘了原地址了,一直保留的是获取激活码用的软件和说明, 原著看见可联系(非常谢谢原作者): 获取激活码用的软件下载地址(个人百度云):http://pan.baidu.com ...

  6. css margin collapse

    css中存在margin collapse,即边界塌陷或边界重叠. http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.h ...

  7. 苹果APP发布

    1 发布方式 苹果发布上架有两种方式,一种是上传到苹果商店,一种是挂在web服务器上扫描下载,下面分别介绍这两种发布方式 1.1 上传AppStore 1. 用公司账号或者个人开发账号生成上架.p12 ...

  8. SSM-MyBatis-18:Mybatis中二级缓存和第三方Ehcache配置

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 二级缓存 Mybatis中,默认二级缓存是开启的.可以关闭. 一级缓存开启的.可以被卸载吗?不可以的.一级缓存 ...

  9. Codeforces Round #485 (Div. 2) F. AND Graph

    Codeforces Round #485 (Div. 2) F. AND Graph 题目连接: http://codeforces.com/contest/987/problem/F Descri ...

  10. yii2场景的应用(scenarios)

    例如: 现在在 post表里面有 title image content 三个的字段,当我创建一个 post 的时候,我想三个字段全部是必填项,但是你修改的时候,title content 两个字段是 ...