AngularJS学习笔记

本次实验通过Getting Start来完成

详细的教程为AngularJs

<h2>Products</h2>

<div *ngFor="let product of products">
//这这里对products中的内容进行了循环，并且可以从每一次循环中调用product值

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>

AngularJS的基本用法

1. *ngFor

2. *ngIf：可以通过“”完成数据if语句的编写，这里支持js的常用判断编写

3. 插值 {{}}：可以直接调用的数据内容

4. 属性绑定 []：属性即为ALT，鼠标悬停可以查看到的数据内容

5. 事件绑定 ()：可以对需要参与的事件进行编写

在AngularJs的语法中是存在子父类的定义的，对于组件，调用它的组件即为其父类。当我们再定义一个组件的时候，如：

//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { TopBarComponent } from './top-bar/top-bar.component';
import { ProductListComponent } from './product-list/product-list.component';
import { ProductAlertsComponent } from './product-alerts/product-alerts.component';

可以看出来我们再最后又引入Product_Alert组件
对于该组件使用的product_list为其父组件。
此时的product——list我们可以看到product_Alert的存在，通过属性绑定我们可以将product的值传进去

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

  <app-product-alerts
  [product]="product">
</app-product-alerts>

</div>