Angular.js

Init

Installation

npm install -g @angular/cli

Create an initial application

ng new my-app
cd my-app
ng serve --open (ng serve -o)

Build:

ng build --prod

property

**.component/page.ts

export class NewsPage implements OnInit {
  // Definition,use ':'
  res: any;
  name: string;

  // Assignment, use '='
  title = 'Title';
  count = 1;

}

Bind Model

Method One

**.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...
    FormsModule
  ],

**.component/page.ts

export class NewsPage implements OnInit {
  name: string;
}

**.component/page.html

Input:<ion-input [(ngModel)]="name"></ion-input>
  <ion-col>Name: {{ name }} </ion-col>

image.png

Method Two

Split [(ngModel)]="name" to [ngModel]="name" (ngModelChange)="unameChange($event)"

**.component/page.ts

export class NewsPage implements OnInit {
  uname: string;

  unameChange(updateValue) {
    this.uname = updateValue;
    if (this.uname === 'hello') {
      console.log('hello');
    }
  }
}

**.component/page.html

  <ion-input
    [ngModel]="uname"
    (ngModelChange)="unameChange($event)"
  ></ion-input>
  <ion-col>Name: {{ uname }} </ion-col>

ElementRef

Get DOM by ElementRef.
https://www.jianshu.com/p/fc6cf8cd6e39

Set the input autofocus and init value:

**.component/page.html

<ion-input #nameRef></ion-input>

**.component/page.ts

import {
  ...
  ElementRef,
  ViewChild,
  AfterViewInit
} from '@angular/core';


export class NewsPage implements OnInit, AfterViewInit {
  // use ViewChild to search a argument of templat
  // nameRef: the id of input
  //
  // 模板引用变量是声明在一个DOM元素上，所以我们给它的类型是ElementRef
  @ViewChild('nameRef22') nameElemtnRef33: ElementRef;

  constructor(private newsService: NewsService, private router: Router) {}

  // ngAfterViewInit()  模板中的元素已创建完成
  ngAfterViewInit() {
    console.log(this.nameElemtnRef33);
    this.nameElemtnRef33.setFocus();
    this.nameElemtnRef33.el.innerHTML = 'set value';
  }

image.png image.png image.png

Though it has error,it works.

image.png