Angular学习笔记—基础(转载)
创建简单组件
新建组件
$ ng generate component simple-form --inline-template --inline-style
# Or
$ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式
在命令行窗口运行以上命令后,将输出以下内容:
installing component
create src/app/simple-form/simple-form.component.spec.ts
create src/app/simple-form/simple-form.component.ts
update src/app/app.module.ts
即执行上述操作后,创建了两个文件:
simple-form.component.spec.ts - 用于单元测试
simple-form.component.ts - 新建的组件
除此之外,update src/app/app.module.ts
表示执行上述操作后,Angular CLI 会自动帮我们更新 app.module.ts
文件。所更新的内容是把我们新建的组件添加到 NgModule
的 declarations
数组中,具体如下:
@NgModule({
declarations: [
AppComponent,
SimpleFormComponent
],
...
})
export class AppModule { }
注意:当创建组件时提示:More than one module matches. Use skip-import option to skip importing the component into the closest module.入下图所示:
出现此问题是此项目中有多个以.module.ts的文件存在,创建时无法确定将组件导入那个module中,因此要通过--module来指定,通过使用"--module=module名称"来创建即可(--module=后边等的值是将.module.ts去掉的名称),入下图所示:
使用组件
AppComponent
import { Component } from '@angular/core'; @Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
}
SimpleFormComponent
import { Component, OnInit } from '@angular/core'; @Component({
selector: 'app-simple-form',
template: `
<p>
simple-form Works!
</p>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
从生成的 SimpleFormComponent
组件中,我们发现组件的 selector
是 app-simple-form
,而我们是使用以下命令创建该组件:
$ ng g c simple-form -it -is
即 Angular CLI 在创建组件时,自动帮我们添加了前缀。那为什么前缀是 app
呢?答案是在项目根目录下的 .angular-cli.json
文件中,已经默认帮我们配置了默认的前缀,具体如下:
{
...
"apps": [
{
"root": "src",
"outDir": "dist",
...
"prefix": "app",
...
}
],
}
当然你可以根据实际需求,自行更改默认的前缀配置。
事件和模板引用
在 Angular 中,我们可以使用 (eventName)
语法,进行事件绑定。此外,可以使用 #variableName
的语法,定义模板引用。具体示例如下:
SimpleFormComponent
import {Component, OnInit} from '@angular/core'; @Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick(myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(value) {
console.log(value);
} ngOnInit() {}
}
需要注意的是,若我们改变绑定的表达式为 (click)="onClick(myInput)"
,当我们点击按钮时,控制台输出的结果是:
<input type="text">
通过该输出结果,我们可以知道 #variableName
语法,我们获取的对象是对应 DOM 元素的引用。
获取鼠标事件
假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入 $event
变量,具体如下:
import {Component, OnInit} from '@angular/core'; @Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
onClick(event, value) {
console.log(event);
console.log(value);
}
ngOnInit() {}
}
成功运行以上代码,当我们点击按钮时,控制台将输出:
MouseEvent {isTrusted: true, screenX: 180, screenY: 207, clientX: 165,
clientY: 75…}
需要注意的是,参数名一定要使用 $event
,否则无法获取正确的鼠标事件。此外,onClick($event, myInput.value)
表达式中,$event
的顺序是任意的,如:
<button (click)="onClick(myInput.value, $event)">点击</button>
当 Angular 在调用我们的事件处理函数时,会自动帮我们处理调用的参数。$event
自动映射为触发的事件,与我们 Provider
中 Token
的作用类似。除了监听鼠标事件外,我们还可以监听键盘事件。
获取键盘事件
import {Component, OnInit} from '@angular/core'; @Component({
selector: 'app-simple-form',
template: `
<div>
<input #myInput type="text" (keydown.enter)="onEnter($event, myInput.value)">
<button (click)="onClick($event, myInput.value)">点击</button>
</div>
`,
styles: []
})
export class SimpleFormComponent implements OnInit {
// ...
onEnter(event, value) {
console.log(event);
console.log(value);
}
}
以上代码中, (keydown.enter)="onEnter($event, myInput.value)"
表达式表示我们监听键盘 enter
键的按下事件,当我们按下键盘的 enter
键时,将会调用组件类中定义的 onEnter()
方法。我们同样也可以通过 $event
来获取 KeyboardEvent
对象。
注入服务
新建服务
$ ng g s mail
在命令行窗口运行以上命令后,将输出以下内容:
installing service
create src/app/mail.service.spec.ts
create src/app/mail.service.ts
WARNING Service is generated but not provided, it must be provided to be used
即执行上述操作后,创建了两个文件:
mail.service.spec.ts - 用于单元测试
mail.service.ts - 新建的服务
除此之外,WARNING Service is generated but not provided,...
表示执行上述操作后,Angular CLI 只会帮我们创建 MailService
服务,不会自动帮我们配置该服务。
配置服务
import {MailService} from "./mail.service"; @NgModule({
...
providers: [MailService],
bootstrap: [AppComponent]
})
export class AppModule { }
更新服务
import { Injectable } from '@angular/core'; @Injectable()
export class MailService {
message: string ='该消息来自MailService';
constructor() { }
}
使用服务
import { Component } from '@angular/core';
import {MailService} from "./mail.service"; @Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
</div>
`
})
export class AppComponent {
title = 'Hello, Angular';
constructor(private mailService: MailService) {}
}
除了使用 constructor(private mailService: MailService)
方式注入服务外,我们也可以使用 Inject
装饰器来注入 MailService
服务:
import {Component, Inject} from '@angular/core'; @Component({...})
export class AppComponent {
title = 'Hello, Angular'; constructor(@Inject(MailService) private mailService) {}
}
不过对于 Type
类型(函数类型) 的对象,我们一般使用 constructor(private mailService: MailService)
方式进行注入。而 Inject
装饰器一般用来注入非 Type
类型的对象。
使用Inject装饰器
AppModule
@NgModule({
...
providers: [
MailService,
{provide: 'apiUrl', useValue: 'https://jsonplaceholder.typicode.com/'}
],
bootstrap: [AppComponent]
})
export class AppModule { }
AppComponent
@Component({
selector: 'app-root',
template: `
<h3>{{title}}</h3>
<div>
<app-simple-form></app-simple-form>
{{mailService.message}}
<p>API_URL: {{apiUrl}}</p>
</div>
`
})
export class AppComponent {
title = 'Hello, Angular'; constructor(
@Inject(MailService) private mailService,
@Inject('apiUrl') private apiUrl
) {}
}
组件样式
在 Angular 中,我们可以在设置组件元数据时通过 styles
或 styleUrls
属性,来设置组件的内联样式和外联样式。
使用 styles 属性
import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; @Component({
selector: 'app-simple-form',
template: `
...
`,
styles: [`
:host { margin: 10px; } input:focus { font-weight: bold;}
`
]
})
export class SimpleFormComponent implements OnInit {
@Input() message: string;
@Output() update = new EventEmitter<{text: string}>(); ngOnInit() {}
}
上面示例中 :host
表示选择宿主元素,即 AppComponent
组件模板中的 app-simple-form
元素。
用过 AngularJS 1.x 的同学,对 ng-class
应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass
。接下来我们来看一下,ngClass
指令的具体应用。
使用 ngClass 指令
ngClass
指令接收一个对象字面量,对象的 key
是 CSS class 的名称,value
的值是 truthy/falsy
的值,表示是否应用该样式。
@Component({
selector: 'app-simple-form',
template: `
<div>
{{message}}
<input #myInput
type="text"
[(ngModel)]="message"
[ngClass]="{mousedown: isMousedown}"
(mousedown)="isMousedown = true"
(mouseup)="isMousedown = false"
(mouseleave)="isMousedown = false"
>
<button (click)="update.emit({text: message})">更新</button>
</div>
`,
styles: [`
:host { margin: 10px; } .mousedown { border: 2px solid green; } input:focus { font-weight: bold; outline: none;}
`
]
})
export class SimpleFormComponent implements OnInit {
isMousedown: boolean;
// ...
}
ngClass 指令用法
<!-- 使用布尔值 -->
<div [ngClass]="{bordered: false}">This is never bordered</div>
<div [ngClass]="{bordered: true}">This is always bordered</div> <!-- 使用组件实例的属性 -->
<div [ngClass]="{bordered: isBordered}">
Using object literal. Border {{ isBordered ? "ON" : "OFF" }}
</div> <!-- 样式名包含'-' -->
<div[ngClass]="{'bordered-box': false}">
Class names contains dashes must use single quote
</div> <!-- 使用样式列表 -->
<div class="base" [ngClass]="['blue', 'round']">
This will always have a blue background and round corners
</div>
除了 ngClass
指令外,Angular 还为我们提供了 ngStyle
指令。
使用 ngStyle 指令
ngStyle
指令让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。
ngStyle 指令用法
<div [ngStyle]="{color: 'white', 'background-color': 'blue'}">
Uses fixed white text on blue background
</div>
需要注意的是, background-color
需要使用单引号,而 color
不需要。这其中的原因是,ng-style
要求的参数是一个 Javascript
对象,color
是一个有效的 key
,而 background-color
不是一个有效的 key
,所以需要添加 ''
。
对于一些场合,我们也可以直接利用 Angular 属性绑定的语法,来快速设置元素的样式。
设置元素的背景颜色
<div [style.background-color="'yellow'"]>
Use fixed yellow background
</div>
设置元素的字体大小
<!-- 支持单位: px | em | %-->
<div>
<span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize">
Red Text
</span>
</div>
转载自:
Angular学习笔记—基础(转载)的更多相关文章
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
随机推荐
- EMQ进行HttpApi登录问题
今天进行EMQ http api调用的时候遇到一个问题,一直弹出登录验证框 在官网资料中也找不到相关的接口,如下图: 以前也经常看到这种登录,不过我这里没有用程序去调用过这样类似的接口. 后来我想到经 ...
- STM32F10x_SPI(硬件接口 + 软件模拟)读写Flash(25Q16)
推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前 ...
- Mysql root密码忘记的解决办法
Windows 版本: 1.打开安装目录下的my.ini 找到 [mysqld] 在下面加入 skip-grant-tables 2. 重启mysql服务 3.打开命令行 依次输入 USE mysql ...
- 如何使用 PsExec 执行远程命令
前言 这紧紧只是一篇纯技术分享.我们的程序在运行时需要连接多台目标机器,并拷贝目标机器上特定文件夹中的文件.为了方便访问,要在每台目标机器上建立一个特定用户,所以 PsExec 成了实现此功能的一个方 ...
- node js 读取mysql
1.新版node自带npm 2.下载npm不需要node命令 3.懒得配环境变量.直接把生成的npm复制到报错目录,再把mysql模块复制回来 var mysql = require('mysql') ...
- Html就是超文本标记语言的简写,是最基础的网页语言
Html就是超文本标记语言的简写,是最基础的网页语言. Html是通过标签来定义的语言,代码都是由标签所组成. Html代码不用区分大小写. Html代码由<html>开始</htm ...
- 【转】HDC,CDC,CWindowDC,CClientDC,CPaintDC等等
转载出处:http://blog.sina.com.cn/s/blog_447611f20100lirt.html 首先说一下什么是DC(设备描述表) Windows应用程序通过为指定设备(屏幕,打 ...
- 【转】防止CListCtrl闪烁的几种方法
转载出处:http://blog.sina.com.cn/s/blog_5ee42ba30100g50j.html 1.使用SetRedraw禁止窗口重绘,操作完成后,再恢复窗口重绘 m_ctlLis ...
- 【转载&总结】后缀数组及广泛应用
转自:http://blog.csdn.net/yxuanwkeith/article/details/50636898 五分钟搞懂后缀数组!后缀数组解析以及应用(附详解代码) 作者:YxuanwKe ...
- 常用sql 增删改、批量、合并、去重、增列、
自己总结的一些常用sql :插入.删除.批量更新.判重.新增列.数据库连接数 ---------------- 批量插入跨数据库 insert into ejpms.dbo.role (Name,In ...