顯示具有 angular 4 標籤的文章。 顯示所有文章
顯示具有 angular 4 標籤的文章。 顯示所有文章

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日 星期三

用 Angular CLI 節省開發時間(目前支援Angular 4有問題，建議先不安裝)

Angular CLI是隨著Angular2發展時一併產生的一個指令列工具，一樣基於「習慣取代配置」的優良傳統，我們可以用Angular CLI快速產生開發Angular2程式時所需要的檔案範本，另外也包含了軟體開發生命週期會用到的bundle, lint, unit test, end to end test等功能，也全都包在Angular CLI裡面了，因此透過Angular CLI工具，我們可以大幅節省許多準備檔案的時間！由於之後的Angular2速成班教學中我們也會大量使用Angular CLI來產生相關需要的檔案，因此今天就先來簡單介紹一下Angular CLI這個強大的產生器功能。

安裝Angular CLI並產生Angular2專案

npm install -g angular-cli

接下來就可以使用 ng 這個指令來執行這種開發Angular2專案需要的動作啦。

首先我們先用 ng --help 來看看所有可用的指令：

可以看到洋洋灑灑一大堆的指令說明，也可以用 ng --help [command]看比較"精簡"一點的說明。例如我想知道generate這個指令的用法，就輸入 ng --help generate，就可以單純看某個指令的用法囉。

接下來我們就稍微說明一些常用的Angular CLI指令吧！

ng new

安裝好Angular CLI以後當然是立刻使用 ng new [專案名稱] 來產生一個Angular2專案啦。

這個指令會依我們輸入的專案名稱產生一個專案目錄，同時幫我們把所有預設需要的相關套件都紀錄在package.json，然後將所有需要的套件都下載下來；除此之外也會幫我們產生一個Angular2專案最基本需要的程式碼、還有簡單的測試案例、測試環境設定、編輯器環境設定(如果編輯器支援的話)、預設的與法規範設定檔(tslint.json)等等；想想看這些步驟如果要自己一個一個處理要花多少時間，還要擔心人腦智慧出錯的可能性，但透過ng new，只需要下指令並稍等一下就可以啦！

關於ng new產生的專案目錄，在下一篇文章我們會做一個比較詳細的介紹。

ng generate(ng g)

ng generate可以說是整個Angular CLI裡面最常用到的指令，它的功能就是用來產生Angular2的元件(component)、服務(service)等等的程式雛形，由於generate指令非常常用，但generate字母又不少，因此我們也可很簡單的使用 ng g來執行產生動作，目前ng g可產生以下類型的程式



例如需要產生一個Angular2的元件，可以使用 ng g component，來產生一個component所需要的檔案，另外我們也可以在把剛剛的指令簡化成ng g c。只需要短短幾個字，就可以產生許多的程式碼囉！

根據官方的Angular CLI原始碼，我們也可以看到不同程式碼雛形的指令簡化

不過很可惜，由於Angular2的route在RC階段一直有改變，雖然正式版已經release了，但目前Angular CLI還不支援route的產生，因此使用ng g r來產生route的話，會出現以下錯誤訊息，期待某天可以正常產生囉！



使用ng generate產生的物件會依照預設值放在特定目錄下，若需要指定目錄也可以透過相對路徑的表示方式來改變目錄，例如ng g c todo-items預設檔案會產生在/src/app/todo-list下面，我們可以改用ng g c todo-list\todo-items來將檔案改為產生在/src/app/todo-item/todo-list下面。不過需要稍微注意兩點

1. 若要建立在額外目錄下，該目錄必須存在才可建立，若目錄不存在請先把目錄建立起來

2. 產生component時會在/src/app/app.module.ts檔內進行注入動作，但目前會發生import時路徑的斜線反了的問題導致錯誤，因此必須手動修改app.module.ts的內容，麻煩的是每次ng g c產生component時同樣的問題又會繼續發生，希望之後的版本會修正囉。(寫這篇文章時Angular CLI版本為1.0.0-beta.15)

ng destroy(ng d)

ng destroy是用來移除ng generate所產生的檔案的，不過只是進行把檔案刪除的動作而已，對於用到產生的物件，還是必須手動在程式碼中清除。

例如我們使用ng g c todo-item建立一個todi-item的component，但後悔了，就可以使用 ng d component todo-item (目前不支援 ng d c這種寫法)來移除檔案。

ng build

當Angular2的程式開發完成，需要部屬到別台機器上時，我們可以使用ng build來打包所有的程式碼，這個步驟會將所有TypeScript的檔案轉譯成JavaScript，同時也會使用Tree Shaking的技術只留下開發時有使用到的相依物件，並將所有程式分類打包，最後產出到專案下的dist目錄，我們就可以將這個目錄部屬到測試或正式環境上執行。另外若是要上線的系統了，還可以使用ng build --prod再將產出的JavaScript做最小化壓縮的動作，以節省下載程式碼的等待時間。如果我們希望在程式有修改時就自動進行build的動作，也可以使用ng build -w來偵測變更並自動執行build。

Angular CLI使用webpack作為打包程式的工具，有趣的是使用ng new建立的專案找不到webpack.js之類的檔案，這也算是習慣取代配置的好處之一，對於打包程式這件事情我們不用花太多心思，Angular CLI都已經內建好了，只要我們程式撰寫配合通用的習慣，剩下的直接使用別人寫好的範本來跑就好啦！如果想看看Angular CLI預設的webpack程式，可以參考專案目錄下node_modules\angular-cli\tasks下面的檔案。除此之外Angular2官方的webpack介紹也說得非常仔細，建議有時間可以去看看。

ng serve

在程式開發階段，我們經常需要打開瀏覽器來觀看程式執行的結果，使用ng serve可以自動幫你把程式打包，並開啟一個live reload的http server，如此一來當我們程式有修改時，就會自動幫你重新build一次，同時如果有用瀏覽器打開目前的程式時，也會通知自動重整，就不用一直按F5重新整理啦！

ng lint

使用Angular CLI建立的專案會預設加入一個tslint.json檔案，用來設定TypeScript撰寫風格的相關限制，我們可以自行在tslint.json裡面修改來調整符合團隊開發的規範，若要檢查專案中的程式碼是否符合規範，可以使用 ng lint 來檢查，看看那些檔案中有不符合規則的程式存在。



ng test & ng e2e

ng test和ng e2e兩個指令都是用來執行測試程式的，不同的是ng test是屬於unit test的部分，會執行src/app下面所有的測試程式碼，使用的測試套件為karma與jasmine。

而ng e2e則是用來執行end to end測試，會執行/e2e下面的測試程式，使用的測試套件為karma與protractor。

如果已經有寫過JavaScript的人對於這些測試程式應該不會太陌生，未來有機會寫到Angular2的測試時，在多介紹一些。

單元回顧

本篇文章介紹了Angular CLI的一些常用指令，日後在使用Angular CLI時應該能更加清楚指令的用途與原理，透過Angular CLI可以幫助我們在開發的時候節省很多配置時間。

官方的文件還有一些小技巧，有興趣的朋友可以去參考看看囉。







於 沒有留言:
標籤： ,

Windows 10 上佈署 Angular4 開發環境

安裝 nvm-windows

執行安裝 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

|   CURRENT    |     LTS      |  OLD STABLE  | OLD UNSTABLE |
|--------------|--------------|--------------|--------------|
|    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









於 沒有留言:
標籤： , , ,
訂閱： 文章 (Atom)

cas server 一直圈圈或取得狀態異常

重點： cas server 不能開 VPN，會造成取的來源 dns 異常，會一直轉圈圈或等很久。

  • LDAP GUI 管理介面
    LDAP Server 架好了，但要用指令新增、刪除、修改，快瘋了！>_< 後來發現居然有 GUI 介面的管理程式，以下簡列，未來會補上操作介面！ 一、JXplorer – A Java Ldap Browser 　　 http://sourceforge.ne...
  • php fopen() 開啟、建立檔案
    開啟（建立）檔案 fopen () ：打開文件檔案或是 url 網址，如果打開失敗，函數返回 false 語法： fopen  (  filename  ,   mode  ,  include_path  ,   context   ) 參數說明： file...
  • SSMS 新增一個帳號，無法關閉強制帳號原則？
    我在 SQL Server 2016 新增一個使用者，但我不想登入時變更密碼，並且關閉下面2個強制原則： □ 強制執行密碼原則 □ 強制執行密碼逾期 關閉時會出現下面錯誤訊息： 當MUST_CHANGE為ON時，CHECK_POLICY和CHECK_EXPIRA...