Angular学习之旅----创建项目第一次运行

npm install -g @angular/cli 全局安装最新的angular-cli脚手架
在项目目录下cmd
ng new angular01建立新的项目
cd angular01 之后yarn install安装依赖
ng serve --open
在项目目录下运行
ng g component components/header来创建header组件

 

ngOnInit   angular的生命周期函数

数据文本绑定{{}}

绑定HTML <span [innerHtml]="h"></span>

绑定属性  <span [title]='msg1'>绑定属性</span>

循环数组

<ul>
    <li *ngFor="let item of list">{{item}}</li>
 </ul>

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

<ul>
    <li template="ngFor let item of list2;let key=index">{{item.title}}---{{key}}</li>
  </ul>

条件判断

<!-- 条件判断语句 -->
<div *ngIf="flag">flag为true的情况显示</div>

绑定方法事件

<button (click)='setName()'>改变值</button>

条件判断语句

<div *ngIf="flag">flag为true的情况显示</div>

获取事件对象

<button (click)='run($event)'>获取事件对象</button>

数据双向绑定  <!-- 需要在app.module.ts中引入forms模块 -->

  <input type="text" [(ngModel)]="search">
  {{search}}
  <button (click)='getSearch()'>获取搜索的值</button>