Angular--Module的使用
Angular 是一个用html 和typescript 构建客户端应用的平台与框架。它将核心功能和可选功能作为一组TypeScript 库进行实现，你可以把它们导入到你的应用中。
1. 模块Module
Angular 应用的基本构造块是NgModule, 它为组件提供了编译的上下文环境。
Angular 应用就是由一组NgModule定义的。 NgModule 可以将其组件和 ...
Angular介绍、安装Angular Cli、创建Angular项目入门教程
场景
Angualr 是一款来自谷歌的开源的web 前端框架，诞生于2009 年，由Misko Hevery 等人创建，后为Google 所收购。是一款优秀的前端JS 框架，已经被用于Google 的多款产品当中。
Angualr 基于TypeScript 和react、vue 相比Angular
更适合中大型企业级项目。
Angular官网：
https://angular.cn/
开发Angular项目的IDE推荐 ...
Angular 和 vue 的优缺点
Angular 和 vue 的优缺点，你是怎么看待的
一、Vue：
优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. ...
Angular Datatable的一些问题
这几天改bug中发现的一些问题，小结一下。从简单到复杂逐个讲。
angular datatable实质上是对jquery库的包装，但包装后不太好用，定制功能比较麻烦。
1. 基本用法
最简单的用法，大致就是template里：
<table datatable [dtOptions]="dtOptions">
component里：
dtOptions: DataTables.Settings;
最基本的就这两句， ...
[Angular Unit Testing] Testing component with content projection
Component to be tested:
<ng-template #defaultPlaceholder>
Loading...
</ng-template>
<div class="loading-container" *ngIf="loading$ | async">
<ng-container
*ngTemplateOutlet="outlet ? outlet : defaultPlaceholder"
></ng-container>
</div>
import {
Component,
OnInit,
...
【angular】angular版本吸顶条
原理
通过切换元素class名实现
元素在可视区范围使用class .dt
元素不在可视区范围 定位在顶部 使用class .ding
demo
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>angularjs 版本 吸顶条</title>
<script src="../js/angular.min.js"></script ...
Angular 从入坑到挖坑 - HTTP 请求概览
一、Overview
angular 入坑记录的笔记第四篇，介绍在 angular 中如何通过 HttpClient 类发起 http 请求，从而完成与后端的数据交互。
对应官方文档地址：
Angular HttpClient
配套代码地址：angular-practice/src/http-guide
二、Contents
Angular 从入坑到弃坑 - Angular 使用入门
Angular 从入坑到挖坑 - 组件食用指南 ...
Angular的面试题
1.Aangular中组件之间通信的方式
答案rops down
1.调用子组件,通过自定义属性传值
2.子组件内部通过Input来接收属性的值
Events up
1.在父组件中定义一个有参数的方法
2.调用子组件时,绑定自定义事件和上一步方法
3.子组件内部通过Output和EventEmitter来触发事件并传值.
2.Angualr的八大组成部 ...
踩坑实录---Angular防抖——点击事件
npx ng g directive DebounceClickDirective --module=app
然后自动生成了2 个文件
CREATE src/app/debounce-click-directive.directive.spec.ts (290 bytes)
CREATE src/app/debounce-click-directive.directive.ts (173 bytes)
检查一下
debounce-click-directive.directive.spec.ts
import {
Directive,
OnInit ...
Angular 从入坑到挖坑 - 表单控件概览
一、Overview
angular 入坑记录的笔记第三篇，介绍 angular 中表单控件的相关概念，了解如何在 angular 中创建一个表单，以及如何针对表单控件进行数据校验。
对应官方文档地址：
Angular 表单简介
响应式表单
模板驱动表单
表单验证
配套代码地址：angular-practice/src/forms-overview
二、Contents
Angular 从入坑到 ...
Angular 从入坑到挖坑 - 组件食用指南
一、Overview
angular 入坑记录的笔记第二篇，介绍组件中的相关概念，以及如何在 angular 中通过使用组件来完成系统功能的实现
对应官方文档地址：
显示数据
模板语法
用户输入
组件之间的交互
管道
生命周期钩子
配套代码地址：angular-practice/src/components-guide
二、Contents
Angular 从入坑到弃坑 - Angular 使 ...
angular 模块 @NgModule的使用及理解
@NgModule 的重要作用在 Angular 中，NgModule 有以下几个重要的作用：
NgModule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起，这是首要的。NgModule 用来控制组件、指令、管道等的可见性，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看 ...
Angular 从入坑到挖坑 - Angular 使用入门
一、Overview
angular 入坑记录的笔记第一篇，完成开发环境的搭建，以及如何通过 angular cli 来创建第一个 angular 应用。入坑一个多星期，通过学习官方文档以及手摸手的按教程敲官方的快速上手项目，很像后端，嗯，完美的契合了我这种后端开发人员。
对应官方文档地址：
搭建本地开发环境和工作空间
ng new
ng serve
工 ...
[Angular 8 Unit Testing] Angular 8 Unit Testing -- service
How to test a service
The service we want to test against:
import {Injectable} from '@angular/core';
import {LoggerService} from './logger.service';
@Injectable({
providedIn: 'root'
})
export class CalculatorService {
constructor(private logger: LoggerService) {
}
add(n1: number, n2:n ...
Angular第三方UI组件库------ionic
一、Angular UI组件库 ------------ionic
1、 官网：https://ionicframework.com
文档：https://ionicframework.com/docs
概述：是一个移动端UI组件库，可以与Angular/Vue/React组合应用，也可以单独使用(SCRIPT直接引入)
可以使用lonic的步骤 ...
Angular Service(服务)
官方认为组件不应该直接获取或保存数据， 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务。而服务就充当着数据访问，逻辑处理的功能。把组件和服务区分开，以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开，可以让组件类更加精简、高效，这是官方的一些定义。 ...
Angular http
前端应用都需要通过 HTTP 协议与后端服务器通讯，@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。 HttpClient 带来的其它优点包括：可测试性、强类型的请求和响应对象、 ...
Angular的启动过程
我们知道由命令 ng new project-name，cli将会创建一个基础的angular应用，我们是可以直接运行起来一个应用。这归功与cli已经给我们创建好了一个根模块AppModule，而根模块就是用来启动此应用的模块。
main.ts 是启动的起点，platformBrowserDynamic这个函数是浏览器平台的工厂函 ...
Angular NgModule(模块)
NgModule 模块是Angular种一个重要的点，因为Angular的基本构造块就是NgModule。NgModule 会把相关的代码收集到一些功能集中，形成功能单元。在使用Angular CL 命令新建一个项目的时候，会给我们生成一个根模块，命名为 AppModule，根模块有一个根组件AppComponent，引导这个根模块就可以启动应 ...
Angular -- 组件传值
一、父传子
在父组件ts中定义要传递的信息
在父组件html中的子组件标签中定义自定义属性来绑定父组件定义的信息
在子组件中的ts中，通过@Input来接收自定义属性的名称
import {Input} from '@angular/core';
@Input() info:string;
在子组件中的html中就能直接得到值了
{{info}} ===> father to ch ...
