-
Angular2 - HTTP
所属栏目：[安全] 日期：2020-12-17 热度：100
我们将用HTTPClient来添加一些数据持久化特效。 我们需要在App中启用HTTP服务，HttpClient是Angular通过http 与远程服务器通讯的机制。如果我们需要在整个App中使用并不需要重复导入。我们需要在AppModule顶层中从@angular/common/http 导入HttpClientModule[详细]
-
AngularJS-01.AngularJS,Module,Controller,scope
所属栏目：[安全] 日期：2020-12-17 热度：104
1.AngularJS 一个构建动态Web应用程序的结构化框架。 基于JavaScript的MVC框架。(? MVC ---- Model（模型）、View(视图）、Controller（控制器）?) ? 主要作用： 1）简化复杂Web应用的开发难度 a)?MVC程序架构，解耦应用逻辑、数据模型和视图 b)?数据绑定 c)[详细]
-
angular.js前端分层开发（页面和js代码分离，并将js代码分层）
所属栏目：[安全] 日期：2020-12-17 热度：68
一、 抽取模块成base.js文件 // 定义模块: var app = angular.module( " eshop " ,[ ‘ pagination ‘ ]); 二、 抽取服务成brandService.js文件 / 定义服务层: app.service( " brandService " ,function($http){ this .findAll = function(){ return $http.[详细]
-
AngularJs ng-repeat解决循环对象出现重复项报错的问题
所属栏目：[安全] 日期：2020-12-17 热度：161
问题：ng-repeat? 的循环对象是不能出现重复项的，所以如果有重复的就会报错，应该是 key value的问题吧，不是很了解内部运行机制；经过查询发现 在 循环后面加上??track by $index 就会解决问题，也就可以有重复对象了 报错： ? 划重点 解决办法：加上?trac[详细]
-
angular6 响应式表单（登录实例）
所属栏目：[安全] 日期：2020-12-17 热度：80
一、表单验证 1. 只有一个验证规则； this .myGroup = this .fb.group({ email:[ ‘[email?protected]‘ ,Validators.required],password:[ ‘‘ ] }) 2. 有多个验证的时候； email:[‘[email?protected]‘,Validators.compose([Validators.required,Validat[详细]
-
angular6 响应式自定义表单控件—注册头像实例
所属栏目：[安全] 日期：2020-12-17 热度：179
1. 组件继承ControlValueAccessor，ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值，获取表单的元素的元素值 registerOnChange（） 设置一个当控件接受到改变的事件时所要调用的函数；这也是我们把变化 emit 回表单的机制；[详细]
-
[Angular] ViewChild 'read' option
所属栏目：[安全] 日期：2020-12-17 热度：144
It is not clear in the Docs about {read: xx} option for @ViewChild. ? Based on the Source code,@ViewChild as view as Component,ElementRef,TemplateRef. For example,we have: one / one @ViewChild(OneComponent) one: OneComponent; ngAfterViewIn[详细]
-
Angular 中引入BootStrap
所属栏目：[安全] 日期：2020-12-17 热度：115
由于Bootstrap官方目前并没有发布Angular的相关类库进行支持，当前Angular只能引用使用Bootstrap相关的样式。无法使用Bootstrap自带的脚本逻辑。以下以Angular7和Bootsrap4.2为例进行demo验证。 环境搭建 首先执行以下两个命令创建angular项目和组件 ng new[详细]
-
angular6-material dialog应用
所属栏目：[安全] 日期：2020-12-17 热度：53
1. 打开弹窗的点击事件 project.component.html button mat-icon-button class="action-button" (click)="editDialog(project)" mat-iconcreate/mat-icon编辑 /button button mat-mini-fab color="warn" class="add-project" (click)="openDialog()" mat-ico[详细]
-
Angular6 CodeMirror在线编辑sql 智能提示
所属栏目：[安全] 日期：2020-12-17 热度：121
1. 安装ng2-codemirror包、codemirror包 npm install ng2-codemirror -- savenpm install codemirror -- save 2. 在所需要使用codemirror组件的模块中引入CodeMirror模块 import {CodemirrorModule} from ‘ng2-codemirror‘;@NgModule({ imports: [ Codemir[详细]
-
Angular 自定义管道
所属栏目：[安全] 日期：2020-12-17 热度：129
管道的作用就是将原始值进行转化处理，转换为所需要的值； 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 import { Pipe,PipeTransform } form ‘@angular/core‘; //引入PipeTransform是为了继承transform方法@Pipe({[详细]
-
Angular 页面初始化动画
所属栏目：[安全] 日期：2020-12-17 热度：110
用于进入组件前的加载动画 第一步：index.html 定义动画模板和样式 // 样式style type="text/css".preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #49a9ee; z-index: 9999; transition: opacity[详细]
-
AngularJs解决表达式闪烁的问题（ng-cloak）
所属栏目：[安全] 日期：2020-12-17 热度：148
举例： ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title Document / title style /* [ng-cloak] 属性选择器 匹配所有包含这个属性的元素 */ .ng-cloak,[ng-cloak] { display : none ; } / style / head body ng-app !-- 闪烁就是 表达式[详细]
-
Angularjs自动生成表格Table(用于数据回显)
所属栏目：[安全] 日期：2020-12-17 热度：149
Angularjs自动生成表格Table 1、使用场景： （1）使用Augularjs请求后台，查询记录，将返回的记录以表格的形式进行显示； （2）对表格进行编辑时，数据回显 2、使用方式 （1）方式1 !DOCTYPE htmlhtmlheadmeta charset="utf-8"script src="https://cdn.stati[详细]
-
AngularJS进阶 十六 脏值检查
所属栏目：[安全] 日期：2020-12-17 热度：154
脏值检查 注：请点击此处进行充电! 需求 ? ? 在项目开发过程中，需要对药店信息进行更改。如下图所示。现在的需求是：当药店信息没有发生变化时，点击“更新信息”按钮，提示“药店信息未做任何更改”。 实现 ? ? 可以利用angualr的脏值检查机制解决。 ? ?[详细]
-
AngularJS_简介、特性及基本使用
所属栏目：[安全] 日期：2020-12-17 热度：129
AngularJS Google 开源的前端 JS 结构化框架， 主体是? 页面中的动态数据，与内存的读取 相较于 jQuery jQuery 是前端函数库，封装简化 DOM 操作 应用 ： 构建单页面 SPA Web 应用____Single Page Application 将所有的活动局限于一个 html 页面 (即使页面跳[详细]
-
[Angular] Debug Angular apps in production without revealing
所属栏目：[安全] 日期：2020-12-17 热度：62
Source:?https://blog.angularindepth.com/debug-angular-apps-in-production-without-revealing-source-maps-ab4a235edd85 ? Build application with source map: "build": "ng build --prod --source-map", ? But now the source maps would be revealed i[详细]
-
angular指令：弹框点击空白处隐藏
所属栏目：[安全] 日期：2020-12-17 热度：64
效果图展示： ? 第一种方法：angularjs自定义指令： 指令： app.directive(‘onBlankHide‘,function () { return { restrict: ‘A‘,scope: { pop: ‘=‘ },link: function (scope,element,attr) { element.on(‘click‘,function (e) { $(‘#‘ + scope.po[详细]
-
angular 创建服务
所属栏目：[安全] 日期：2020-12-17 热度：53
一：新建服务模块和服务文件 ng g module services --spec=falseng g service services/quote --spec=false 二：在quote.service.ts中，可以用快捷方式新建初始服务。 ng-service 三：在services.module.ts中设置全局服务。 解释： forRoot()的目的是在应用[详细]
-
Angular CLI 安装和使用
所属栏目：[安全] 日期：2020-12-17 热度：79
1.背景介绍 关于Angular版本，Angular官方已经统一命名Angular 1.x同一为Angular JS；Angular 2.x及以上统称Angular； CLI是Command Line Interface的简写，是一种命令行接口，实现自动化开发流程，比如：ionic cli、vue cli等；它可以创建项目、添加文件以[详细]
-
Angular路由参数传递
所属栏目：[安全] 日期：2020-12-17 热度：179
一、路由时传递参数的方式 1、在查询参数中传递数据，如 //前台页面 a routerLink="/product" [queryParams]="{id:1}"商品详情/a//后台页面获取参数 export class ProductComponent implements OnInit { private productId: number; constructor(private rou[详细]
-
angularjs1.x radio组checkbox组
所属栏目：[安全] 日期：2020-12-17 热度：54
check组只要判断是否为true就可以 span style=‘display:block;float:left;padding:7px;‘input type=‘checkbox‘ ng-model="formDataObject.week.monday" style=‘vertical-align:-2px;‘ /星期一/spanspan style=‘display:block;float:left;padding:7px;[详细]
-
angular + mqtt
所属栏目：[安全] 日期：2020-12-17 热度：55
After searching and trying out different things for a while,I found this solution,you can use this library if you want to use MQTT in your project. Install it using? npm install ngx-mqtt --save Usage : app.module.ts ? import { Observable }[详细]
-
Angular搭建脚手架
所属栏目：[安全] 日期：2020-12-17 热度：112
1、安装CLI: cnpm install -g @angular/cli //卸载: npm uninstall -g @angular/cli? ?npm cache clean 2、检测是否成功: ng –version? or? ng v 3、新建项目 ng new ng-app //ng-app可以自己命名项目名称 cd ng-app?? //进入ng-app ng serve???? //启服务[详细]
-
Angular 6 自定义校验器校验身份证
所属栏目：[安全] 日期：2020-12-17 热度：52
/** * 自定义身份校验器 * */import { FormControl} from ‘@angular/forms‘;export function identityNoValidator(input: FormControl) { const value = input.value; if (checkCode(value)) { console.log(‘checkCode‘); let date = value.substring(6,[详细]
