Angular(一) - Typescript&Angular入門熟悉

• 1. Typescript
  • 1.1 安裝typescript
  • 1.2 typescript的小例子
    • 1.2.1 新建一個index.ts
    • 1.2.2 編譯ts成js
    • 1.2.3 查看生成的index.js
    • 1.2.4 運行javascript
  • 1.3 typescript的一些特性
• 2. Angular
  • 2.1 Angular Cli的安裝
  • 2.2 創建項目
  • 2.3 安裝依賴並啟動
  • 2.4 文件目錄樹

1. Typescript

1.1 安裝typescript

全局安裝typescript

npm install -g typescript

1.2 typescript的小例子

1.2.1 新建一個index.ts

function hello(user:string) {
    return `${user}: hello world`
}

let user = 'tom'
console.log(hello(user))

1.2.2 編譯ts成js

`tsc index.ts

1.2.3 查看生成的index.js

function hello(user) {
    return user + ": hello world";
}
var user = 'tom';
console.log(hello(user));

1.2.4 運行javascript

node index.js

1.3 typescript的一些特性

• 由於是javascript的超集，所以支持所有javascript的語法，包括ES6等
• 可以自定義類型
• typexcript如果報錯，通過tsc依然可以生成javascript文件

2. Angular

2.1 Angular Cli的安裝

npm install -g @angular/cli

2.2 創建項目

ng new angularapp

2.3 安裝依賴並啟動

npm install && npm start

2.4 文件目錄樹

|-- angularapp
    |-- .browserslistrc   // 配置各種前端工具之間共享的目標瀏覽器和 Node.js 版本
    |-- .editorconfig     // 代碼編輯器的配置
    |-- .gitignore        // 配置git忽略文件
    |-- angular.json      // 為工作區中的所有項目指定 CLI 的默認配置，包括 CLI 要用到的構建、啟動開發服務器和測試工具的配置項，比如 TSLint，Karma 和 Protractor
    |-- karma.conf.js     // 應用專屬的 Karma 配置
    |-- package-lock.json // 提供 npm 客戶端安裝到 node_modules 的所有軟件包的版本信息
    |-- package.json      // 配置工作空間中所有項目可用的 npm 包依賴
    |-- README.md         // 根應用的簡介文檔.
    |-- tsconfig.app.json // 應用專屬的 TypeScript 配置，包括 TypeScript 和 Angular 模板編譯器的選項
    |-- tsconfig.json     // 工作空間中各個項目的默認 TypeScript 配
    |-- tsconfig.spec.json// 應用測試的 TypeScript 配置
    |-- tslint.json       // 應用專屬的 TSLint 配置
    |-- e2e               // e2e測試相關的
    |   |-- protractor.conf.js
    |   |-- tsconfig.json
    |   |-- src
    |       |-- app.e2e-spec.ts
    |       |-- app.po.ts
    |-- src
        |-- favicon.ico
        |-- index.html
        |-- main.ts // 應用的主要切入點。用 JIT 編譯器編譯應用，然后引導應用的根模塊（AppModule）在瀏覽器中運行
        |-- polyfills.ts // 提供瀏覽器支持的polyfills腳本。
        |-- styles.css // 列出為項目提供樣式的 CSS 文件。該擴展還反映了你為該項目配置的樣式預處理器
        |-- test.ts
        |-- app     // 包含定義應用邏輯和數據的組件文件
        |   |-- app-routing.module.ts
        |   |-- app.component.css // 為根組件 AppComponent 定義了基本的CSS
        |   |-- app.component.html// 定義與根組件 AppComponent 關聯的 HTML 模板
        |   |-- app.component.spec.ts// 為根組件 AppComponent 定義了一個單元測試
        |   |-- app.component.ts // 為應用的根組件定義邏輯，名為 AppComponent
        |   |-- app.module.ts // 定義了名為 AppModule 的根模塊，它會告訴 Angular 如何組裝應用。這里最初只聲明一個 AppComponent。當你向應用中添加更多組件時，它們也必須在這里聲明
        |-- assets   // 包含要在構建應用時應該按原樣復制的圖像和其它靜態資源文件
        |   |-- .gitkeep
        |-- environments // 包含特定目標環境的構建配置選項。默認情況下，有一個無名的標准開發環境和一個生產（“prod”）環境
            |-- environment.prod.ts
            |-- environment.ts