Angular 调试
我们新建一个项目。执行 ng server 会启动一个网站。
1. 执行 where ng 。看看ng 是什么.
D:\Abp学习\angular\Mytest>where ng
C:%users\QiGongbo\AppData\Roaming\npm\ng
C:%users\QiGongbo\AppData\Roaming\npm\ng.cmd
实际执行到了ng.cmd：
@IF EXIST "%~dp0\node.exe" ( # C:%users\QiGongbo\AppData\Roaming\npm ...
angular(formGroup)
<form class="input-top" [formGroup]="searchForm" >/*在form表单中使用formGroup定义一个名称*/
<mat-form-field color="primary" appearance="outline">
<mat-label>查询开始时间</mat-label>
<input matInput type="text" maxlength="40"
formControlName="startP ...
Angular开发规范
目录
一、 前言
1.1. 规范目的
1.2. 局限性
二、 文件规范
2.1. &nbs ...
angular 中配置跨域
1. 新建一个 proxy.conf.json
{
"/search": {
"target": "https://wenku.baidu.com/search",
"secure": false,
"changeOrigi ...
angular 中使用 axios 发起 http 请求
angular 中使用 axios
/**
* 在angular 中引入第三方 http 模块的使用, 以 axios 为例
* 有两种使用方法：（本文使用Promise简单封装）
* 一. 直接在要使用请求的组件中 import axios from 'axios', 调用： axios.get ...
angular 中的 http 请求
angular 中使用 http 请求的前提，需要引入 httpClientModule 模块
根模块中 app.module.ts：
import { HttpClientModule } from '@angular/common/http'
imports: [
BrowserModule,
AppRoutingModule,
...
angular单元测试学习(jasmine)
单元测试简介：https://segmentfault.com/a/1190000009737186
单元测试-Jasmine：https://segmentfault.com/a/1190000009737204
angular2单元测试：https://segmentfault.com/a/1190000009769787#articleHeader1
概念简介
Jasmine
Jasmine测试框架提供了编写测试脚本的工具集，而且非常优秀的语义化，让测试代 ...
Angular Material的安装和使用
一、安装
1.前期准备：npm(安装node即可)，angular cli脚手架
2.自建项目
ng new my-app //my-app项目名字
ng g c project //组件名project
3.安装angular material和angular cdk
//npm方法
npm ...
Angular 指令详解
1. Angular安装
1.1 因为angular一般是用npm安装，所以需要先装npm. npm的安装一般用NodeJS. 所以把NodeJS装好，npm也就装好了。
NodeJS 下载地址：https://nodejs.org/en/download/
以Windows为例，下载安装最新版本。
&nb ...
angular项目实现mqtt的订阅与发布 ngx-mqtt
angular项目实现mqtt的订阅与发布
如果要写一个exe可执行文件，可以使用angular编写，然后使用electron打包成一个exe文件。
https://github.com/maximegris/angular-electron
我们可以使用现成的angular链接mqtt的插件实现订阅和发布——ngx-mqtt
https://github.com/sclausen/ngx-mqtt
安装 ngx-mqtt ...
手机上访问angular移动项目
要实现手机访问本地开发的移动端项目，首先做到两点：
1、本地打开的项目可以使用本地ip访问
2、手机和电脑同时处于一个同一个局域网中（手机和电脑同时连上同一个wifi / 手机开热点给电脑 / 电脑开wifi给手机连接）
如果做到以上两点，那么恭喜你，就可以直接使用电脑ip在移动端访问了。
因为现开发项目是angular + ...
Angular http服务工具类
Angular http服务工具类大致可以分为两个版本，一个是Angular4.3之前位于@angular/http下的Http服务，另一个是Angular4.3之后位于@angular/common/http下HttpClient服务。具体区别可查看https://www.cnblogs.com/54hsh/p/11490711.html
1、Angular4.3之前@angular/http下的Http服务工具类
import { Injec ...
Angular 使用教程
1、下载node.js，然后一直安装，可以修改一下node.js文件安装路径
查看是否node.js安装成功，在运行——cmd中输入以下代码。如果安装成功，则会显示出node.js的版本号
node -v
2、安装Angular CLI
在cmd中继续输入安装 angular命令行界面，如果不安装它无法识别出 ng 这样的命令
npm i -g @ angular / cli
然后输入以 ...
angular 路由守卫
一. canActive 使用场景：导航栏某个标签，如用户设置页面，只有登录才可以查看，不登录则点击无效
说明： canActive--是否能调用当前路由
实现：
1. 创建路由守卫类
import { CanActivate } from '@angular/router'
export class LoginGuard implements CanActivate{
loginState: boolean = ...
angular 路由跳转以及传参
1. 路由跳转方式一： /路由?id='001' 方式 -- queryParams 方式
路由配置：{ path: 'details', component: bookDetailsComponent }
a. 指令跳转：
<a [routerLink]="['/details']" [queryParams]="{id: item.id}" style="color:blue; font-size: 12px;cursor:pointer">查看详情</a>
router ...
Angular Material 的设计之美
Ng-Matero 0.3 已发布，新增 module schematic 以及 page schematic，详见 README
前言
Angular Material 作为 Angular 的官方组件库，无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。
官方列举了如下几点来解释“高质量”的含义。
国际化和可访问 ...
angular directive 自定义指令--属性方式简单学习
1. 自定义指令 - @directive
import { Component, Directive, HostListener, ElementRef } from '@angular/core'
@Directive({
selector: '[input-trim]',
host: {
'(keyup)': 'keyUpFunc($event.target)',
& ...
angular的formGroup的校验触发
angular material 中form表单提交时赋值，无法触发input输入框的样式，使用给FormGroup赋值的方式
onSubmit() {
Object.values(this.formGroup.controls).forEach(i=>{
i.marksAsDirty();
})
this.formGroup.patchValue(this.formGroup.getRowValue())
if(this.formGroup.invalid){
return;
...
前端三大框架（Angular Vue React）
前端，HTML（超文本标记语言），CSS（层叠样式表）和JavaScript（脚本语言）
HTML，通常说的h5，其实按标准来说，HTML4的后续版本不带编号了，并保证向前的兼容性
CSS的版本3，增加了translate()，能完成以前一定需要js才能做到的动画，同时增加了flex弹性盒子（响应式设计，提供一种更加有效的方式来对一个容器中的子元素 ...
angular 8 不兼容IE11
差异化加载
在构建 Web 应用时，确保你的应用与大多数浏览器兼容是目标之一。JavaScript 在不断发展，新功能不断推出，不是所有浏览器都能以同样的进度实现这些新功能。这就是编译和腻子脚本（polyfill）的用武之地。你在开发过程中使用 TypeScript 编写的代码会被编译并打包成一种兼容大多数浏览器的格式，通常为 ES5。 腻 ...
