angularjs4+ionic3集成搭建
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集成搭建的更多相关文章
- Spring+SpringMvc+Mybatis框架集成搭建教程
一.背景 最近有很多同学由于没有过SSM(Spring+SpringMvc+Mybatis , 以下简称SSM)框架的搭建的经历,所以在自己搭建SSM框架集成的时候,出现了这样或者那样的问题,很是苦恼 ...
- Spring+SpringMVC+Mybatis(SSM)框架集成搭建
Spring+SpringMVC+Mybatis框架集成搭建教程 一.背景 最近有很多同学由于没有过SSM(Spring+SpringMvc+Mybatis , 以下简称SSM)框架的搭建的经历,所以 ...
- SpringBoot+Mybatis集成搭建
本博客介绍一下SpringBoot集成Mybatis,数据库连接池使用alibaba的druid,使用SpringBoot微框架虽然集成Mybatis之后可以不使用xml的方式来写sql,但是用惯了x ...
- Ionic3环境搭建及创建
初次尝试Ionic,边学习边记录下来,以免以后忘记了,入坑向( ̄ω ̄;) 1.Ionic环境安装 Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs.下载安装:http ...
- 通过springBoot集成搭建webScoket服务器
前言: 最近工作中有一个需求,就是服务端要主动推送消息给客户端,而我们平常的Http请求只能一请求一响应,为此学习了webScokset通讯技术,以下介绍的是java 通过SpringBoot集成we ...
- 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 二 ...
- Spring+SpringMvc+Mybatis框架集成搭建教程四(项目部署及测试)
在IDEA中将项目部署到本地Tomcat下进行运行并验证整合结果 (1).点击如下图所示的下拉按钮,弹出Edit Configurations...后点击该项. (2).跳出如下界面后,点击红框内的& ...
- AngularJS4.0环境搭建详解--windows系统环境
第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...
- windows环境下简单Jenkins持续集成搭建
Jenkins是基于Java开发的持续集成工具,所以在安装Jenkins之前我们要确定电脑上已经安装了Java JDK并且环境变量配置正确,否则在启动使用java -jar Jenkins.war启动 ...
随机推荐
- 合并两个有序数组的golang实现
给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别为 m 和 n. ...
- IE和其他浏览器内核
1.qq急速 2.qq的IE兼容模式 3.Edge 4.IE11 5.chrome js获取浏览器内核 <script language="JavaScript" type= ...
- [NOI2017]蔬菜
[NOI2017]蔬菜 题目描述 大意就是有\(n\)种物品,第\(i\)个物品有\(c_i\)个,单价是\(a_i\).然后每天你可以卖出最多\(m\)个物品.每天结束后第\(i\)种物品会减少\( ...
- 设计模式のVisitorPattern(访问者模式)----行为模式
一.产生背景 访问者模式是封装一些施加于某种数据结构之上的操作.一旦这些操作需要修改的话,接受这个操作的数据结构则可以保存不变.访问者模式适用于数据结构相对稳定的系统, 它把数据结构和作用于数据结构之 ...
- Python 带参数的装饰器 [2] 函数参数类型检查
在Python中,不知道函数参数类型是一个很正常的事情,特别是在一个大项目里.我见过有些项目里,每一个函数体的前十几行都在检查参数类型,这实在是太麻烦了.而且一旦参数有改动,这部分也需要改动.下面我们 ...
- 机器学习算法总结(二)——决策树(ID3, C4.5, CART)
决策树是既可以作为分类算法,又可以作为回归算法,而且在经常被用作为集成算法中的基学习器.决策树是一种很古老的算法,也是很好理解的一种算法,构建决策树的过程本质上是一个递归的过程,采用if-then的规 ...
- Request Body可以反复读取的方法
org.springframework.web.filter.HiddenHttpMethodFilter:过滤器已经读取流了,因此想频繁读取流的话,自定义Filter必须在org.springfra ...
- 6.oop-类和对象
一.如何抽象对象1.创建一个类2.给该描述属性 属性就是java中所有的数据类型3.给该类定义行为方法 方法的签名是:public void 方法名(){方法体} 公共的 无返回类型 二.如何使用类和 ...
- modbus与rs485的关系_modbus与rs485的区别和联系
http://www.elecfans.com/tongxin/123/20180103610476.html 经常看到RS485和MODBUS写在一起,它们的区别和联系? RS485是一个物理接口, ...
- Python框架学习之Flask中的视图及路由
在前面一讲中我们学习如何创建一个简单的Flask项目,并做了一些简单的分析.接下来在这一节中就主要来讲讲Flask中最核心的内容之一:Werkzeug工具箱.Werkzeug是一个遵循WSGI协议的P ...