HttpInterceptor接口是ng的http请求拦截器,当需要拦截http请求,可以实现该接口. 1.创建HttpInterceptor 的实现类,并使用@Injectable()注解 @Injectable() export class MyHttpInterceptor implements HttpInterceptor { constructor(private injector: Injector) { } intercept(req: HttpRequest<any>, ne…

预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第二部分: http://www.cnblogs.com/cgzl/p/7788636.html 第三部分: http://www.cnblogs.com/cgzl/p/7793241.html 第四部分: http://www.cnblogs.com/cgzl/p/7795121.html 第五部分:…

文章来自官网部分翻译https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced Angular5.0.0版本已经正式发布 总结一下v5.0.0带来的新变化都有哪些. 1.构建优化 5.0版本默认采用CLI构建和打包.构建优化器是包含在CLI里面的一个工具,通过对你的应用程序更加语义化的理解可以使得你的打包程序(bundle)更小.构建优化器有两个主要工作.第一,我们可以将应用程序的一部分标记为纯应用(pu…

前言: 在上一篇ng4文章<angular4--实际项目搭建总结>中说过,等到ng5正式发布,并且蚂蚁的NG ZORRO兼容ng5之后,我会对ng4项目进行升级.这篇文章就是大概说下升级的折腾过程吧.下面结语中有最佳实践,整个过程中有自己挖的坑,可以选择忽略,直接看结语. 升级(折腾)过程: ①ng5更新: 访问这个链接是ng的升级导向 https://angular-update-guide.firebaseapp.com/ ,内容如下图(看起来还是很简单的): 复制了导向上的命令,安装的时…

在将项目从angular4升级到angular5的过程中,出现No NgModule metadata found for 'AppModule'问题,网上查找答案将app.module.ts进行再次保存编译不报错,出现警告 解决方法,更新了package.json文件后,删除package-lock.json文件以及node_modules文件,重新运行npm install安装. 再次友情提示,不要用cnpm…

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.cnblogs.com/cgzl/p/8525541.html 这篇文章将介绍angular 5的全局错误处理. 需要使用到代码: https://pan.baidu.com/s/1F0KjbwVE8_Tzfwy69Alp-A angular 5 全局错误处理 参考文…

第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 第二部分: http://www.cnblogs.com/cgzl/p/8481825.html 第三部分: https://www.cnblogs.com/cgzl/p/8525541.html 第四部分: https://www.cnblogs.com/cgzl/p/8536350.html 这部分就讲从angular5的客户端上传图片到asp.net core 2.0的 web api. 这是…

在anular4更新到angular5后,有些模块也发生了有些变化,例如http模块. 首先在app.module.ts里面引入HttpClientModule import { HttpClientModule } from '@angular/common/http';   在组件使用的时候引入: import { HttpClient} from '@angular/common/http'; 然后实例化一下,就可以用了  …

1.首先,Angular5相对于Angular4有了一些新的特性: (1)i18n国际化管道: (2)一个组件可以以多个名称导出: (3)使用httpClient: 相比于http,httpClient的功能更加完善丰富--引入不可变的请求/响应对象.通过使用拦截器将中间件逻辑添加到管道中.支持JSON主体类型,不再需要显式分析.HttpClient支持请求上传和响应下载的进度事件. (4)5的渲染速度更快.移动设备体验更加优秀:另外,5的项目构建有所改进,编辑器也有所改进(这些等研究框架架构再…

最近接手了一个angular5的项目.项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的. 接手前几天当然是熟悉代码了.其中就有用到路由的几个延伸功能,比如子路由,路由延迟加载. 子路由children: 话不多说,先上代码 { path: '', component: QuestionsComponent, canActivate:[AuthGuard], children: [ {path: '', red…

步骤 1. 设置开发环境 在开始工作之前,你必须设置好开发环境. 如果你的电脑里没有 Node.js®和 npm,请安装它们. 请先在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 然后全局安装 Angular CLI . npm install -g @angular/cli 步骤 2. 创建新项目 打开终端窗口. 运行下列命令来生成一个新项目以及应…

用了两年angular1,对1的组件通信比较熟练,最直接的就是直接使用scope的父子节点scope就可以实现,且基本都是基于作用域实现的通信:还有就是emit,broadcast,on这几个东西了.但是到了angular2,就不再有作用域这个概念了,那么,angular2以后,组件的通信是什么样的呢? 主要是父子组件的通信,angular5使用的是@Input来实现父传子,通过@Output和EventEmitter来实现子传父.由此可见其单向数据绑定思想,对于提升效率有很大作用.而父子互传,…

拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angular5,所以获取元素时,要用到ElementRef;直接引用就好: 先来看下页面: import {Component, OnInit, ElementRef, ViewChild, OnDestroy} from "@angular/core";export class LoginCom…

指令写法,angular5官网文档给的很详细. 首先要创建一个文件,需注意命名规范(后缀名为xxx.directive.ts): 今天要记录的是在多个li中,右键点击之后显示出对应的菜单,直接上图吧! 右键点击在js中只需要这样写就行: document.oncontextmenu = function(e){   e.preventDefault(); }; 但是在angular中,需要单独定义指令,用@Input进行数据绑定,传递给父元素值,再用@Output将此事件发射出去,让父元素能够接…

1.使用cnpm安装jQuery和bootstrap后,页面没有加载的问题 -使用cnpm安装的路径和使用npm安装路径不一样,解决如下: 把css路径改成"../node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.min.css"使用node_modules里的带版本号的文件,原因是nodee_modules下的bootstrap只是一个快捷方式,不信你打开目录看下,如果是用webstorm开发的话,仔细看下文件夹右上…

import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http'; import { Observable } from "rxjs/Observable"; import { Adal4Service } from '../adal/adal4…

angular的坑永远都是那么多,当然了,主要还是我太菜~ 基于ngx-translate实现多语言切换这个功能,我又是折腾了很久,下面是我实现的过程: 1.安装ngx-translate 需要安装@ngx-translate/core和@ngx-translate/http-loader,我的问题主要出在这个,angular的版本不同,要安装对应组件的版本也不同. 可以到官网查看对应版本的说明:https://github.com/ngx-translate/core 我本地用的是angula…

一.checkedbox 1.ngModel绑定方式 <input [(ngModel)]="item.checked" value="item.checked" name="facilityList{{i+1}}" (click)="selectThisFacility(item)" class="week-checkbox" type="checkbox" data-code=…

该篇主要是结合刚发布不久的webpack4,搭建一个非cli的angular5的脚手架demo,主要分为以下几个方面阐述下脚手架结构: # 脚手架基础架构(根据angular5的新规范) /** * 脚手架结构 * */ —— src |—— app —— about —— index |—— app-rouing.module.ts |—— app.component.css |—— app.component.html |—— app.component.ts |—— app.module.…

Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个controller值相等)(equalTo) 怎样反向监听(先输入"再次输入密码",后输入设置密码) 解决思路: 第一个问题,可以通过[AbstractControl].root.get([targetName])来取得指定的controller,然后比较他们的值. 第二个,可以通过[targe…

本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7779384.html 写在前面: 因为最近总结自己之前做过的东西,所以顺便总结了这一篇,要发布文章时,刚好看到手机推送消息“angular5发布啦”啊哈哈哈哈哈哈.我不管我还是要把关于angular1的这篇文章放上来因为还涉及到webpack呢啊哈哈哈哈哈哈哈哈…… Angularjs+webpack实现模拟微信菜单编辑功能 1       环境配置:An…

我们可能会发现按照网上的方式下载安装后,使用Angular CLI生成的项目并不是我们想要的Angular的版本,因为在我们没有指定安装版本的前提下,默认会下载最新的版本安装,然而不同的Angular CLI版本在生成项目时默认的使用的Angular的版本又是不一样的,不同版本有些实现又存在差异,所以为开发者造成了很大的麻烦,下面我们来介绍一下安装指定的Angular CLI的方法(本文安装的Angular CLI默认生成的是Angular5.2.0的版本) 一.卸载之前的版本 npm unin…

开始尝试angular5,在此记录下踩过的坑以备查询 1.按照element-angular的文档引入后报错 is not part of the compilation output.解决方法--在配置文件tsconfig.json中添加配置: "include": [ "src/**/*", "node_modules/element-angular/index.ts" ] 2.每当回车另起一行后webstorm中有报错的红色波浪线.解决方法…

嗯, 在工作还辣么忙之时,看了这本书,感觉很不错.想分享给国内朋友们.结合自己的理解和整理加翻译,可能有点糙,但是,话糙理不糙嘛.出系列,不知道会不会弃坑,不立Flag了.持续更新.....我会放在印象笔记里,出分享链接,按章节出,章节可能当天写到哪里就是哪里,但是你看完了,不代表后面这个章节内容不会加,可是我还..没写完.谅解谅解,用小伙伴看45页我看17页的整理速度,希望给想入NG的小伙伴有帮助,文章语言尽量做到字面好理解,不高深,不造作,不傲娇. ^_^ 转载请注明出处,Thanks♪(･…

在之前的项目中,导航回上一个路由采用注入的Location服务,利用浏览器的历史堆栈,导航到上一步. 官方文档也就是这么写的 而然在升级到5.2的版本的时候,在浏览器运行的时候并没有什么问题,在项目打包成app运行的时候,在pad端就出错了, 查看的back方法看到了里面的一些注释 大概意思就是建议使用Router的方法进行路由跳转,location用于非路由的url跳转. 因此可以将上一个路由的地址保存在localStorage里面,返回时通过Router去跳转,也解决的在pad端出错的问题…

一共3种方法. 1.问号后面带的参数,获取参数的方式:ActivatedRoute.queryParams[id] 例如:/product?id=1&name=iphone还可以是: [routerLink]="['/books']" [queryParams]="{bookname:'<活着>'} 代码:html <h4>Messages</h4> <p>Total:{{msgs.total}}</p> &…

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced Version 5.0.0 of Angular Now Available We are pleased to announce version 5.0.0 of Angular, pentagonal-donut. This is a major release containing new features and bugfixes. Th…

…

今年下半年一直很忙,没有多少时间来写博客,很多笔记都记在了本地一起提交到了git上边. 夏末的时候做的两个vue项目中有接触到vue的路由守卫,今天在另外一个angular上,发现路由守卫有异常,导致可以跨权限访问页面. 路由守卫就不多介绍了,作业顾名思义,就是在路由跳转时判断权限的. angular2以上,路由有CanActivate守卫和另一个跳转守卫canDeactivate.两者一个是访问路由时触发,一个是离开路由页面时触发. import {CanActivate, Router} f…

@viewChild 作用一:选择组件内节点 <!--视图 --> <div #mydiv><input></div> // 选择 @ViewChild('mydiv') mydiv: ElementRef // 返回原生节点 let el = this.mydiv.nativeElement // // 使用原生方法 let ipt = el.querySelector('input') 作用二:选择子组件可调用自组件内的函数 子组件:@Component…