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>