好久沒寫點東西了，畢業剛剛回到上海，就馬上出差去了杭州去做app h5的webview開發，用的是ionic3，ionic現在學習還沒學完，現在就把自己學到的angular的筆記整理一下。

1. angular 的 nodejs安裝

npm install -g angular
npm -g install @angular/cli angular命令行工具安裝

用typescript來寫node需要引入一個包
npm i @types/node --save

2. angular cli常用的command

ng new 項目名稱 新建angular項目
ng g component xxx 生成組件
ng g service xxx 生成服務

3. jquery的使用

其實angular4里可以使用jquery了，不用像angular1里面使用類似jq的元素選擇器，不過其中需要一點配置。

1. npm安裝jq

npm install jquery --save

2.在angular-cli.json 里的app 配置文件里面 的styles、scripts里面添加js或者css的相對路徑,就放在app的script里面，里面還有一個框的是bootstrap

Screenshot 2018-01-12_19-03-46.png

3. 由于typescript 不認識js的東西，還需要一個 類型描述文件

npm install @types/jquery --save

4. 指令的簡單運用

像下面這樣一段代碼基本即看懂，*ngFor循環數組 ，js的class樣式控制用這種[class.xxxx]="xx" 這種方式，普通的變量綁定用{{}}即可

html
<p >
  <span *ngFor="let star of stars" class="glyphicon glyphicon-star"
  [class.glyphicon-star-empty]="star"></span>
  {{rating}}
</p>

ts
@Component({
  selector: 'app-stars',
  templateUrl: './stars.component.html',
  styleUrls: ['./stars.component.css']
})

export class StarsComponent{
  private rating: number = 0;
  private stars: boolean[];
  constructor() { }
}

5. 父組件向子組件傳遞數據

子組件代碼就是上面一段代碼，它需要父組件輸入一個rating屬性，父組件調用子組件，只需在html里面調用子組件的html標簽，輸入屬性用[]擴起來

<app-stars [rating]="product.rating"></app-stars>     
輸入屬性：這種屬性綁定  是輸入數據的綁定方式

然后子組件里面的代碼也需要改一下，將rating設置為輸入屬性

export class StarsComponent implements OnInit {
  @Input()        通過這個input輸入標注     聲明rating會被父組件輸入的屬性覆蓋
  private rating: number = 0;//默認
}