Angular4

1.安裝node.js

　　官網下載安裝

　　npm會跟着被自動安裝

2.安裝Angular工具（AngularCli）

　　1.使用npm安裝

　　　　npm install -g @angular/cli

　　2使用cnpm安裝

　　　　1）使用淘寶npm鏡像安裝cnpm

　　　　　　 npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　2）使用cnpm安裝AngularCli

　　　　　　npm install -g @angular/cli

3.安裝Visual Studio Code

　　官網下載安裝

4.Angular命令

　　1）新建項目：ng new angulardemo

　　　　

　　2）安裝依賴：cnpm install

　　　　意思就是把項目中package.json指定的依賴包下載到本地，生成的文件夾爲node_modules

　　3）啓動項目：ng serve --open

　　4）建立組件：ng g component components/header

　　　　這裏爲了方便查看，將自定義組件存在在components裏面

　　　　

　　　　並且，爲了保證組件能用，應該在 app.module.ts 這個文件引入並配置

　　　　

 　　5）建立其餘內容

　　　　

5.Angular 數據交互

　　1）隨便舉些例子，當筆記

　　　　ts文件定義好數據

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  // 定義一個屬性
  title = 'header';

  // 定義一個boolen值
  ShowTitle = true;

  // 定義一個屬性，值爲html
  html = '<h2>這裏是存放html的屬性</h2>';

  // 定義一個對象
  obj = {
    name: 'kxy'
  };

  // 定義一個數組
  list = ['數學', '語文', '英語'];

  // 定義一個json數組
  list1 = [
    {
      'Name': 'kxy',
      'Sex': '男',
      'Hobby': { 'Book': '小說', 'Game': 'DNF' }
    },
    {
      'Name': 'flt',
      'Sex': '女',
      'Hobby': { 'Book': '不知道', 'Game': '王者榮耀' }
    }
  ];

  getTitle() {
    alert(this.title);
  }
  ChangeShowTitle() {
    this.ShowTitle = !this.ShowTitle;
  }
  KeyUpEvent(e) {
    console.log(e);
  }
  constructor() {

  }

  ngOnInit() { // 生命週期函數，加載應用觸發
  }
}

　　　　html以下

<p>
  header works!
</p>
<!-- 用雙大括號能夠直接使用ts數據 -->
<a>{{title}}</a>

<!-- 標籤裏面的屬性能夠用如下兩個方法調用數據，效果同樣 -->
<div title="{{title}}">title屬性，鼠標瞄上去能夠查看</div>
<div [title]="title">title屬性，鼠標瞄上去能夠查看</div>

<!-- 讀取html不能直接用大括號，須要用到innerHtml屬性 -->
<div [innerHtml]="html"></div>

<!-- 循環數組 -->
<ul>
  <li *ngFor="let item of list">{{item}}</li>
</ul>

<!-- 獲取數組索引值 -->
<ul>
  <li *ngFor="let item of list;let key=index">{{key}}--{{item}}</li>
</ul>

<!-- 循環json數組 -->
<ul>
  <li *ngFor="let item of list1">
    {{item.Name}}_{{item.Sex}}
    <ol>
        喜歡的書籍：{{item.Hobby.Book}}
        <br>
        喜歡的遊戲：{{item.Hobby.Game}}
    </ol>
  </li>
</ul>
<hr>

<!-- 調用函數 -->
<button (click)="getTitle()">點擊我</button>
<hr>

<!-- 判斷語句 -->
<div *ngIf="ShowTitle">{{title}}</div>
<button (click)="ChangeShowTitle()">顯示《_》隱藏</button>
<hr>

<!-- 鍵盤按鈕彈起觸發,注入 事件對象$event ,ts獲取的數據能夠在控制檯查看 -->
<input type="text" (keyup)="KeyUpEvent($event)">

　　2）雙向數據綁定

 　　須要先在app.module.ts裏面引入

import { FormsModule } from '@angular/forms';

　　還得在imports裏面聲明一下

　　html以下：

<!-- 雙向數據綁定 -->
<input type="text" [(ngModel)]="title">
{{title}}

　　在咱們修改頁面title的值時，ts文件也會對應的修改（中括號表示屬性，小括號表示事件）

　　3）服務

　　例子：

　　　　添加一個服務：ng g service services/storage

　　　　代碼上面表格也有。

　　　　而且須要在app.module裏面引入

　　　　

　　　　且使用這個服務的組件也須要引入，才能夠使用

　　　　　　import { StorageService } from '../../services/storage.service';

 6.Http網絡請求

　　老規矩，在app.module裏面添加引用

　　

　　而且須要在組件引入

import { Http，Headers } from '@angular/http';

　　在類中定義屬性，並使用構造函數注入

  http: Http;
  headers: Headers;
  jsondata: any;
  constructor(_http: Http, _jsonp: Jsonp) {
    this.http = _http;this.headers = new Headers({ 'Content-Type': 'application/json' });
  }

　　get請求函數：

  httpRequestData() {
    let url;
    url = 'http://localhost:53876/api/weather/current/80005';
    this.http.get(url).subscribe(
      function (data) {
        this.jsondata = JSON.parse(data['_body']);
        console.log(this.jsondata['data']);
      },
      function (error) {
        console.log('error');
      });
  }

　　Post請求函數：

  httpPostRequestData() {
    let url;
    url = 'http://localhost:53876/api/weather/廣州';
    this.http.post(
      url,
      JSON.stringify({ city: '廣州' }),
      { headers: this.headers }).subscribe(
        function (data) {
          console.log(data);
        },
        function (error) {
          console.log('error');
        });
  }