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。 腻 ...
[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 ...