angular5学习系列之基础知识

一、目录结构分析

e2e 在e2e下是端到端测试
node_modules 安装的第三方模块
src 项目的所有文件
app 组件 以及app.module.ts定义跟模块
assets 静态资源
environment 为各个目标环境准备的文件
index.html 主页面
main.ts 主要入口
polytills.ts 填充库帮我们大这些不同点进行标准化
styles.css 全局样式
test.ts 测试主要入口
.editorconfig 给编辑器看的一个简单配置文件
.gitignore 一个git得配置文件
angular.json angular配置
karma.conf.js 单元测试配置
package.json npm配置
package-lock.json
tsconfig.app.json ts编辑器的配置文件
tsconfig.json ts编辑器的配置
tsconfig.spec.json ts编辑器的配置文件
tslint.json tslint 、codelyzer的配置信息

二、模板、组件分析

1.app.module.ts
定义appmoudle，这个根模块告诉angular如何组装应用

2.自定义组件
ng g component component/foo—意思是在app下的component文件夹下创建一个foo组件
ng g component foo–意思是在app下创建一个foo组件
3.使用组件
或者
组件名字在创建的组件ts文件中的selector后：

三、绑定数据

1.文本绑定 ：｛｛｝｝
ts文件中定义变量

export class FooComponent implements OnInit {
  public title='foo组件';
  ars='ars文字';
  usersname:string='甜甜笑乐开怀';
  usersage:number=24;
  constructor() { }
  ngOnInit(): void {
  }
}

html中绑定：

<div>
    这是一个{{title}}---{{ars}}
    作者是{{ usersname}},今年{{usersage}}岁
</div>

声明属性的几种方式：
public 公共（默认） 可以在类里类外使用，可以被继承
protected 保护型 只有在当前类和其子类里面可以访问，可以被继承
private 私有型 只有当前类可以访问，无法被继承
2.带标签的绑定显示：

<p [innerHTML]="content"></p>

content='<h3>这是h3标签</h3>'

3.绑定属性：
分为静态和动态

<div title='啥都没有啊'>鼠标移上去</div>
<br>
<div [title]="usersname">动态绑定属性就是属性值在ts文件中，不在行内</div>

四．数据循环

key就是索引，动态数据一般是需要写的

<ul>
    <li *ngFor="let item of arr;let key=index">{{key}}----{{item}}</li>
</ul>
<ol>
    <li *ngFor="let aaa of obj">
        <h2>{{aaa.province}}</h2>
        <ul>
            <li *ngFor="let bbb of aaa.mince">{{bbb.city}}==={{bbb.county}}</li>
        </ul>
    </li>
</ol>

 public arr:string[]=['第一条数据','第二条数据','第三条数据'];
  public  obj:any[]=[{
      province:'河南',
      mince:[{
        city: '郑州',
        county:'新郑'
      },{
        city:'商丘',
        county:'柘城'
      }]
  },{
    province:'湖南',
    mince:[{
      city: '长沙',
      county:'张家界'
    },{
      city: '长沙1',
      county:'张家界1'
    }]
}]

五．条件循环

ngSwitch

<ul [ngSwitch]= 'orderstatus'>
    <li *ngSwitchCase="1">已付款</li>
    <li *ngSwitchCase="2">已确认</li>
    <li *ngSwitchCase="3">已发货</li>
    <li *ngSwitchDefault>无效</li>
</ul>

public orderstatus:number=1;

ngClass

<div class="red">静态样式</div>
<div [ngClass]="{'blue':true,'red':false}">动态样式</div>
<div [ngClass]="{'blue': flag,'red':!flag}">
    动态样式+变量
</div>

public flag:boolean=false;

.red{
  color: red;
}
.blue{
    background-color: blue;
}

ngStyle

<div style="color:red">
    静态style
</div>
<div [ngStyle]="{'color': 'red','background':'blue'}">动态style</div>
<div [ngStyle]="{'color': res,'background':blu}">动态style+变量</div>

res:string='red';
blu:string='blue';

六．执行事件

<button (click)="getData()">点击按钮触发事件</button><br><br>
<button (click)="setData()">按钮触发事件</button><br>
<br>
{{msg}}

  getData(){
    console.log(this.msg)
  }
  setData(){
    this.msg='新改动的数据'
  }
msg:string="获取数据"

七．表单事件

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

  keyUp(e:any){
    if(e.keyCode==13){
      console.log(e.target.value);
      console.log('回车')
    }
  }

八．双向绑定

引入双向绑定的模块：在app.module.ts中

import { FormsModule } from '@angular/forms';
 imports: [      //引入的运行所依赖的其他模块
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],

<input type="text" [(ngModel)]="value">
<br>
<br>
<br>
{{value}}

value:string='双向数据绑定默认值';

九．管道：用来对输入的数据进行处理，例如：大小写转换、数值和日期格式化

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

today=new Date();