Angular 从 0 到 1 (二)史上最简单的 Angular 教程
第一节:初识Angular-CLI
第二节:登录组件的构建
第三节:建立一个待办事项应用
第四节:进化!模块化你的应用
第五节:多用户版本的待办事项应用
第六节:使用第三方样式库及模块优化用
第七节:给组件带来活力
Rx--隐藏在Angular 2.x中利剑
Redux你的Angular 2应用
第八节:查缺补漏大合集(上)
第九节:查缺补漏大合集(下)
第二节:用 Form 表单做一个登录控件
对于 login 组件的小改造
在 hello-angular\src\app\login\login.component.ts
中更改其模板为下面的样子
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-login',template: `<div><input type="text"><button>Login</button></div>`,styles: []
})
export class LoginComponent implements OnInit {constructor() { }ngOnInit() {}}复制代码
我们增加了一个文本输入框和一个按钮,保存后返回浏览器可以看到结果
接下来我们尝试给Login按钮添加一个处理方法
<button (click)="onClick()">Login</button>
。(click)
表示我们要处理这个button的click事件,圆括号是说发生此事件时,调用等号后面的表达式或函数。等号后面的onClick()
是我们自己定义在LoginComponent中的函数,这个名称你可以随便定成什么,不一定叫onClick()
。下面我们就来定义这个函数,在LoginComponent中写一个叫onClick()
的方法,内容很简单就是把“button was clicked”输出到Console。 onClick() {console.log('button was clicked');}复制代码
返回浏览器,并按F12调出开发者工具。当你点击Login时,会发现Console窗口输出了我们期待的文字。
那么如果要在onClick中传递一个参数,比如是上面的文本输入框输入的值怎么处理呢?我们可以在文本输入框标签内加一个#usernameRef,这个叫引用(reference)。注意这个引用是的input对象,我们如果想传递input的值,可以用
usernameRef.value
,然后就可以把onClick()
方法改成onClick(usernameRef.value)
<div><input #usernameRef type="text"><button (click)="onClick(usernameRef.value)">Login</button>
</div>复制代码
在Component内部的onClick方法也要随之改写成一个接受username的方法
onClick(username) {console.log(username);}复制代码
现在我们再看看结果是什么样子,在文本输入框中键入“hello”,点击Login按钮,观察Console窗口:hello被输出了。
好了,现在我们再加一个密码输入框,然后改写onClick方法可以同时接收2个参数:用户名和密码。代码如下:
import { Component, OnInit } from '@angular/core';@Component({selector: 'app-login',template: `<div><input #usernameRef type="text"><input #passwordRef type="password"><button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button></div>`,styles: []
})
export class LoginComponent implements OnInit {constructor() { }ngOnInit() {}onClick(username, password) {console.log('username:' + username + "\n\r" + "password:" + password);}}复制代码
看看结果吧,在浏览器中第一个输入框输入“wang”,第二个输入框输入“1234567”,观察Console窗口,Bingo!
建立一个服务去完成业务逻辑
如果我们把登录的业务逻辑在onClick方法中完成,当然也可以,但是这样做的耦合性太强了。设想一下,如果我们增加了微信登录、微博登录等,业务逻辑会越来越复杂,显然我们需要把这个业务逻辑分离出去。那么我们接下来创建一个AuthService吧, 首先我们在src\app下建立一个core的子文件夹(src\app\core
),然后命令行中输入 ng g s core\auth
(s这里是service的缩写,core\auth是说在core的目录下建立auth服务相关文件)。auth.service.ts
和auth.service.spec.ts
这个两个文件应该已经出现在你的目录里了。
下面我们为这个service添加一个方法,你可能注意到这里我们为这个方法指定了返回类型和参数类型。这就是TypeScript带来的好处,有了类型约束,你在别处调用这个方法时,如果给出的参数类型或返回类型不正确,IDE就可以直接告诉你错了。
import { Injectable } from '@angular/core';@Injectable()
export class AuthService {constructor() { }loginWithCredentials(username: string, password: string): boolean {if(username === 'wangpeng')return true;return false;}}复制代码
等一下,这个service虽然被创建了,但仍然无法在Component中使用。当然你可以在Component中import这个服务,然后实例化后使用,但是这样做并不好,仍然时一个紧耦合的模式,Angular2提供了一种依赖性注入(Dependency Injection)的方法。
什么是依赖性注入?
如果不使用DI(依赖性注入)的时候,我们自然的想法是这样的,在login.component.ts
中import引入AuthService,在构造中初始化service,在onClick中调用service。
import { Component, OnInit } from '@angular/core';
//引入AuthService
import { AuthService } from '../core/auth.service';@Component({selector: 'app-login',template: `<div><input #usernameRef type="text"><input #passwordRef type="password"><button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button></div>`,styles: []
})
export class LoginComponent implements OnInit {//声明成员变量,其类型为AuthServiceservice: AuthService;constructor() {this.service = new AuthService();}ngOnInit() {}onClick(username, password) {//调用service的方法console.log('auth result is: ' + this.service.loginWithCredentials(username, password));}}复制代码
这么做呢也可以跑起来,但存在几个问题:
- 由于实例化是在组件中进行的,意味着我们如果更改service的构造函数的话,组件也需要更改。
- 如果我们以后需要开发、测试和生产环境配置不同的AuthService,以这种方式实现会非常不方便。
下面我们看看如果使用DI是什么样子的,首先我们需要在组件的修饰器中配置AuthService,然后在组件的构造函数中使用参数进行依赖注入。
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../core/auth.service';@Component({selector: 'app-login',template: `<div><input #usernameRef type="text"><input #passwordRef type="password"><button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button></div>`,styles: [],//在providers中配置AuthServiceproviders:[AuthService]
})
export class LoginComponent implements OnInit {//在构造函数中将AuthService示例注入到成员变量service中//而且我们不需要显式声明成员变量service了constructor(private service: AuthService) {}ngOnInit() {}onClick(username, password) {console.log('auth result is: ' + this.service.loginWithCredentials(username, password));}}复制代码
看到这里你会发现我们仍然需要import相关的服务,这是import是要将类型引入进来,而provider里面会配置这个类型的实例。当然即使这样还是不太爽,可不可以不引入AuthService呢?答案是可以。
我们看一下app.module.ts
,这个根模块文件中我们发现也有个providers,根模块中的这个providers是配置在模块中全局可用的service或参数的。
providers: [{provide: 'auth', useClass: AuthService}]复制代码
providers是一个数组,这个数组呢其实是把你想要注入到其他组件中的服务配置在这里。大家注意到我们这里的写法和上面优点区别,没有直接写成
providers:[AuthService]复制代码
而是给出了一个对象,里面有两个属性,provide和useClass,provide定义了这个服务的名称,有需要注入这个服务的就引用这个名称就好。useClass指明这个名称对应的服务是一个类,本例中就是AuthService了。这样定义好之后,我们就可以在任意组件中注入这个依赖了。下面我们改动一下login.component.ts
,去掉头部的import { AuthService } from '../core/auth.service';
和组件修饰器中的providers,更改其构造函数为
onstructor(@Inject('auth') private service) {}复制代码
我们去掉了service的类型声明,但加了一个修饰符@Inject('auth')
,这个修饰符的意思是请到系统配置中找到名称为auth
的那个依赖注入到我修饰的变量中。当然这样改完后你会发现Inject
这个修饰符系统不识别,我们需要在@angular/core
中引用这个修饰符,现在login.component.ts
看起来应该是下面这个样子
import { Component, OnInit, Inject } from '@angular/core';@Component({selector: 'app-login',template: `<div><input #usernameRef type="text"><input #passwordRef type="password"><button (click)="onClick(usernameRef.value, passwordRef.value)">Login</button></div>`,styles: []
})
export class LoginComponent implements OnInit {constructor(@Inject('auth') private service) {}ngOnInit() {}onClick(username, password) {console.log('auth result is: ' + this.service.loginWithCredentials(username, password));}}复制代码
双向数据绑定
接下来的问题是我们是否只能通过这种方式进行表现层和逻辑之间的数据交换呢?如果我们希望在组件内对数据进行操作后再反馈到界面怎么处理呢?Angular2提供了一个双向数据绑定的机制。这个机制是这样的,在组件中提供成员数据变量,然后在模板中引用这个数据变量。我们来改造一下login.component.ts
,首先在class中声明2个数据变量username和password。
username = "";password = "";复制代码
然后去掉onClick
方法的参数,并将内部的语句改造成如下样子:
console.log('auth result is: '+ this.service.loginWithCredentials(this.username, this.password));复制代码
去掉参数的原因是双向绑定后,我们通过数据成员变量就可以知道用户名和密码了,不需要在传递参数了。而成员变量的引用方式是this.成员变量
。
然后我们来改造模板:
<div><input type="text"[(ngModel)]="username"/><input type="password"[(ngModel)]="password"/><button (click)="onClick()">Login</button></div>复制代码
[(ngModel)]="username"
这个看起来很别扭,稍微解释一下,方括号[]的作用是说把等号后面当成表达式来解析而不是当成字符串,如果我们去掉方括号那就等于说是直接给这个ngModel赋值成“username”这个字符串了。方括号的含义是单向绑定,就是说我们在组件中给model赋的值会设置到HTML的input控件中。[()]
是双向绑定的意思,就是说HTML对应控件的状态的改变会反射设置到组件的model中。ngModel是FormModule中提供的指令,它负责从Domain Model(这里就是username或password,以后我们可用绑定更复杂的对象)中创建一个FormControl的实例,并将这个实例和表单的控件绑定起来。同样的对于click事件的处理,我们不需要传入参数了,因为其调用的是刚刚我们改造的组件中的onClick方法。现在我们保存文件后打开浏览器看一下,效果和上一节的应该一样的。本节的完整代码如下:
//login.component.ts
import { Component, OnInit, Inject } from '@angular/core';@Component({selector: 'app-login',template: `<div><input type="text"[(ngModel)]="username"/><input type="password"[(ngModel)]="password"/><button (click)="onClick()">Login</button></div>`,styles: []
})
export class LoginComponent implements OnInit {username = '';password = '';constructor(@Inject('auth') private service) {}ngOnInit() {}onClick() {console.log('auth result is: '+ this.service.loginWithCredentials(this.username, this.password));}}复制代码
表单数据的验证
通常情况下,表单的数据是有一定的规则的,我们需要依照其规则对输入的数据做验证以及反馈验证结果。Angular2中对表单验证有非常完善的支持,我们继续上面的例子,在login
组件中,我们定义了一个用户名和密码的输入框,现在我们来为它们加上规则。首先我们定义一下规则,用户名和密码都是必须输入的,也就是不能为空。更改login.component.ts
中的模板为下面的样子
<div><input required type="text"[(ngModel)]="username"#usernameRef="ngModel"/>{{usernameRef.valid}}<input required type="password"[(ngModel)]="password"#passwordRef="ngModel"/>{{passwordRef.valid}}<button (click)="onClick()">Login</button></div>复制代码
注意到我们只是为username和password两个控件加上了required这个属性,表明这两个控件为必填项。通过#usernameRef="ngModel"
我们重新又加入了引用,这次的引用指向了ngModel,这个引用是要在模板中使用的,所以才加入这个引用如果不需要在模板中使用,可以不要这句。{{表达式}}
双花括号表示解析括号中的表达式,并把这个值输出到模板中。这里我们为了可以显性的看到控件的验证状态,直接在对应控件后输出了验证的状态。初始状态可以看到2个控件的验证状态都是false,试着填写一些字符在两个输入框中,看看状态变化吧。
我们是知道了验证的状态是什么,但是如果我们想知道验证失败的原因怎么办呢?我们只需要将{{usernameRef.valid}}
替换成{{usernameRef.errors | json}}
。|
是管道操作符,用于将前面的结果通过管道输出成另一种格式,这里就是把errors对象输出成json格式的意思。看一下结果吧,返回的结果如下
如果除了不能为空,我们为username再添加一个规则试试看呢,比如字符数不能少于3。
<input type="text"[(ngModel)]="username"#usernameRef="ngModel"required minlength="3"/>复制代码
现在我们试着把
{{表达式}}
替换成友好的错误提示,我们想在有错误发生时显示错误的提示信息。那么我们来改造一下template。 <div><input type="text"[(ngModel)]="username"#usernameRef="ngModel"requiredminlength="3"/>{{ usernameRef.errors | json }}<div *ngIf="usernameRef.errors?.required">this is required</div><div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div><input required type="password"[(ngModel)]="password"#passwordRef="ngModel"/><div *ngIf="passwordRef.errors?.required">this is required</div><button (click)="onClick()">Login</button></div>复制代码
ngIf
也是一个Angular2的指令,顾名思义,是用于做条件判断的。*ngIf="usernameRef.errors?.required"
的意思是当usernameRef.errors.required
为true
时显示div
标签。那么那个?
是干嘛的呢?因为errors
可能是个null,如果这个时候调用errors
的required
属性肯定会引发异常,那么?
就是标明errors
可能为空,在其为空时就不用调用后面的属性了。
如果我们把用户名和密码整个看成一个表单的话,我们应该把它们放在一对<form></form>
标签中,类似的加入一个表单的引用formRef
。
<div><form #formRef="ngForm"><input type="text"[(ngModel)]="username"#usernameRef="ngModel"requiredminlength="3"/><div *ngIf="usernameRef.errors?.required">this is required</div><div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div><input type="password"[(ngModel)]="password"#passwordRef="ngModel"required/><div *ngIf="passwordRef.errors?.required">this is required</div><button (click)="onClick()">Login</button></form></div>复制代码
这时运行后会发现原本好用的代码出错了,这是由于如果在一个大的表单中,ngModel会注册成Form的一个子控件,注册子控件需要一个name,这要求我们显式的指定对应控件的name,因此我们需要为input
增加name属性
<div><form #formRef="ngForm"><input type="text"name="username"[(ngModel)]="username"#usernameRef="ngModel"requiredminlength="3"/><div *ngIf="usernameRef.errors?.required">this is required</div><div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div><input type="password"name="password"[(ngModel)]="password"#passwordRef="ngModel"required/><div *ngIf="passwordRef.errors?.required">this is required</div><button (click)="onClick()">Login</button><button type="submit">Submit</button></form></div>复制代码
既然我们增加了一个formRef
,我们就看看formRef.value
有什么吧。
首先为form增加一个表单提交事件的处理<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
。
然后在组件中增加一个onSubmit
方法
onSubmit(formValue) {console.log(formValue);}复制代码
你会发现formRef.value
中包括了表单所有填写项的值。
有时候在表单项过多时我们需要对表单项进行分组,HTML中提供了
fieldset
标签用来处理。那么我们看看怎么和Angular2结合吧: <div><form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)"><fieldset ngModelGroup="login"><input type="text"name="username"[(ngModel)]="username"#usernameRef="ngModel"requiredminlength="3"/><div *ngIf="usernameRef.errors?.required">this is required</div><div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div><input type="password"name="password"[(ngModel)]="password"#passwordRef="ngModel"required/><div *ngIf="passwordRef.errors?.required">this is required</div><button (click)="onClick()">Login</button><button type="submit">Submit</button></fieldset></form></div>复制代码
<fieldset ngModelGroup="login">
意味着我们对于fieldset之内的数据都分组到了login
对象中。
接下来我们改写onSubmit方法用来替代onClick,因为看起来这两个按钮重复了,我们需要去掉onClick。首先去掉template中的
<button (click)="onClick()">Login</button>
,然后把<button type="submit">
标签后的Submit
文本替换成Login
,最后改写onSubmit方法。 onSubmit(formValue) {console.log('auth result is: '+ this.service.loginWithCredentials(formValue.login.username, formValue.login.password));}复制代码
在浏览器中试验一下吧,所有功能正常工作。
验证结果的样式自定义
如果我们在开发工具中查看网页源码,可以看到
用户名控件的HTML代码是下面的样子:在验证结果为false时input的样式是
ng-invalid
<input name="username" class="ng-pristine ng-invalid ng-touched" required="" type="text" minlength="3" ng-reflect-minlength="3" ng-reflect-name="username">复制代码
类似的可以实验一下,填入一些字符满足验证要求之后,看input的HTML是下面的样子:在验证结果为true时input的样式是ng-valid
<input name="username" class="ng-touched ng-dirty ng-valid" required="" type="text" ng-reflect-model="ssdsds" minlength="3" ng-reflect-minlength="3" ng-reflect-name="username">复制代码
知道这个后,我们可以自定义不同验证状态下的控件样式。在组件的修饰符中把styles数组改写一下:
styles: [`.ng-invalid{border: 3px solid red;}.ng-valid{border: 3px solid green;}`]复制代码
保存一下,返回浏览器可以看到,验证不通过时
验证通过时是这样的:
最后说一下,我们看到这样设置完样式后连form和fieldset都一起设置了,这是由于form和fieldset也在样式中应用了.ng-valid
和.ng-valid
,那怎么解决呢?只需要在.ng-valid
加上input
即可,它表明的是应用于input类型控件并且class引用了ng-invalid的元素。
styles: [`input.ng-invalid{border: 3px solid red;}input.ng-valid{border: 3px solid green;}`]复制代码
很多开发人员不太了解CSS,其实CSS还是比较简单的,我建议先从Selector开始看,Selector的概念弄懂后Angular2的开发CSS就会顺畅很多。具体可见W3School中对于CSS Selctor的参考和css-tricks.com/multiple-cl…
本节代码: github.com/wpcfan/awes…
进一步的练习
- 练习1:如果我们想给username和password输入框设置默认值。比如“请输入用户名”和“请输入密码”,自己动手试一下吧。
- 练习2:如果我们想在输入框聚焦时把默认文字清除掉,该怎么做?
- 练习3:如果我们想把默认文字颜色设置成浅灰色该怎么做?
纸书出版了,比网上内容丰富充实了,欢迎大家订购!
京东链接:item.m.jd.com/product/120…
第一节:Angular 2.0 从0到1 (一)
第二节:Angular 2.0 从0到1 (二)
第三节:Angular 2.0 从0到1 (三)
第四节:Angular 2.0 从0到1 (四)
第五节:Angular 2.0 从0到1 (五)
第六节:Angular 2.0 从0到1 (六)
第七节:Angular 2.0 从0到1 (七)
第八节:Angular 2.0 从0到1 (八)
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 从零开始构建 Wijmo Angular 2 小应用
中秋之际,Angular 团队发布 Angular 2 正式版,Wijmo 当天宣布支持 。其实从Angular Alpha开始,到之后 Beta版本 和 RC 版本,Wijmo 一直紧随其后。 Angular 2移除和替代了 Angular 1.X 中的 directives, controllers,modules, sco…...
2024/4/21 5:00:52 - Grafana 插件开发从零到一
Grafana 插件开发从零到一 阅前高能提醒:这篇文章总的来说并不是在教你怎么开发,而是告诉你怎么去学习开发一个 Grafana 的插件,说是从零到一,MAX_VALUE 其实是 100,望珍重。引子 前一阵子突然接到了一个新任务&#…...
2024/4/21 5:00:52 - Vue从零到实战
一、Vue核心知识了解 1.1、初识VUE,走进VUE的世界 历史介绍 angular 09年,年份较早,一开始大家是拒绝 star:59.3k react 2013年, 用户体验好,直接拉到一堆粉丝 star:119k vue 2014年, 用户体验好 star:124k Vue等框架与jQuery…...
2024/4/20 18:36:56 - Angular(一):初探
VSCode的推荐拓展 1. Debugger for Chrome 2. Path Intellisense 3. Angular Files 4. Angular Language Service 5. Angular Snippets (Version 11) VS Code配置Emmit...
2024/4/21 5:00:50 - Angular 从0到1系列 - 收藏集 - 掘金
代码即逻辑 -- 聊聊 Effects 及在 Angular 中的应用 - 掘金 大概去年9月左右,看过 Cycle.js 创作者 Andr Staltz 的一个视频:讲为什么 React 并不是一个响应式的框架,同时介绍了 Cycle.js。当时就觉得这个思路好牛叉,但一直有点似…...
2024/4/21 5:00:49 - 从零开始一个个人博客 by asp.net core and angular(三)
这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,…...
2024/4/21 5:00:47 - 从零详细搭建一个简单的angular项目(5)双向绑定以及管道篇
管道: 这东西是格式化用的,比如你想把20201212变成2020.12.12就可以考虑用这个。 angular内置了很多管道,这里举个使用的例子: <h1>{{name|uppercase}}</h1>这里的|前面的是需要格式化的数据,后面的是管道…...
2024/4/20 19:38:25 - 从零详细搭建一个简单的angular项目(3)做点能看到的网页以及启动项目到浏览器篇
这一文开始,正式开始编写一个简单的angular小demo并演示 第一步,创建一个新的组件 命令:ng g component heroes --specfalse 命令不懂的可以参考我的“angular命令”一文 这条指令执行之后会在src/app下创建一个heroes的文件夹,并…...
2024/4/20 19:38:23 - 从零详细搭建一个简单的angular项目(4)面向对象在angular中的应用篇
有过java开发经验的朋友再学angular可能会很轻松,因为angular也是用了面向对象的思维去开发的。 面向对象的话,我们先创建一个对象吧。按照下述步骤: 1、在你喜欢的文件夹目录下创建一个叫做hero.ts的文件,这个就是你的对象实体&…...
2024/4/20 4:15:44 - 从零详细搭建一个简单的angular项目(2)组件基本篇
这是这个系列文章的第二篇 首先要做angular开发,先要了解一些基本知识,比如一个“模块”的组成。这很重要。 1、打开src下的app目录,会看到生成的五个文件: app.component.spec.ts——组件的测试代码文件 app.module.ts——组件路…...
2024/5/4 14:29:31 - Angular 从零开始 4- form表单验证
一. 表单简介 /* 所有的表单元素需要加上name属性 如果要验证怎么办?*/二 模版驱动型表单 & 表单校验 // 支持双向数据绑定、变更检测、验证和错误处理 步骤:1. novalidate 禁用浏览器默认验证2. 引入 FormsModule3. #anyName "ngForm"…...
2024/5/4 16:10:31 - Angular 从零开始 5-依赖注入
一. 依赖注入内容介绍 // https://angular.cn/guide/architecture#依赖注入 “依赖注入”是提供类的新实例的一种方式,还负责处理好类所需的全部依赖。 大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。 injector->注册provider->…...
2024/4/21 5:00:45 - angular6项目从零开始
前言: angular框架接触刚好一年,期间都是在前端组长的带领下写功能模块的东西。现在公司同时进行两个项目,终于有机会独立接入一个项目了!虽有些担心很多东西不懂,但更多的是兴奋和激动。能从0开始主导一个项目的开发&…...
2024/4/21 5:00:44 - 从零到一搭建webpack,仅供学习参考,part1
如今的前端框架以及库都有很多,像vue、react、angular脚手架都自带打包工具,但是如果是一个脱离脚手架的原生项目是怎样打包的呢,接来就介绍一下自己用webpack打包项目的一些学习和总结,也方便以后复用。 1、首先创建一个项目&…...
2024/4/21 5:00:43 - 从零开始的Angular生活(一)— 环境搭建
本篇中,我们将使用angular-cli来构建我们的第一个angular项目。 一、安装Node.js及npm包管理工具 下载 Node.js:推荐下载 8.12.0 版本,较为稳定,下载后安装即可。 二、安装vscode 下载vscode 安装时勾选下面选项 vscode 插件推荐 …...
2024/4/21 5:00:42 - Angular 从零开始 1- 搭建项目到 组件写法
Angular 中文网:环境搭建 https://www.angular.cn/guide/setup-local 一、启动过程介绍 1.启动顺序: main.ts 为入口> app.module.ts>app.component.ts>app.component.html,app.component.css2.Angular模块 每个 Angular 应用至少有一个模块(根…...
2024/4/21 5:00:41 - Angular 路由转场动画
一、路由配置 BrowserAnimationsModule是必须要引用的 路由data属性也是必须要加的,名字可自拟 import { NgModule } from angular/core; import { BrowserModule } from angular/platform-browser; import { BrowserAnimationsModule } from angular/platform-br…...
2024/4/21 5:00:41 - 前端面试宝典
面试宝典 一、HTML和CSS 21 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 21 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什么的吗? 21 3. Quirks模式是什么?它和Standards模式有什…...
2024/4/20 7:04:15 - web前端————angular1表格中的复选框、全选、反选、分页小例子
html页面代码: <table class"table ordertable label-table"><thead><tr><th style"width:10%;"><input type"checkbox" ng-checked"selectAllButton()" ng-click"clickSelectAll($even…...
2024/4/21 5:00:38 - angularjs分页查询
分页查询 //首页导入<script type"text/javascript" src"framework/tm.pagination.js"></script> //routerApp中注入tm.pagination //html页面上<tm-pagination conf"paginationConf"></tm-pagination> //controller.js…...
2024/4/21 5:00:37
最新文章
- 将自己的程序打包成Docker镜像映射公网访问
背景 Docker是现在主流的容器技术,使用容器部署可以忽略应用依赖环境,我们可以很便捷地部署、更新应用。我们在联调开发过程中,可以借助DockerFrp这一方案实现远程联调。 Dockerfile编写 我现在在/opt/english-learn目录下准备好了我的程序…...
2024/5/4 20:04:18 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 图像处理相关知识 —— 椒盐噪声
椒盐噪声是一种常见的图像噪声类型,它会在图像中随机地添加黑色(椒)和白色(盐)的像素点,使图像的质量降低。这种噪声模拟了在图像传感器中可能遇到的问题,例如损坏的像素或传输过程中的干扰。 椒…...
2024/5/3 19:03:59 - 逆向案例十二——看准网企业信息json格式的信息
网址:【全国公司排行|排名榜单|哪家好】-看准网 打开开发者工具——刷新——网络——XHR——下滑页面加载新的页面——找到数据包 发现参数加密,返回的数据也进行了加密 按关键字在下方搜索 kiv进入第一个js文件 ctrlf打开文件里面的搜索框继续搜kiv找到…...
2024/5/1 13:34:19 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/5/1 17:30:59 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/5/2 16:16:39 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/29 2:29:43 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/5/3 23:10:03 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/27 17:58:04 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/27 14:22:49 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/28 1:28:33 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/30 9:43:09 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/27 17:59:30 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/5/4 18:20:48 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/28 1:34:08 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/26 19:03:37 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/29 20:46:55 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/30 22:21:04 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/5/1 4:32:01 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/5/4 2:59:34 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/28 5:48:52 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/30 9:42:22 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/5/2 9:07:46 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/30 9:42:49 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57