angular -- 文件资源、组件、模板语法

碎碎念：都是一些自己在学习过程中的一点体会，如果有什么不对的感谢大家指正一起学习！

1.文件资源

1-1 项目目录介绍

1. package.json：项目（npm）配置文件，定义项目的名称、版本、项目所需的各种依赖 *
2. app：组件、根模块 *
3. assets：静态资源文件（图片等资源）*
4. node_module：安装的第三方模块的存放位置
5. polyfill.ts ：填充库，能帮我们把这些不同点进行标准化
6. main.ts ： 应用的主要入口点
7. tsconfig.json： TypeScript编译器的配置

1-2 根组件和根模块

1.根组件：

• app.html、app.css、app.ts（这三个文件）
  
  1.1 组件的组成解析
  

2.根模块：

• app.module.ts
• 这个文件是angular的根模块，告诉angular如何组装应用
  
  2-1 根模块文件解析
  

2. 语法

2-1 声明属性的几种方式

• 没有加属性前缀，默认为public
  

2-2 模板绑定属性

【】的使用

2-2-1 ，属性绑定

//html
/* 静态数据绑定 */
<div title="测试"></div>

/* 动态数据绑定（绑定了一个变量） */
<div [title]="title"></div>

---------------------------------------
//ts
title = "动态数据测试"

2-2-2 绑定html

• 在标签内插入html

// html
<div class="box" [innerHTML]="pTag"></div>
-------------------
// ts
 pTag="<h2>我是h2标签</h2>"

2-3 数组语法

• 数组的几种语法

// 不声明类型
  public arr = ['111', '222', '333'];
  
// 类型为any  推荐
  public arr1: any[] = ['111', '222', '333'];

// 类型为string的数组
  public arr2: Array<string> = ['111', '222', '333'];

// 类型为any的数组对象
  public arr3: any[] = [
    {
      name: "一",
      age: '1'
    },
    {
      name: "二",
      age: '2'
    }
  ];

2-4 事件绑定

• 键盘事件绑定

//html
<div class="form">
    keydown：根据输入的值实时显示
    <input type="text" (keydown)="keyDown($event)" />
    <br/>
    keydown：回车之后显示输入的值
    <input type="text" (keyup)="keyUp($event)" />
</div>
----------------------------------------------
//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); 
    }
  }

2-5 双向数据绑定（mvvm）

• ngModel
• modle改变会影响视图，视图（html）改变会反过来影响model（ts）
• 仅支持表单
• *引入支持依赖模块 FromsModule

例1： 文本框双向绑定

//html
<div class="form">
    <input type="text" [(ngModel)]="keywords" />
    {{keywords}}
</div>
-----------------------------------
//ts
keywords:string="默认文字";

2.5.1 没有默认值

2.5.2 有默认值

3. 表单双向绑定案例

• input、checkbox、radio、select、textarea

//html
<section class="form">

      <header class="title">表单双向绑定</header>

      <article class="main">
      
        <!-- input -->
        <div class="list">
          姓名：<input type="text" class="input" [(ngModel)]="peopleInfo.userName" />
        </div>
        
        <!-- radio--> 
        <div class="list">
          性别：
          <p>
            <label>
              <input type="radio" name="sex" value="male" class="radio" [(ngModel)]="peopleInfo.sex" />男
            </label>
            &nbsp;&nbsp;&nbsp;
            <label>
              <input type="radio" name="sex" value="female" class="radio" [(ngModel)]="peopleInfo.sex" />女
            </label>
          </p>
        </div>

		<!-- checkbox-->
        <div class="list">
          爱好：
          <span *ngFor="let item of peopleInfo.checkboxs;let i= index;">
            <label [for]="'check'+i">
              <input type="checkbox" [id]="'check'+i" [(ngModel)]="item.checked" />{{item.title}}
            </label>
            &nbsp;&nbsp;&nbsp;
          </span>
        </div>

		<!-- select-->
        <div class="list">
          城市：
          <select [(ngModel)]="peopleInfo.city">
            <option [value]="city" *ngFor="let city of peopleInfo.citys;">{{city}}</option>
          </select>
        </div>

		<!-- textarea-->
        <div class="list">
          备注：
          <textarea name="remark" [(ngModel)]="peopleInfo.remark"></textarea>
        </div>

        <div class="list">
          <button (click)="submitForm()">获取表单内容</button>
        </div>

      </article>


    </section>
    <pre>
      {{peopleInfo | json}}
    </pre>
------------------------------
//ts
/* 定义对象 */
peopleInfo: any = {
    userName: "默认名字",
    sex: "female",
    citys: ['北京', '上海', '深圳'],
    city: '上海',
    checkboxs: [
      {
        title: '看书',
        checked: false
      },
      {
        title: '跑步',
        checked: true
      },
      {
        title: '游泳',
        checked: false
      },
      {
        title: '睡觉',
        checked: true
      }
    ],
    remark: "默认备注~"
  }

/* 提交表单方法 */
  submitForm() {
    console.log(JSON.stringify(this.peopleInfo , null, 4))
  }

angular表单（双向绑定）