angularjs中使用锚点，angular路由导致锚点失效的两种解决方案
壹 ❀ 引
公司新项目开发中，首页要做个楼层导航效果(如下图)，要求能点击图标对应跳到楼层即可，因为不需要跳转过度动画，也要求最好别用JQ，想着原生js操作dom计算top的兼容性，想着用锚点实现算了，结果一番波折，也是弄的我头大，所以这里就做个记录吧。
我们都知道锚点一般做法是通过a标签结合目标id来做，结果 ...
Angular 调用百度地图API接口
Angular 调用百度地图API接口
参考原文：https://blog.csdn.net/yuyinghua0302/article/details/80624274
下面简单介绍一下如何在Angular中使用百度地图。
第一步：申请百度地图密钥。
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
第二步：在Angular项目中引入百度地图API文 ...
Angular配置路由以及动态路由取值传值跳转
Angular配置路由
1、找到 app-routing.module.ts 配置路由
引入组件
import { HomeComponent } from './home/home.component';
import { NewsComponent } from './news/news.component';
import { NewscontentComponent } from './newscontent ...
angular路由事件
Angular 4检测路由变化，可以使用router.events来监听：
支持的事件类型：
NavigationStart：导航开始
NavigationEnd：导航结束
NavigationCancel：取消导航
NavigationError：导航出错
RoutesRecoginzed：路由已认证
在判断事件类型需要导入对应的事件类型，如：
import { Router, NavigationStart& ...
Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇，在这个系列当中，我会结合这近两年中对Angular、Ionic、甚至Vuejs等框架的使用经验，总结在应用设计和开发过程中遇到的问题、和总结的经验，来说一下Angular应用的架构设计相关的一些问题，包括像组件设计、组件之间的数据交互与通信、Ngrx Store的使用、Rxjs的使用与响应式 ...
angular 中引入 markdown
ngx-markdown 是 Angular2+ 的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。
GITHUB地址：https://github.com/jfcere/ngx-markdown
安装
1. 安装 ngx-markdown
使用 npm 进行安装，在 `angular｀项目目录中执行：
npm install ngx-markdown --save
在应用中引 ...
Angular中使用ECharts图表
1.安装：
npm install echarts --save
2.在 TypeScript 文件中导入echarts
import * as echarts from 'echarts';
3.根据官方demo和API，开发自己的需求即可
https://www.echartsjs.com/examples/4.html布局
<div id="lineChart" style="width: 600px;height:400px;"></div>
5.ts代码
import { Component, OnInit } ...
Angular与Vue
最近在考虑对前端js框架的选择
根据前人的总结，就总结一下 Angular与Vue 的特点与区别
速度/性能
虽然 Angular 和 Vue 都提供了很高的性能，但由于 Vue 的虚拟 DOM 实现的重量较轻，所以可以说 Vue 的速度/性能略微领先。
更简单的编程模型使 Vue 能够提供更好的性能。Vue 可以在没有构建系统的情况下使用，因 ...
React、Vue、Angular对比 ---- 介绍及优缺点
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站， 并于 2013年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。它有以下的特性：
1.声明式设计：React采用声明范式，可以轻松描述应用。
2.高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活：React可 ...
angular 升级到angular8 以及报错信息解决
1.升级全局angular-cli
npm install -g @angular/cli@latest
2.升级项目内 angular-cli
(在需要升级的项目中运行)
npm i @angular/cli@latest
3.升级剩下的所有组件
ng update --all --force
4.更新所有需要安装的组件
（在需要升级的项目下）
npm i
如果出现报错信息类似 ...
angular 8 配置路由
一、生成路由文件
按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。
使用CLI生成它。
ng generate module app-routing --flat --module=app
然后查看src/app目录下是否生成成功。
接下来，我们查看生成的文件：
import { NgModule } ...
angular入门
一、Angular 介绍
Angualr 是一款来自谷歌的开源的 web 前端框架，诞生于 2009 年，由 Misko Hevery 等 人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。
根据项目数统计 angular(1.x 、2.x 、4.x、5.x、6.x、7.x)是现在网上使用量最大的框架
Angualr 基于 TypeScript 和 re ...
Angular----样式
本篇根据Angular官网提供的例子，对Angular涉及到的样式绑定进行说明。
一、提供的CSS样式
1 .red{
2 color:red;
3 }
4 .green{
5 color: green;
6 }
7 .yellow{
8 color: yellow;
9 }
10 .size{
11 font-size: 20px;
12 }
13 .back{
14 background-color: gray;
15 opacity: 0.4;
16 }
二、绑定样 ...
angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例
一、项目介绍
运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室angular-chatroom实例项目，实现了下拉刷新、聊天消息右键菜单、发送消息、表情(动图)，图片、视频预览，红包打赏等功能。
二、技术实现
MVVM框架：angular8.0 / @angular/cli
状态管理：@n ...
Angular项目目录结构
前言：不支持MakeDown的博客园调格式的话，真的写到快o(╥﹏╥)o了，所以老夫还是转战到CSDN吧，这边就不更新啦啦啦~
CSDN地址：https://blog.csdn.net/Night20181029 比较麻烦就是要审核，┓( ´∀` )┏
github地址：https://github.com/KKQQ9/Notes
掘金地址：https://juejin.im/user/5d2b4fcef265da1b8c1 ...
Angular中使用bootstrap样式
Angular中使用bootstrap样式
Angular中引入bootstrap的方法
方法1：在Angular.json中的styles数组中添加bootstrap路径
如下所示：
"styles": [
"src/styles.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
]
这里需要注意路径问题，不同Angular版本下，Angular.json的位置可能有所不同，因此对 ...
Angular中引入外部js的使用方式
在Angular中我们或许会用到部分外部插件的时候，像Bootstrap,Jquery这些当然我们可以通过Npm安装包的形式引入，但是还有一些其它的js库需要引入的话，我们又应该怎样操作呢?
在这里做一个简单的介绍，便于记录↓
1、将自己下载好的js包文件放入项目指定文件夹中
2、然后在Angular.json中引入相关js文件
3、然后我们需要在 ...
Ng-Matero：基于 Angular Material 搭建的中后台管理框架
Ng-Matero 0.1 已发布，添加 schamatics，支持 ng add
前言
目前市面上关于 Angular Material 的后台框架比较少，大多都是收费主题，而且都不太好用。
很多人都说 Material 是一个面向 C 端的框架，其实在使用其它框架做管理系统的时候，我发现 Material 的组件基本已经够用了，其它不足的地方可以配合一些优秀的第三方 ...
angular 的 ChangeDetectorRef
监测页面数据变化angular 会在我们的组件发生变化的时候，对我们的组件执行变化检测，如果检测到我们的数据发生了变化，就会执行某些操作，如修改绑定数据的时候更新视图。这样一来，当我们的组件数据比较多的时候，angular就会有很多操作在静悄悄地进行，因此，就需要ChangeDetectorRef来实时检测数据的变化并更新视图数据 ...
Angular
1、数据绑定的四种形式：
（1）插值 <p>{{title}}</p>
（2）属性绑定 <img [src]="userUrl"/>
（3）事件绑定 <button (click)='onSave()'>点击</button>
（4）双向绑定 <input [(ngModel)]='title'/>
在双向绑定 ...
