2020-07-21

2020-07-21  本文已影响0人  菜鸟白泽

核心知识：模块、组件、模板、指令、数据绑定、服务和依赖注入、路由

一、模块

（ng 中，模块指的是项目中功能模块，是一个抽象的概念，把功能划分出来，如商品模块，用户模块等。）

NG 中的模块叫做 NgModule，与 ES 和 node.js 中‘模块’概念不同。

ES 和 node.js 模块，一个文件就是一个模块，可以导出内部成员，引用其他模块的成员。NG 中的模块指项目中的 功能模块。

主组件的作用

引导加载模块的流程

二、组件

（组件是一块可重复使用的页面区域，有专有的样式、模块、数据，表现上就是一个自定义标签）

在 login.ts 文件中

  1. 导入核心，为了能够使用装饰器
import {Component} from '@angular/core'
  1. 导出组件对象
export class Login{ }
  1. 写装饰器
@Component({  //装饰器，相当于给Login贴上工牌   
  selector:'my-login',   
  template:'<h3>我的第一个angular组件</h3><br>'
 })
// 上面的代码都是描述Login这个组件的数据，那么上面每个数据都叫做元数据

在 app.Module.ts 中

  1. 组件必须去主模块声明一下 app.Module.ts

    4.1 导入子组件

import { Login } from './login';

4.2 注册

@NgModule({    
  declarations: [        
    AppComponent,        
    Login    
  ],    ... })

在 app.component.html 中

5.使用自定义组件 app.component.html 中

<my-login></my-login>

三、数据绑定

angular 数据绑定

VueJS 数据绑定

m--v: 插值表达式

{{}}

{{}}

m--v: 属性绑定

[src]=

v-bind: :src

v--m: 事件绑定

(click)

v-on @click='delect'

双向绑定

[(value)]

v-model:value

数据绑定

import {Component} from '@angular/core'
@Component({
    selector:'emp-info',
    template:`
       <h3>员工信息</h3> 
       <div>员工姓名：{{emp.ename}}</div>
       <div>员工姓名：{{emp.ename.toUpperCase()}}</div>
       <div>员工姓名：{{emp.ename.toUpperCase().slice(2)}}</div>
       <div>员工薪资：{{'¥'+emp.salary*12}}</div>
       <div>员工性别：{{emp.gender==1 ? '男':'女'}}</div>
       <div>员工生日：{{emp.birthdate}}</div>
       <div>员工项目：{{emp.projectList}}</div>
       <ul>
           <li>{{emp.projectList[0]}}</li>
           <li>{{emp.projectList[1]}}</li>
           <li>{{emp.projectList[2]}}</li>
       </ul>
       // <div>{{emp}}</div>
       // vuejs 中这种写法，会自动转换成 json 字符串
       // ng 不能自动转 ng 是 [Object Object] 
  
      // <div>{{JSON.stringify(emp)}}</div>
      // <div>{{new Date(emp.birthdate).getFullYear())}}</div>
      // <div>{{parseInt(123.456))}}</div>
      // 插值表达式中不能使用任何全局对象
    `
})
​
export class EmpInfo{
    num = 12.5;
    emp={
        ename:'lilei',
        gender:1,
        salary:10000,
        birthdate:1501234567890,
        projectList:['项目1','项目2','项目3']
    };
    showInfo() {
        console.log('调用了showInfo()');
        return '123';
    }
}

重点知识：

{{}}插值表达式，与vuejs的不通用

  1. 不能使用关键字new new Date

  2. 不能使用全局函数 parseInt

  3. 不能使用全局对象 window、json

四、指令

Vuejs 提供13个指令

v-for、v-if、v-else-if、v-else、v-show

v-bind:/:、v-on:/@

v-html、v-text、v-cloak

v-once v-pre

v-model

angular中的指令分为三类(common 自动导包、forms 和 router 自行导包)

  1. 组件就是一种特殊的指令:NG中组件继承自指令，组件是一种特殊的指令

Component extends Direvtive

  1. 结构型指令，影响dom树结构的指令，必须以*号开头

ngFor 、ngIf 、ngSwitchCase、ngSwitchDefault

  1. 属性型指令，会影响dom元素的属性值 (类似:bind)，必须使用[ ]括起来

[ngClass] [ngStyle] [ngSwitch] [(ngModel)]

  1. *ngFor：对数组或者对象进行遍历。使用这个指令，自动生成一个 index 也就是下标值
// html
<button (click)="addScore()">给数据添加随机数</button>
<h3>遍历数组</h3>
<ul>
  <li *ngFor="let score of scores;let i=index">
    {{score}}--{{i}}
  </li>
</ul>
​
// component.ts
scores = [89, 91, 71];
addScore() {
    const num = Math.floor(Math.random() * 100);
    this.scores.push(num);
}
=======================================================================
// html
<h3>删除数据</h3>
<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
    <tr *ngFor="let e of elist">
      <td> {{e.eid}} </td>
      <td> {{e.ename}} </td>
      <td> {{e.gender==1?'男':'女'}} </td>
      <td>
          <button (click)="delete(i)">删除</button>
      </td>
    </tr>
  </thead>
</table>
​
// component.ts
elist = [
    { eid: 101, ename: 'dingding', gender: 1 },
    { eid: 102, ename: 'tuangtuang', gender: 0 },
    { eid: 103, ename: 'biangbiang', gender: 1 },
  ];
​
  delete(index) {
    this.elist.splice(index, 1);
  }
  1. *ngIf:true 则挂载指定元素，false 删除指定元素
// html
<button (click)="isShow=!isShow">显示与隐藏</button>
<ng-container *ngIf="isShow; else noShow">
    显示
</ng-container>
<ng-template #noShow>
    隐藏
</ng-template>
// component.ts
isShow=true;
  1. ngSwitch:实现多条件判定

传统switch

var status=10；switch（status）{
  case 10：   ...
   break;
  case 20：   ...
   break;
  default:
    ...}

ngSwitch——属性指令 [ngSwitch]=10

ngSwitchCase——结构指令 *ngSwitchCase=10

ngSwitchDefault——结构指令 *ngSwitchDefault

面试会问 ngSwitch 是什么指令？

<div [ngSwitch]="status">
    <p *ngSwitchCase="1">
        等待...
    </p>
    <p *ngSwitchCase="2">
        完结...
    </p>
    <p *ngSwitchDefault>
        走起...
    </p>
</div>
status=1;
  1. ngStyle 和 ngClass
import { Component } from "@angular/core";
 
@Component({
  selector:'style-class-demo',
  // 使用css属性选择器要要引入css文件
  styleUrls:['../assets/css/bgcolor.css'],
  template:`
  <h3>ngStyle和ngClass的演示</h3>
  <p [ngStyle]='{"background-color":"#006699"}'>第一段话</p>
  <p [ngStyle]='styleObj'>第二段话</p>
  <div [ngClass]='classObj'>class</div>`
})
export class StyleClassDemo{
  styleObj={
    'background-color':'#990066',
    'color':'#fff'  
  };
   classObj={'bgcolor':true};
 }

注意：

使用 NgClass 需要在 @Component 中引用写好的 css 样式

styleUlrs: ['../assets/css/*.css']

其实，搞个全局 css 文件就行，其他笔记中会介绍 css 文件的引用方式。

  1. 自定义指令
import {  Directive, ElementRef } from "@angular/core";
​
@Directive({
  //定义使用指令时的名称
  selector:'[xzFocus]'
})
export class xzFocus{
  // 指令的真正作用---构造函数
  // 如何获取当前的 dom 节点对象 el:ElementRef 
  // 只能获得当前元素对象，无法获得当前元素
  constructor(el:ElementRef){
    // el.nativeElement 才是真正的 dom 树上的对象
    console.log(el.nativeElement);
    // 哪一个元素获取焦点
    el.nativeElement.focus()
}

总结：

  1. 装饰器是 @Directive

  2. 装饰器中的 selector:'[xzFocus]'

  3. 注册与 component 一样

  4. 使用 <input xzFocus>

  5. 在对象的构造函数中，写真正的指令作用代码

  6. 如果获取当前使用指令的 dom 对象

    通过参数 el:ElementRef(ElementRef 需要引用)

    el.nativeElement ---> 才是使用指令的 dom 对象

  1. 双向绑定 [(ngModel)]

使用ngModel的步骤

1.导入包@angular/Forms中的{ FormsModule }

2.在模块中的imports属性中注册这个对象，才能使用

3.使用双向绑定 [(ngModel)]='kw'

import { Component } from "@angular/core";
 
@Component({
    selector:'ngmodel-demo',
    template:`
        <h3>双向绑定的演示</h3>
        <input type="text" [(ngModel)]='kw'>
        <p>{{ kw }}</p>`
})
export class NGModelDemo{
    // 双向绑定找不到数据了
    // view中kw
    innerkw='Dell';
    get kw(){
        console.log('get kw');
        return this.innerkw;
    }
    // 只要有人想改变 kw，set 会自动调用
    set kw(val){
        console.log('set kw');
        this.innerkw = val;
        //此处可以根据用户的输入执行 XHR 的异步请求
    }
}
练习：模拟百度搜索自动联想
VueJS 中
new Vue({
    data(){
        return { kw=''}
        },
     watch{ 
         kw:function()}
         }
});

Angular 中，使用set/get方法，对数据进行监听

import { Component } from "@angular/core";
 
@Component({
  selector:'ngmodel-demo',
  template:`
    <h3>双向绑定的演示</h3>
    <input type="text" [(ngModel)]='kw'>
    <p>{{kw}}</p>
  `
})//55下课 ，10点07上课
export class NGModelDemo{
  //双向绑定找不到数据了
  //view中kw
  innerkw='Dell';
  get kw(){
    console.log('get kw');
    return this.innerkw;
  }
  //只要有人想改变KW，set会自动调用
  set kw(val){
    console.log('set kw');
    this.innerkw=val;
    //此处可以根据用户的输入执行XHR的异步请求
  }
}

​

上一篇下一篇

猜你喜欢

热点阅读