今天完成的事情：
1.安装配置angular
配置关键词：
cd
指定文件夹位置
ng serve --open
启动指令，用于打开angular网页
ng-g component xxx/xxx
在指定文件夹下建立新文件夹
app.component.html文件 根组件
app.module.ts文件 根模块
styles.css文件 公共样式
<app-form></app-form> 引入创建的文件夹form
{{xx}} 绑定后台数据
2.学习angular代码运用
新建文件夹news
代码实践：
news.component.html：
<h1>引入图片</h1>
<img src="assets/images/技能树首页_13.jpg" alt="">
<hr>
<h1>循环数据 显示数据的索引</h1>
<ul>
<li *ngFor="let item of list;let key=index;">
{{key}}---{{item.title}}
</li>
</ul>
<h1>条件判断语句 *ngIf</h1>
<div *ngIf="flag">
<img src="assets/images/技能树首页_14.jpg" alt="">
</div>
<div *ngIf="!flag">
<img src="assets/images/技能树首页_13.jpg" alt="">
</div>
<ul>
<li *ngFor="let item of list;let key=index;">
<span *ngIf="key==1" class="red">{{key}}---{{item.title}}</span>
<span *ngIf="key!=1">{{key}}---{{item.title}}</span>
</li>
</ul>
<h1>条件判断语句 *ngSwitch</h1>
<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">
表示已经支付
</p>
<p *ngSwitchCase="2">
支付并且确认订单
</p>
<p *ngSwitchCase="3">
表示已经发货
</p>
<p *ngSwitchCase="4">
表示已经收货
</p>
<p *ngSwitchDefault>
无效订单
</p>
</span>
<h1>属性[ngClass].[ngStyle]</h1>
<div class="red">
ngClass演示(尽量不要用dom来改变class)
</div>
<div [ngClass]="{'blue': true,'red': false}">
ngClass演示
</div>
<div [ngClass]="{'orange': flag,'red': !flag}">
ngClass演示
</div>
<strong>循环数组,让数组的第一个元素的样式为red</strong>
<ul>
<li *ngFor="let item of list;let key=index;" [ngClass]="{'red': key==0,'orange': key==1,'blue': key==2}">
{{key}}---{{item.title}}
</li>
</ul>
<hr>
<p style="color: red;">我是一个p标签</p>
<p [ngStyle]="{'color': 'blue'}">我是一个p标签</p>
<p [ngStyle]="{'color': attr}">我是一个p标签</p>
<br>
<h1>管道</h1>
{{today |date:'yyyy--MM--dd HH:mm ss'}}
<h1>事件</h1>
<strong>{{title}}</strong>
<br>
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">执行方法获取数据</button>
<br>
<button (click)="setData()">执行方法改变属性里面的数据</button>
<br>
<button (click)="runEvent($event)">执行方法获取数据对象</button>
<h1>表达事件 事件对象</h1>
<!-- <input type="text" (keydown)="keyDown()"> -->
keyDown:
<input type="text" (keydown)="keyDown($event)" />
keyUp:
<input type="text" (keyup)="keyUp($event)" /
<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords" />
{{keywords}}
<br>
<button (click)="changeKeywords()">改变keywords的值</button>
<br>
<button (click)="getKeywords()">获取Keywords的值</button>
news.component.ts
public title: string = '我是一个title';
public list: any[] = [
{
"title": '我是新闻1'
},
{
"title": '我是新闻2'
},
{
"title": '我是新闻3'
}
];
public flag: boolean = true;
public orderStatus: number = 1;
public attr: string = 'orange';
public today: any = new Date();
public keywords:string='这是默认值';
constructor() {
console.log(this.today);
}
ngOnInit(): void {
}
run() {
alert("执行方法");
}
getData() {
alert(this.title);
}
setData() {
this.title = '我是一个改变后的title';
}
runEvent(event) {
var dom:any = event.target
dom.style.color = "red";
}
keyDown(e) {
if (e.keyCode == 13) {
console.log('按了一下回车');
} else {
// e.target 获取对象
console.log(e.target.value);
}
}
keyUp(e) {
if (e.keyCode == 13) {
console.log(e.target.value);
console.log('按了一下回车');
}
}
changeKeywords() {
this.keywords = '我是改变后的值';
}
getKeywords() {
console.log(this.keywords);
}
总结：
已知agangular的特性：
修改代码时 http://localhost:4200/ 页面会自动刷新，不用手动
angular 属性 与 css 有相似性
返回列表
评论