零開始構建Angular項目

1、環境准備

1.1、安裝Visual Studio Code   

1.2、Nodejs 安裝（安裝注意選擇npm package manager）

    

1.3、Git BASH安裝

 

2、項目構建

 2.1、右鍵打開 git bash here

 2.2、全局安裝angular cli   (cli工具能幫助我們創建和管理項目)

 

$ npm i -g @angular/cli 

 

2.3、  當前目錄創建AngularDemo項目 

$ ng new AngularDemo

2.4、創建angular項目目錄介紹

VSCode 打開項目

  e2e：終到端(End-to-End)的測試目錄，包含基本的測試樁。

  node_modules：項目依賴項，Node.js創建了這個文件夾，並且把package.json中列出的所有第三方模塊都存放在該目錄中(是由Node.js開發環境自行創建的目錄) 

                               $  npm i  重新下載node_modules 項目依賴項目

 src：應用源代碼目錄，開發者寫的代碼都存儲在這個目錄下面，其中包含的目錄和文件有如下幾類

           app文件夾：包含5個文件

                               app.component.css    樣式文件，作用於app文件夾的html      
                               app.component.html   網頁文件
                               app.component.spec.ts （不知道干嘛用的？？？？）
                               app.component.ts    typescript文件(功能模塊)         
                               app.modules.ts       根模塊.配置文件,告訴angular如何組裝應用程序(引導運行應用)

          assets: 靜態資源文件夾

          environments:包含為各個目標環境准備的文件

          index.html ：整個應用程序的根html

          main.ts：整個web程序的入口點，也是腳本程序的入口點，有點像main方法

          style.css：全局樣式文件，作用范圍是整個項目

          polyfills.ts：用於導入一些必要的庫，可以使angular可以運行在老版本瀏覽器

           test.ts：用於單元測試的入口點

           tsconfig.app.json  tsconfig.spec.json : typescript編輯器的配置文件

          angula.json : angular命令行工具的配置文件，在這個文件中可以設置一系列的默認值，也可以配置項目編譯時要包含的文件；例如第三方包

           package.json : 第三方依賴包的聲明文件

    

    3、創建angular首頁

     3.1、創建app文件夾，把創建項目生成的4個文件拖進來

        

修改app.module.ts文件中的引用路徑

      

3.2 查看我的 hello World頁面

啟動項目服務 

$ ng serve --open 

 

首頁效果

 

 4、增加學生頁面

　　

 

student.component.ts

import { Component } from '@angular/core';
import { Student } from './student';

@Component({
  selector: 'student-root',
  templateUrl: './student.component.html',

})
export class StudentComponent {
    me:Student[]=[{
        name:'admin',
        age:15,
        className:'一年級'
        },
        {
        name:'testing',
        age:16,
        className:'二年級'
        },
        {
            name:'martin',
            age:28,
            className:'三年級'
            }
        ];
        

    public addStudentInfo(name:string,age:number,className:string){
        const me=age/3;
        this.me.push({
            name:name,
            age:age
            ,className:className
        });
    
    }
 
}

student.ts

export class Student{
    name:string;
    age:number;
    className:string;    
}

 student.component.html

<label *ngFor="let student of me">
    <p>學生姓名:{{student.name}} 年紀:{{student.age}}  班級:{{student.className}} </p>
</label>
學生姓名<input type="text" #studentName>
年紀<input type="text" #age>
班級<input type="text" #className>
<button (click)="addStudentInfo(studentName.value,age.value,className.value)">Add</button>

 首頁修改app.component.html 

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <student-root></student-root>
</div>

 

最后把student.component依賴注入Ngmodule中     

 

  效果

   

樣式太丑了，引用bootstrap樣式框架

5、安裝bootstrap框架

 npm i bootstrap -s

 

 

 

引用bootstrap樣式

 

瀏覽效果

6、最后來點干貨  源代碼下載