个人理解Angular

它是一个模块化、组件化的开发理念，引入并声明后就可以在其他地方应用，在通过路由控制显示出来
github源码地址：https://github.com/wangduxiu/Angular7-Demo.git

创建一个项目

• 首先安装环境node.js，安装npm。
• 安装cli。
• 在cli中输入命令： cd到想要存储项目的文件夹，ng new 项目名
• 启动服务：在当前项目目录下ng serve --open可以看到页面显示angular则项
• 会自动创建一个可以运行的项目骨架。
• 启动服务：在当前项目目录下 ng serve --open可以看到页面显示angular则项
  目运行成功。

项目目录结构分析

主要需要知道的文件:

• node-modules：安装的第三方模块都放在这里。
• src : 编写项目都在这个文件夹中。
• app :组件以及app.modules.ts 定义根模块。
• index.html : 主页面入口。
• style.css : 全局样式。
• package.json : npm配置文件。

创建组件

• cd到项目文件夹，ng g component components/news:创建一个components文件夹（组件）并在该文件夹下创建一个news组件。
  注： 如果手动创建组件，想要使用这个组件必须在app.modules.ts中引入和声明，如果是命令自动创建则自动声明和引入。
• 如何在其他页面复用组件？
  在新创建的组件中的news.component.ts文件中，有一个selector属性就是名字，如果需要调用只需要在其他页面中写入 即可，这样页面代码量少、代码复用率高。

 @Component({selector: 'app-news',templateUrl: './news.component.html',styleUrls: ['./news.component.css']
})

定义数据

定义数据的几种方式：
1.定义基本数据

title ="我是新闻组件";
public title ="我是新闻组件";
public title:string ="我是新闻组件"; //最标准的定义方式
public message:any;//定义空数据

2.定义对象

  public userinfo:object={username:"zhangsan",age:"20"};

3.定义数组的几种方式

//普通数组
arr=[a,b,c];
public arr:arr[] =['111','222','333'];
public list:Array<number>=[123,321,456,654];//如果<>里面是number则数组必须是number
//对象数组
public userList:Array<object>=[{username:"zhangsan",age:18},{username:"lisi",age:19},{username:"wangwu",age:20}
];
//复杂数组
public cars:Array<any>=[{cate:"宝马",list:[{title:"X1",price:1000000},{title:"X2",price:2000000},{title:"X3",price:3000000}]},    {cate:"奔驰",list:[{title:"X1",price:1000000},{title:"X2",price:2000000},{title:"X3",price:3000000}]},    {cate:"劳斯莱斯幻影",list:[{title:"X1",price:1000000},{title:"X2",price:2000000},{title:"X3",price:3000000}]}
];

数据绑定 （1）

<!-- 绑定数据 -->
<h2>{{title}}</h2>
<h3>{{msg}}</h3>
<h4>{{username}}</h4>
<h5>{{student}}</h5><hr />
<!-- 绑定对象数据 -->
<h5>{{userinfo.username}}</h5>
<h5>{{userinfo.age}}</h5>
<h5>{{message}}</h5><hr />
<!-- 动态绑定标签属性 -->
<div [title]="student">张三
</div>
<!-- 通过属性绑定的方法解析标签 绑定数据 -->
<span [innerHtml]="content" class="red"></span><!-- 允许做简单运算 -->
1+2={{1+2}}<!-- 循环遍历数组绑定到页面中 -->
<ul class="ul"><li *ngFor="let item of arr">{{item}}</li>
</ul><ol><li *ngFor="let item of list">{{item}}</li>
</ol><!-- 遍历对象数组绑定页面 -->
<ul><li *ngFor="let item of userList">{{item.username}}{{item.age}}</li>
</ul><!-- 遍历复杂数组绑定页面 -->
<ul><li *ngFor="let item of cars"><h2>{{item.cate}}</h2><ol *ngFor="let car of item.list"><li>{{car.title}}{{car.price}}</li></ol></li>
</ul>

数据绑定 （2）

1.引入图片
html:

<img src="assets/images/1.jpg" alt="美女" width="240px" height="180px"><img [src]='imgSrc' alt="美女" width="240px" height="180px">

ts:

public imgSrc:any="https://www.baidu.com/img/bd_logo1.png";

2.循环数据显示数据的索引（key）
html:

<ul><li *ngFor="let item of list; let key=index;">{{key}}-----{{item.title}}</li>
</ul>

ts:

  public list:Array<any>=[{title:"新闻1"},{title:"新闻2"},{title:"新闻3"}];

3.条件判断语句 *ngIf
html:

<div *ngIf="flag"><img src="assets/images/1.jpg" alt="美女" width="240px" height="180px">;
</div>
<div *ngIf="!flag"><img [src]='imgSrc' alt="美女" width="240px" height="180px">
</div><ul><li *ngFor="let item of list; let key=index;"><span *ngIf="key==0" class="red">{{key}}-----{{item.title}}</span> <span *ngIf="key==1" class="pink">{{key}}-----{{item.title}}</span> <span *ngIf="key==2" class="blue">{{key}}-----{{item.title}}</span> </li>
</ul>

ts:

  public list:Array<any>=[{title:"新闻1"},{title:"新闻2"},{title:"新闻3"}];

4.条件判断语句 ngSwitch
html:

<span [ngSwitch]="orderStatus">
<p *ngSwitchCase="1">已经支付
</p>
<p *ngSwitchCase="2">已经支付并确认订单
</p>
<p *ngSwitchCase="3">已经发货
</p>
<p *ngSwitchCase="4">已经收货
</p>
<p *ngSwitchDefault>无效订单
</p>
</span>

ts:

public orderStatus:number=5;//1表示已经支付 2表示已经支付并确认订单 3表示已经发货 4表示收货 5表示无效

5.属性ngClass ngStyle
html:

<div [ngClass]="{'red': true,'blue': true}">111111111111111111111
</div><div [ngClass]="{'red': flag,'blue': !flag}">222222222222222222222
</div>

css:

.red{color: red;
}
.pink{color: pink;
}
.blue{color: blue;
}

ts:

public flag:boolean=true;

6.循环数组让数据变成红粉蓝
html:

<ul><li *ngFor="let item of list; let key=index;" [ngClass]="{'red': key==0,'pink':key==1,'blue':key==2}">{{key}}-----{{item.title}}</li>
</ul>

html:

<p style="color:red">我是一个P标签</p>
<p [ngStyle]="{'color': 'pink'}">我是一个P标签</p>
<p [ngStyle]="{'color': attr}">我是一个P标签</p>

7.管道
html:

<div>日期：{{today | date:'yyyy-MM-dd HH:mm ss'}}
</div>

ts:

 public today:any= new Date();

8.事件
html:

<strong>{{title}}</strong>
<br>
<button (click)="run()">执行事件</button>
<br>
<button (click)="getData()">执行事件,获取数据</button>
<br>
<button (click)="upDateData()">执行事件,改变数据</button>
<hr>

ts:

public title:string="我是一个标题";
run(e){alert("我是一个button事件");}
getData){alert(this.title);
}
upDateData(){this.title="我是改变后的数据";
}

9.表单事件 事件对象
html:

<input type="text" (keydown)="keydown($event)">
<br>
<input type="text" (keyup)="keyUp($event)">

ts:

keydown(e){if(e.keyCode==13){console.log("按了一下回车");}else{console.log(e.target.value);}
}
keyUp(e){if(e.keyCode==13){console.log("按了一下回车");console.log(e.target.value);}}

10.双向数据绑定 MVVM
html:

<input type="text" [(ngModel)]="keywords"> 
{{keywords}}
<br>
<button (click)="changeKeywords()">改变Keywords的值</button>
<br>
<button (click)="getKeywords()">获取Keywords的值</button>

ts:

public keywords:any="我是keywords";
changeKeywords(){this.keywords="我是改变后的值";
}getKeywords(){console.log(this.keywords);
}