Angular学习日志

一、环境的搭建

				1.安装node.js
					下载地址：https://nodejs.org/en/about/releases/
					node -v  检测 node.js 是否安装成功    npm -v 检测 npm包 是否安装成功 
				2.安装 Angular CLI
	   				npm install -g @angular/cli
	   			3.安装cnpm

二、搭建项目

	         	1.新建项目
					ng new my-app   
				2.手动安装依赖
					cnpm install  	
				3.运行
					ng serve --open
				4.新建组件
					ng g component components/news
				5.新建服务
					ng g service services/storage

三、定义数据

				1.定义数据的几种方式
					msg = '直接赋值，默认使用public类型'；
					public msg = '绑定变量属性'；
					//属性修饰符共有三种 public protected private 区别在于作用域
					public username:string='张三';
					//如果不清楚数据类型，使用any
					public student:any='电科11701 李四';
					--------------
					{{student}}
					
				2.定义对象
				
					public user：any={
						username:"张三",
						age:'20',
						gender:'男'
					}
					------------
					{{user.username}}
					{{user.age}}
					
				3.定义数组
					arr=['1', '2', '3'];
					public list:any[]=['我是第一个','我是第二个','我是第三个'];
					public items:Array<any>=['我是第一个','我是第二个','我是第三个'];
					![在这里插入图片描述](https://img-blog.csdnimg.cn/20200716183056202.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0dWR5X3NpbXBsZQ==,size_16,color_FFFFFF,t_70)

			<p>引入图片</p>

<img [src] = "picUrl"   alt="收藏"/>

<img src = "assets/images/2.jpg" alt="收藏" />

<p>循环数据 显示索引值</p>

<ul>
    <li *ngFor = "let item of list; let key = index" >
       <span *ngIf="key == 1" class="red">{{key+1}}、 {{item.title}} </span>
       <span *ngIf="key != 1" >{{key+1}}、 {{item.title}} </span>
    </li>
</ul>

<p>条件判断*ngIf</p>

<div *ngIf="flag">
    <img src = "assets/images/1.png" alt="收藏" />
</div>

<div *ngIf="!flag">
    <img src = "assets/images/2.jpg" alt="收藏" />
</div>


<p>条件选择*ngSwitch</p>

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

    <p>条件选择*ngclass ngstyle</p>

    <div class="red">
        class 
    </div>

    <div [ngClass]="{'red':true}">
        [ngclass]
    </div>

    <div [ngClass]="{'orange':flag,'blue':!flag}">
        [ngclass]选择改变样式
    </div>

    <br />
    <strong>实例1.循环数组，让数组第一个元素的样式是red</strong>

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

    <p style="color:red">style</p>
    <p [ngStyle]="{'color':'red'}">ngStyle</p>
    <p [ngStyle]="{'color':attr}">ngStyle</p>


    <p>管道</p>
    {{today}}
    <br />
    {{today | date:'yyyy-MM-dd HH:mm:ss yyyy-MM-dd'}}


    <p>事件</p>

    <button (click)="run()">执行事件</button>

    <button (click)="getdata()">获取数据</button>

    <button (click)="setdata()">改变数据</button>

    <button (click)="runevent($event)">获取事件对象</button>

    <p>表单事件 事件对象</p>

    表单：
    <input type="text" (keydown)="keydown($event)"/>

    <p>双向数据绑定  只是针对表单</p>

    <input type="text" [(ngModel)]='keywords' />
    {{keywords}}
    <br />
    <button (click)="changekeywords()">恢复值默认</button>
    <button (click)="getkeywords()">获取</button>