前端
ningmengbaby
每个人都有属于自己的那个闪光点,重要的是绽放!
展开
-
ionic 切换开关
【前言】 最近在做积分项目,前端用的是ionic,经过锻炼也学到了很多的东西。 【过程】 开发消息通知功能。一开始画的是页面,在百度上一搜,菜鸟教程,csdn博客很多的文章,但是经试验无果,本来以为是没有引入人家的css样式,想得很复杂然后还没有实现。后来经过大神们的指点,两三行代码就搞定了。详情请见ionic官网 <ion-item> <ion-label>...原创 2018-09-22 12:27:06 · 769 阅读 · 7 评论 -
Angular4+ echarts
【前言】 最近接到了一个任务就是把前端的表格改成echarts折线图的样式。 【过程】 1.添加插件 echart cnpm install echarts --save 在package.json里面就会看到echarts的版本,cnpm install echarts --save 是默认下载到dependencies下面而 cnpm install echarts --save-d...原创 2018-11-04 20:48:43 · 629 阅读 · 1 评论 -
Jenkins构建问题
前端ng-modules报错解决思路 1.rimraf node_modules 2.删除package-lock.json 3.指定官网地址( npm config set registry http://registry.npmjs.org)4.npm install 5.(可有可无本地打包) ng build --prod --output-path=typing-dev --base...原创 2018-10-28 12:02:16 · 576 阅读 · 18 评论 -
AngularJs核心功能
以下是AngularJS中最重要的核心功能: 数据绑定: 模型和视图组件之间的数据自动同步。 适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。 控制器: 这些Javascript函数绑定到特定的范围。 服务: AngularJS配有多个内置服务,例如 $http 可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。...原创 2018-08-26 21:37:00 · 227 阅读 · 12 评论 -
jenkins部署前端错误总结
【前言】最近在Jenkins部署前端次数很多,把错误总结一下。【过程】 解决方法:删除node库重新安装。解决方法:npm install --save-dev @angular.cli@latest原因:错误都会给出提示,看到出错点就可以了。解决方法:删除node库重新构建,把源代码重新放到有Jenkins的服务器中。原因:出错的原因是因为没有源代码了。【总结】不要被同一块石头绊倒两次,仔细分析...原创 2018-03-31 21:41:27 · 3488 阅读 · 10 评论 -
Angular4解决包过大的问题
【背景】 最近几天一直在做前端代码优化的研究,分享给大家。【方案】 1.借助nginx,使用gzip压缩, 2.angular4升级为5 3.使用代码自动构建工具gulp,将构建包的css/html/js/images压缩。 4.升级脚手架angular/cli 5.生产环境打包的命令 【实践】 ...原创 2018-03-22 21:20:50 · 2564 阅读 · 30 评论 -
angular4 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfac
刚开始遇见错误的时候还以为是项目内部的问题,查了一些资料发现是angular-cli的版本有点低了。解决步骤如下:第一步:rimraf node_modules第二步:cnpm install @angular/cli@latest --save-dev第三步:cnpm install完美三步,问题解决。...原创 2018-03-21 21:49:24 · 1445 阅读 · 23 评论 -
Angular4与PrimeNG
【前言】最近遇到了一个需要修改第三方组件库PrimeNG日历控件样式的问题,每一次遇见问题都是我们成长的机会。【过程】1.下载安装依赖包2.下载安装PrimeNG第三方组件库cnpm install primeng cnpm install font-awesome cnpm install @angular/animations3.配置module.ts和html模块。具体步骤:(1)使用组件之...原创 2018-03-13 20:22:24 · 1446 阅读 · 8 评论 -
前端亟待研究的点
【前言】前后端分离是ITOO的现状,那么前端将从哪些方面进步呢?记录一下让更多的能人志士能发挥自己的余热也是给自己定下一个短期的目标。【内容】1.如何修改第三方组件库的样式 2. 生产环境打包3.前端代码规范4.前端自动化测试的研究(端对端测试、单元测试)5.通用的方面做成一个框架相当于封装6.怎样缩短别人学习前端的代价?以上的几个问题都是根据紧急程度来划分的,现在angular6都出来了,...原创 2018-03-11 21:01:52 · 227 阅读 · 9 评论 -
Angular4之八大核心简介
【背景】 最近在学习前端Angular,迫不及待想把学习到的内容跟大家分享。 【内容】 Angular是一个用HTML和JavaScript或者一个可以编译成JavaScript的语言(TypeScript),来构建客户端应用的框架。 Angular 主要分为八大构造块(也就是八个核心概念):模块 (module)、组件 (component)、模板 (template)、元数据 (原创 2018-02-04 21:33:08 · 1571 阅读 · 12 评论 -
Angular4--数据绑定、响应式编程
概念 Angular中的数据绑定指的是同一组件中控制器文件(.ts)与视图(.html)之间的数据传递。 分类 单向绑定 ts->html html->ts 小结:ts->html使用插值表达式{{value}}或[attr],html->ts使用(event)。ts->html较为常用。 双向绑定 ts文件与原创 2018-01-23 14:58:07 · 969 阅读 · 25 评论 -
Angular4--依赖注入
【背景】最近在学习Angular,迫不及待想跟学习到的知识跟大家分享。【内容】什么是依赖注入?依赖注入是“控制反转”(将实例化这个类的控制权交给外部,从而实现类与组件的解耦)的一体两面。控制反转是目的,依赖注入是手段。是不是不太明白,说得直白一点就是在程序运行过程中,如果需要调用另一个对象协助时,无须在代码中创建被调用者,而是依赖于外部的注入。怎么用?我们在组件需要某个服务的实例时,不需要手动创建...原创 2018-01-22 16:27:32 · 1257 阅读 · 99 评论 -
Angular4--路由基础
【背景】 最近在学习Angular,迫不及待的想把学习到的内容跟大家分享。 【内容】 1.实现一个简单的路由 (1)使用angular-cli创建一个带路由的项目 ng new 项目名称 --routing 会多创建一个app-routing.module.ts文件代码如下 import { NgModule } from '@angular/core'; import {原创 2018-01-15 17:30:22 · 408 阅读 · 21 评论 -
Angular4创建第一个项目
【背景】 最近在学习Angular,刚接触一个东西最好的方法当然是多多的敲小demo了。 【步骤】 1.设置开发环境 在开始工作之前,我们必须设置好开发环境。 如果你的机器上还没有Node.js®和npm,请先安装它们。 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 和 npm 的版本。 然后全局安装Angular...原创 2018-01-15 15:08:18 · 1047 阅读 · 26 评论 -
AngularJs 与echarts结合实例
【前言】 最近在做的项目前端是用的AngularJs,后端用的是SSM。最近的业务需求是使用echarts显示图表。 【过程】 1.刚接到这个需求的时候,觉得难点应该是前端,因为公司的其他几个同事老是跟我灌输前端多么多么麻烦的思想,再加上看到他们好多业务逻辑都写在前端,让我也不免担心起来。 2.进行过程中看了echarts的官网,话不多说,拿官网的一个例子简要说明一下。 option ...原创 2018-06-26 23:38:02 · 1939 阅读 · 20 评论 -
Echarts tooltip 柱状图上方加百分比
【前言】 最近在做的项目前端用到了echarts,有个需求就是在柱状图上方加上数据并且加上百分号。 【过程】 经过多方实践,终于成功了。 series[{ label:{ normal:{ show:true, position:'top' ---数据显示在上方 ...原创 2018-08-14 21:18:56 · 10406 阅读 · 5 评论 -
echartsY轴数据不置顶
【前言】 最近有个需求是Y轴数据为自适应的,并且不能置顶。 【过程】 这样的话,普通的echarts的max ,min ,interval就不能用了。 var max=Max.max.apply(null,data); -----data为查询到的数据,此行代码是取得查询数据的最大值 if (max %10 ==0) { ...原创 2018-08-14 21:31:49 · 2480 阅读 · 7 评论 -
Angular两个界面中传值
【前言】 最近在做的一个功能是当检测到是pk练习进入的界面,然后限时按钮就自动打上勾。 【过程】 1.在显示开始pk的界面的ts定义一个可以标识的字段 pkflag: string; // 跳转界面时的标识 2.然后跳转页面的事件里面带上标识字段的参数 this.router.navigate(['workspace/typing-test'],{ queryPa...原创 2018-11-10 10:43:48 · 2138 阅读 · 3 评论