小叮噹～隨手記: TypeScript

顯示具有 TypeScript 標籤的文章。顯示所有文章

2017年5月25日星期四

node.js 用 npm 指令更新支援 Angular 4

先進去工作目錄，例如：c:\htdoc\sas
把 angular 4 檔案放進來，在 c:\htdoc\sas 下面執行指令：

c:\htdoc\sas>npm install

On Linux/Mac:
c:\htdoc\sas>
npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

On Windows:
c:\htdoc\sas>
npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

會出現 typescript 無法更新到 2.3.3 ，改用下列指令就可以。

Installing typescript

For the latest stable version:(最後穩定的版本)

c:\htdoc\sas>npm install -g tslint typescript

2017年5月24日星期三

Windows 10 上佈署 Angular4 開發環境

安裝 nvm-windows

https://github.com/coreybutler/nvm-windows/releases

下載：https://github.com/coreybutler/nvm-windows/releases/download/1.1.4/nvm-setup.zip

執行安裝 nvm-setup.exe

NVM for Windows是一個命令行工具。只需輸入nvm控制台即可獲得幫助。基本命令是：

nvm arch [32|64]：顯示節點是運行在32位還是64位模式。指定32或64來覆蓋默認體系結構。
nvm install <version> [arch]：該版本可以是node.js版本或最新版本的“最新版本”。（可選）指定是否安裝32位或64位版本（默認為系統arch）。設置[arch]為“全部”以安裝32和64位版本。
nvm list [available]：列出node.js安裝。輸入available末尾以顯示可供下載的版本列表。
nvm on：啟用node.js版本管理。
nvm off：禁用node.js版本管理（不卸載任何東西）。
nvm proxy [url]：設置用於下載的代理。留[url]空白，以查看當前的代理。設置[url]為“無”刪除代理。
nvm uninstall <version>：卸載特定版本。
nvm use <version> [arch]：切換到使用指定的版本。可選地指定32 / 64bit架構。nvm use <arch>將繼續使用所選版本，但根據提供的值切換到32/64位模式<arch>。
nvm root <path>：設置nvm應存儲node.js不同版本的目錄。如果<path>未設置，將顯示當前根。
nvm version：顯示目前運行的NVM版本的Windows。
nvm node_mirror <node_mirror_url>：設置節點鏡像。中國人可以使用https://npm.taobao.org/mirrors/node/
nvm npm_mirror <npm_mirror_url>：設置npm鏡。中國人可以使用https://npm.taobao.org/mirrors/npm/

C:\Users\wengw>nvm arch

System Default: 64-bit.

Currently Configured: -bit.

C:\Users\wengw>nvm list available

|--------------|--------------|--------------|--------------|

| 7.10.0 | 6.10.3 | 0.12.18 | 0.11.16 |

| 7.9.0 | 6.10.2 | 0.12.17 | 0.11.15 |

| 7.8.0 | 6.10.1 | 0.12.16 | 0.11.14 |

| 7.7.4 | 6.10.0 | 0.12.15 | 0.11.13 |

| 7.7.3 | 6.9.5 | 0.12.14 | 0.11.12 |

| 7.7.2 | 6.9.4 | 0.12.13 | 0.11.11 |

| 7.7.1 | 6.9.3 | 0.12.12 | 0.11.10 |

| 7.7.0 | 6.9.2 | 0.12.11 | 0.11.9 |

| 7.6.0 | 6.9.1 | 0.12.10 | 0.11.8 |

| 7.5.0 | 6.9.0 | 0.12.9 | 0.11.7 |

| 7.4.0 | 4.8.3 | 0.12.8 | 0.11.6 |

| 7.3.0 | 4.8.2 | 0.12.7 | 0.11.5 |

| 7.2.1 | 4.8.1 | 0.12.6 | 0.11.4 |

| 7.2.0 | 4.8.0 | 0.12.5 | 0.11.3 |

| 7.1.0 | 4.7.3 | 0.12.4 | 0.11.2 |

| 7.0.0 | 4.7.2 | 0.12.3 | 0.11.1 |

| 5.12.0 | 4.7.1 | 0.12.2 | 0.11.0 |

| 5.11.1 | 4.7.0 | 0.12.1 | 0.9.12 |

| 5.11.0 | 4.6.2 | 0.12.0 | 0.9.11 |

| 5.10.1 | 4.6.1 | 0.10.48 | 0.9.10 |

This is a partial list. For a complete list, visit https://nodejs.org/download/release

C:\Users\wengw>nvm root

Current Root: C:\Users\wengw\AppData\Roaming\nvm

C:\Users\wengw>nvm version

1.1.4

進入目錄

C:\Users\wengw\AppData\Roaming\nvm

在 install.cmd 上按右鍵，以系統管理員執行

C:\Users\wengw>nvm

出現 Running version 1.1.4. 表示 nvm 安裝成功

指令快速使用說明

nvm list：查看已安裝的版本

nvm list available：查看提供哪些 Node 版本

nvm install 版本號 (不能有含v)：安裝指定的 Node 版本

nvm use 版本號：指定使用 Node 版本

C:\Users\wengw>nvm install 6.10.3

Downloading node.js version 6.10.3 (64-bit)...

Complete

Creating C:\Users\wengw\AppData\Roaming\nvm\temp

Downloading npm version 3.10.10... Complete

Installing npm v3.10.10...

Installation complete. If you want to use this version, type

nvm use 6.10.3

C:\Users\wengw>nvm on

nvm enabled

Now using node v6.10.3 (64-bit)

===========================================================

確認 node.js 版本

C:\Users\wengw>node -v

v6.10.3

下載QuickStart種子

cd c:\htdocs\quickstart
npm install
npm start

建立一個命令檔
npmstart_sas.cmd

內容：
cd c:\htdocs\sas
npm start

2017年5月19日星期五

設定 visual studio code 的 angular 4 開發環境(TypeScript)

調整開發方向
語言：
TypeScript
angular 4
node.js (npm)
HTML5
CSS3

編輯器：
Visual Studio Code

安裝開發環境
１．下載並安裝 node.js
　　https://nodejs.org/en/
　　下載穩定正式版 v6.10.3 LTS

２．下載並安裝 Visual Studio Code
　　https://code.visualstudio.com/
　　版本更新很快，下載最新的版本即可
　　
３．下載並安裝 Angular 4.0
　　https://angular.io/
　　GET STARTED => QuickStart seed => download => Download the QuickStart seed
　　下載後的檔名為：quickstart-master.zip

解壓縮 quickstart-master.zip 到 c:\htdocs\quickstart

開啟 Node.js command prompt

>cd\ c:\htdocs\quickstart
>npm install
>npm start

開啟 Visual Studio Code 編輯器
開啟 c:\htdocs\quickstart\quickstart 資料夾

首頁資料在 \src\app\app.component.ts
設定資料在 \src\app\app.module.ts

src

app

app.component.ts

app.module.ts

main.ts

src\app\app.component.ts

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

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`
})
export class AppComponent { name = 'Angular'; }

src\app\app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

src\main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule }              from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

===========================================================
Visual Studio Code 編輯器，增加擴充模組 (Ctrl + P)

Angular v4 TypeScript Snippets
　　https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2

Angular 4 and TypeScript/HTML VS Code Snippets
　　https://marketplace.visualstudio.com/items?itemName=danwahlin.angular2-snippets
　　ext install angular2-snippets

Bracket Pair Colorizer (支架顏色)
　　https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
　　ext install bracket-pair-colorizer

IntelliSense for CSS class names (適用於使用項目的可用類名快速裝飾HTML。不幸的是，類名稱沒有作用於組件的文件夾。)
　　https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
　　ext install html-css-class-completion

Angular 2 TypeScript Emmet (如果你還沒有學到Emmet，那絕對是你的腰帶。此插件允許您直接在組件模板中使用語法。)
　　https://marketplace.visualstudio.com/items?itemName=jakethashi.vscode-angular2-emmet
　　ext install vscode-angular2-emmet

angular2-inline(模板中為CSS和HTML提供語法高亮。)
　　https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline
　　ext install angular2-inline

angular2-switcher
通過三個簡單的鍵綁定快速切換組件，模板和样式。
還支持通過在光標變量時按F12來定義模板變量。
　　https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher
　　ext install angular2-switcher

vscode-icons
最好的圖標包在那裡！特徵用於管道，指令，組件，模塊，路由和服務的角色特定圖標。美化文件瀏覽器！:)
　　https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
　　ext install vscode-icons

TSLint
如果你不要打印TypeScript，你應該開始，特別是在codelyzer。這個插件讓你看起來很簡單，看看你的TypeScript代碼中的問題。甚至提供自動修復！
　　https://marketplace.visualstudio.com/items?itemName=eg2.tslint
　　ext install tslint

Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing
這是我見過的最全面的片段包。它具有67個不同的片段。
　　https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode
　　ext install Angular-BeastCode

TypeScript Hero
此插件管理導入語句，並可以自動導入缺少的依賴項。可以組織和排序導入。
　　https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
　　ext install typescript-hero

Path Intellisense
如果有一個插件，你添加確保它是這個。此插件啟用自動完成文件路徑，這在處理導入語句時提供了巨大的提升。
　　https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
　　ext install path-intellisense

2017年5月25日 星期四

node.js 用 npm 指令 更新支援 Angular 4

2017年5月24日 星期三