[Angular] Lazy Load CSS at runtime with the Angular CLI
Ever had the need for multiple "app themes", or even to completely dynamically load CSS based on which customer logs into your application? You could of course bundle all of the various themes into a single CSS entry file, but your application size would suffer a lot. Therefore, in this lesson we're ...
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来实时检测数据的变化并更新视图数据 ...
