Angular入門系列（二） 創建新工程與數據綁定初探

angular 創建新工程

（1）首先需要基本環境，nodejs和npm

   如果你學過java，那麼nodejs相當於jdk，npm相當於maven

（2）安裝angular腳手架

npm install -g @angular/cli

（3）切換到一個任意目錄，並在內創建angualr工程

ng new myapp

這一步肯定花費較長時間

這裏的myapp就是項目名稱，會在當前目錄下創建myapp文件

（4）進入項目，啓動應用，並且訪問http://127.0.0.1:4200

cd myapp
ng serve

這裏需要注意的是：angular自帶http服務器，默認端口爲4200，通過angular的http訪問我們開發的頁面，並不是直接打開html訪問

注：ajax是請求必須藉助於http服務，直接打開html是無法訪問ajax的，使用http服務器更能模擬真實情景

最終看到頁面

 

項目目錄結構

新建的項目目錄結構如下所示

這裏挑幾個重要的講一下

src/app：項目源代碼目錄

src/assets：項目資源路徑

src/main.ts：啓動入口

angular.json：angular相關配置

 

 

數據綁定初探

所謂的數據綁定，就是將js變量和頁面上的某一塊內容綁定，當js變量發生變更時，頁面上內容自動更新，無需手動使用jquery或者js更改頁面內容，這是和傳統開發方式不一樣。

下面用一個示例演示如何修改js變量，達到修改頁面的目的

這個就是我們看到的頁面組件，關於組件的概念後面會詳細說明，這一段html

首先編輯app.component.html如下

<div style="text-align:center">
  <h1>
    當前訪問數{{ count }}!
  </h1>
 </div>

然後編輯app.component.ts如下

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 定義count變量，默認值爲1
  count = 1;

  constructor(){
    // 每秒值加 1
    setInterval(()=>{ 
      this.count++;
    },1000);
  }
}

然後界面效果的

並且每秒數字+1

 

原理解析

 當前訪問數{{ count }}!

這裏{{}}爲angualar的一個語法，目的從從組件對應的內存變量中，取出一個名爲count的變量，並且放到當前的位置