Angular 4.0

2017-11-24  本文已影响141人  壹点微尘
一.课程简介 (注意:这里的AngularJS指的是2.0以下的版本)
AngularJS的优点:
AngularJS的一些问题:
Angular(指的4.0版本)新特性
Angular与其他流行前端框架的比较
Angular 继承了AngularJS原有的优点,并且吸收了React以及其他框架的优点,祛除了他们的缺点,形成了一套全新的框架.
Angular
二. 开始Angular开发
Angular程序架构
项目目录
项目目录
component组件组成的必备元素
组件的必备元素
其他笔记
export class StarsComponent implements OnInit {
  // 外面注入进来的
  @Input()
  rating: number = 0;
  stars: boolean[];
  constructor() {
  }
  ngOnInit() {
    // 数组要初始化一下
    this.stars = [];
    for (let i = 1; i <= 5; i++) {
      this.stars.push(i > this.rating);
    }
  }

}
三.使用Angular Route导航
四. 依赖注入
五. 数据绑定、响应式编程和管道。
 <input [(ngModel)]="name">

先导入

import {Observable} from "rxjs";

  //被观察者 
  Observable.from([1, 2, 3, 4])
    .filter(e => e % 2 === 0)
    .map(e => e * e)
    //订阅 (观察者)
    .subscribe(
      //观察者
      e => console.log(e),  // 4 ,  6
      err => console.error(err),
      () => console.log('结束了') // 结束了
    );

观察者后两个回调方法是可选的

err => console.log(err),
() => console.log('结束了') // 结束了
六.组件间通讯

在父组件中调用子组件的方法

在父组件中 ,声明一个模板变量

<app-child #child1></app-child>

在父组件ts文件中,使用@ViewChild()装饰器

export class AppComponent implements OnInit {
  /**
   * 在父组件 AppComponent 里面,获得子组件的引用
   */
  @ViewChild('child1') // 通过模板变量的名字child1,找到了对应的子组件,并将child1赋值给了下面的child1变量
  child1: ChildComponent;

  ngOnInit(): void {
    // 调用子组件的方法
    this.child1.greeting('Tom');
  }
}

在父组件的模板上调用子组件的方法

<!-- 先声明模板变量-->
<app-child #child2></app-child>
<!--在父组件的模板上调用子组件的方法-->
<button (click)="child2.greeting('Jerry')">调用child2的greeting方法</button>
七. 表单处理
<form #myForm="ngForm" (ngSubmit)="createUser(myForm.value)">
  <div>用户名:<input #myNickName="ngModel" ngModel name="nickname" type="text" pattern="[a-zA-Z0-9]+"></div>
  <div>邮箱:<input ngModel name="email" type="email"></div>
  <div>手机号:<input ngModel name="mobile" type="number"></div>
  <div ngModelGroup="passwordInfo">
    <div>密码:<input ngModel name="password" type="password"></div>
    <div>确认密码:<input ngModel name="passwordConfirm" type="password"></div>
  </div>

  <button type="submit">注册</button>
</form>

<br>
<hr>
<br>

<div>
  {{myForm.value | json}}
</div>
<br>
<div>
  昵称的值是{{myNickName.value}}
</div>
模板式表单栗子 
<!--
与后台的formModel绑定;
createUser() 不用传值;
-->
<form [formGroup]="formModel" (submit)="createUser()">
  <div>昵称:<input formControlName="nickname" type="text" pattern="[a-zA-Z0-9]+"></div>
  <div>邮箱:
    <ul formArrayName="emails">
      <li *ngFor="let email of formModel.get('emails').controls;let i = index">
        <input [formControlName]="I">
      </li>
    </ul>
    <input type="button" (click)="addEmail()" value="添加Email">
  </div>
  <div>手机号:<input formControlName="mobile" type="number"></div>
  <!--与后台的passwordInfo绑定-->
  <div formGroupName="passwordInfo">
    <div>密码:<input formControlName="password" type="password"></div>
    <div>确认密码:<input formControlName="passwordConfirm" type="password"></div>
  </div>

  <button type="submit">注册</button>
</form>

ts中代码

import {Component, OnInit} from '@angular/core';
import {FormArray, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  // 整个表单所有数据
  private formModel: FormGroup;

  constructor() {
    this.formModel = new FormGroup({
      nickname: new FormControl(),
      emails: new FormArray([
        new FormControl()
      ]),
      mobile: new FormControl(),
      passwordInfo: new FormGroup({
        password: new FormControl(),
        passwordConfirm: new FormControl()
      })
    });
  }

  addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());
  }
  createUser() {
    console.log(this.formModel.value);
  }
}
响应式表单

打印结果:


响应式表单打印结果
使用FormBuilder可简化上面ts文件中大代码
import {Component, OnInit} from '@angular/core';
import {FormArray, FormBuilder, FormControl, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  // 整个表单所有数据
  private formModel: FormGroup;

  private fb: FormBuilder = new FormBuilder();

  constructor() {
    this.formModel = this.fb.group({
      nickname: ['xxx'],
      emails: this.fb.array([
        ['']
      ]),
      mobile: [''],
      passwordInfo: this.fb.group({
        password: [''],
        passwordConfirm: ['']
      })
    });
  }

  addEmail() {
    const emails = this.formModel.get('emails') as FormArray;
    emails.push(new FormControl());
  }

  createUser() {
    console.log(this.formModel.value);
  }

  ngOnInit() {
  }

}
上一篇 下一篇

猜你喜欢

热点阅读