1 环境安装 nodejs，npm，cnpm ， angular/cli

http://https://https://cfzy.site/?p=2687

2 新建项目 ng new projectname

3 新建组件 ng g component 组件目录/组件名

ps:新建组件在项目目录的src/组件目录下
ps:angularjs里面的组件相当于flash里面的movieclip
启动服务： ng serve –open
可选参数–prod –aot

4 ts文件里面给变量赋值，html里面{{var}}引用

{{title}}<br>{{msg}}<br>{{msg1}}
<br>
<div [innerHTML]="h"></div>
<br>
{{obj.name}}

title='hello,cool girl!';
  msg1:string='this is a string msg';
  msg:any;
    h="<h2>h2</h2>";
    obj={"name":"harriet"};
  constructor() { 
    this.msg='msg';
  }

5 html里面div的属性绑定

<div id="{{id}}">
ok
</div>
<div title="{{msg1}}">mouse on</div>
<div [title]="msg1">other way</div>

id='123';
msg1:string='this is a string msg';
  constructor() {
  }

6 循环展示数据

<ul>
  <li *ngFor="let item of list2;let i=index">
    {{item.name}}---{{i}}
  </li>
</ul>

list2:any[];
  constructor() { 
    this.msg='this msg is from constructor';
    this.list=[1,2,3,4];
    this.list2=[
      {"name":"n1"},
      {"name":"n2"},
      {"name":"n3"},
  ]
  }

7 嵌套循环展示数据

<ul>
  <li *ngFor="let item of list4;let i=index">
    {{item.car}}---{{i}}
    <ol>
      <li *ngFor="let item2 of item.list;let i2=index">
        {{item2.title}}---{{i2}}
      </li>
    </ol>
  </li>
</ul>

list4:any[];
  constructor() { 
    this.list4=[
    {
      "car":"baoma",
      "list":[{"title":"b1"},{"title":"b2"}]
    },
    {
      "car":"ad",
      "list":[{"title":"a1"},{"title":"a2"}]
    }
  ];
  }

8 点击get&set

<button (click)="getMsg()">getmsg</button>
<br>
{{msg}}
<br>
<button (click)="setMsg()">setmsg</button>

msg = 'for test';
  constructor() { }

  ngOnInit() {
  }

  getMsg(){
    alert(this.msg);
  }

  setMsg(){
    this.msg = "msg verify";
  }

9 显示隐藏div

ts文件里面定义 flag = true;

<div *ngIf="flag">test hide</div>
<br>
<button (click)="flag=!flag">hide&show</button>

10 双向数据绑定

1. 检查app.module.ts里面是否引入

import { FormsModule } from ‘@angular/forms’;
imports里面加上FormsModule

2.ts里面定义search=”双向绑定”;

3.html里面加上

<input type="text" [(ngModel)]="search"/>