最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块. 之前使用的ajax库是axios,可以设置baseurl,公共头部:集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能. 拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现 设置baseur…

. 现在开始需要集成angular6到VS项目中 1.1 打开Startup.cs文件, 在ConfigureServices方法中配置angular files的目录. 1.2 在Configure方法中配置启动npm脚本. 到这一步,我们可以通过F5 运行整个VS项目,并且能够看到angular欢迎界面,但是还没有从我们的web api 得到data. 1.3 回到vs code 工具,我需要通过vs code 去创建一些ts文件. 1.3.1 首先先创建一个endpoint factory…

. 创建angular6 前提: 需要安装nodejs以及angular的脚手架,Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用. 我的版本是 v10.10 (NodeJS) v6.4.1(npm) 安装了angular/cli 才能用ng命令 最好安装成global. 1.1 现在我们打开vc code,直接选择上一篇创建的.net core 项目路径,如下 我们在Terminal中执行ng 命令(这是创建angular项目的命令)…

今天在angular6项目中写了个拖拽功能,但是控制台报错,如图 后来在控制台打出发现,原来是 ngOnInit( ) 这个生命周期里,页面的dom节点还未产生,还只是null. 改为用 ngAfterViewInit( ) 生命周期内调用就可以了.…

本片博客主要是记录实际项目开发中使用Angular6框架,遇到的一个问题. 现象: Angular6框架写的前端web网页,在实际部署运行过程中遇到了一种现象,引入懒加载以后,加载登录面速度很快,但是登录成功以后,页面切换到首页面组件这个过程却很慢,总是登录页面显示登录成功以后,停留好长时间页面才会切换到首页面. 现象分析: 加载登录页面花费了一段时间开销,登录成功以后,页面切换到首页面,加载首页面又需要花费一段时间开销.加载首页module模块时候,花费的时间开销远大于登录组件的时间开销,所以…

为什么打算写这些文章? 没有为什么,只是为了学习Angular和更了解.Net Core等技术 需要用到的技术? 后端使用.Net Core 2.1 + EF Core 2.1 + Mysql 5.7 + Identity (不知道Identity算不算一个独立的技术点) 前端主要使用的是Angular 6.x + Ant (出自阿里巴巴的一套angular开源组件库)https://ng.ant.design/docs/introduce/zh 大纲 开发环境搭建 Angular的使用姿势 A…

一.项目需求 最近公司有终端桌面系统需求,需要支持本地离线运行(本地数据为主,云端数据同步),同时支持Window XP,最好跨平台.要求安装配置简单(一次性打包安装),安装包要小,安装时间短,可离线安装.技术要求使用主流技术,有利于扩展,升级,便于迁移到其它各种终端和平台应用. 二.需求分析和选择技术方案 通过需求分析,采用Web终端混合架构开发桌面应用系统.首先就是要找一个web混合架构开发框架.通过Google百度查找资料,最后主要在选择NWJS和Electron框架上,两款框架都是基于C…

mkdir  angular6project cd angular6project ng new demo      新建一个普通项目 ng new demo --routing  新建一个带路由的项目 新建项目过程比较慢 新建完成之后 cd demo ng serve --open 若要切换端口启动angular项目可以使用如下命令 ng serve --port=8888 或者修改项目文件,有如下两种方式: 1.修改node_modules/@angular/cli/lib/config/s…

一.运行截图 截图1: 截图2: 二.代码 html代码: <div class="time" > <ng-container #container> </ng-container> </div> <ng-template #child_elem> <div class="digit minutes"> <div class="segment "></div…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 指令 大家应该都知道,在html中存在一些附加在元素节点上的标记,例如属性,事件等等.它们能够改变元素的行为,甚至操作DOM,改…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 内容投影 1为什么需要内容投影? 一个事物的出现,必然存在它所能解决的问题,让我们先从问题出发吧: 大家应该都知道,在html规…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 目录章节 1 前言 2 Angular组件间的通讯 2.1 父子组件间的通讯 2.1.1 父组件设置子组件属性 2.1.2 父组…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 章节目录 1插值语法和表达式 2在模板内部定义变量 3值绑定,事件绑定,双向绑定 4内置结构型指令*ngIf,*ngFor,ng…

结论:   结论放最上面,送给匆匆查资料的你: 同时使用延迟加载 + 路由复用,一定不能使用route.routeConfig.path做key去缓存,否则会死得难看. 经实测(我没有完全去解读源代码),将缓存的key改为下面的函数计算可行. private getRouteUrl(route: ActivatedRouteSnapshot) { return route['_routerState'].url.replace(/\//g, '_') + '_' + (route.routeCo…

从Angular5升级到Angular6, angular6相比较于angular5 总体变化不大,但是在RXJS上面却有一些变动,不得不说,虽然很讨厌break update但是RXJS6的新特性对于angular应用的优化是有很大一块空间的 快速修复 对于写了半年多的项目,模块已经很多了,所以不可能在升级到angular6后马上更新所有代码关于RXJS6的新特性,所以官方给出了一个可以暂时延缓我们不需要修改rsjx代码的办法 npm install --save rxjs-compat 优点…

angular7 出来有一段时间了,然后我们项目一直用的是angular6, 看到一直再用的Ng-Zorro 更新版本了,然后就觉得把目前的项目也升级一下把. 目前我本地cli版本是6.0.8我要把他升级到最新的版本 npm i -g @ angular / cli 这将在计算机中全局安装Angular CLI 7.0.请参考下图: 要检查计算机中安装的角度CLI的版本,请运行以下命令: ng version…

angular6 可以使用的toast插件有好多个,在目前来看ngx-toastr在过去一年时间的使用量和受欢迎程度可以说是一骑绝尘,如下图: 我也就选择了ngx-toastr这个插件,使用步骤如下: 1.安装ngx-toastr和它的依赖@angular/animations npm install ngx-toastr --save npm install @angular/animations --save 2.在angular-cli.json中添加css样式 "styles"…

angular6.x系列的学习笔记记录,仍在不断完善中,学习地址: https://www.angular.cn/guide/template-syntax http://www.ngfans.net/topic/12/post/2 系列目录 (1)组件详解之模板语法 (2)组件详解之组件通讯 (3)内容投影, ViewChild和ContentChild (4)指令 (5)路由 路由存在的意义 一般而言,浏览器具有下列导航模式: 在地址栏输入 URL,浏览器就会导航到相应的页面. 在页面中点击…

Angular6如何引入jQuery-knob 1.概述 Angular6引入jQuery变得异常简单,请参考https://blog.csdn.net/qq_35321405/article/details/80270496 同样,Angular想使用jQuery-knob和jQuery一样的操作. 2.简单流程 yarn add jquery 或者 npm install jquery --save(后面省略或的内容) yarn add @types/jquery yarn add jque…

angular6 路由拼接查询参数如 ?id=1 并获取url参数 路由拼接参数: <div class="category-border" [routerLink]="['/list/' + category.id + '/' + category.slug]" [queryParams]="{id: 1}"> 拼接后在浏览器显示: 域名  http://localhost:4200/?id=1 angular 获取参数 id 的值…

Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本,此次更新更多地关注于工具链上,以使其具有更好的可移植性. 此次更新信息如下: 更新依赖关系: @angular/core 现在依赖于: TypeScript 2.7 RxJS 6.0.0 tslib 1.9.0 @angular/platform-server 现在依赖于 Domino 2.0 特性…

1. 找到 polyfill.ts 并打开注释 /** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before…

参考地址:https://www.jianshu.com/p/55e503fd8307…

…

首先要更新或者安装 ionic cli npm install -g ionic 创建项目 ionic start ionic-angular tabs --type=angular –type=angular 是需要多加的参数,现在官方只集成好了angualr 或许以后就会有 --type=vue  or --type=react 呢 新建好项目后你会发现,与ionic2 ionic3项目 它的目录结构变了.在ionic4 ,已更改为遵循每个受支持框架的建议设置.例如,如果某个应用程序正在使用…

第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.module.ts 中引入 HttpClientModule 模块. // app.module.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, HttpClien…

safe-url.pipe.ts import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'safeUrl' }) export class SafeUrlPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer…

import { Injectable, isDevMode } from '@angular/core'; import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http'; import { environment } from '../../environments/environment'; import { Observable } from 'rxjs'; @Injectable() export c…

angular.json文件:(红色加粗部分) { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", , "newProjectRoot": "projects", "projects": { "bot-cmap": { "root": "", "source…

一直以为   pipe(debounceTime(1000), distinctUntilChanged())  不起作用 原因:使用方法错误 <input type="text" [(ngModel)]='globalSearchWord' placeholder="请输入搜索关键词" (keyup)='globalSearch()'> globalSearch(v) { this.showErrBox = false; this.indexServi…