angular2開發01

1. angular2 開發準備

1 angular2 開發準備

開發環境是linux mint 17.3 64位css

1.1 安裝node

node在linux的部署主要有三種方式，第一種方式，使用apt-get install nodejs安裝，這種方式有缺點，安裝後的版本過低(0.10)，官網都已經到4.5了; 第二種就是本身下載源碼，手動編譯二進制，這種方式要求有點高，屬於高級用戶方式;第三種方法直接下載二進制文件解壓，只需進行簡單配置便可;我採起第三種方式安裝。html

在 node官網下載最新版，v6.6.0 Currnet，下載後將安裝包移動到要安裝到的文件夾下，我放在了/home/flysic/soft/ 下面,依次執行以下命令：

cd ~
cd soft
tar -vxf node-v6.6.0-linux-x64.tar.xz

進入解壓後的目錄bin目錄下，執行ls會看到兩個文件node,npm. 而後執行./node -v ，若是顯示出版本號v6.6.0，說明咱們下載的程序包是沒有問題。

cd cd node-v6.6.0-linux-x64/bin/
./node -v
v6.6.0

注意node安裝包裏帶了一個npm程序，這個程序的版本是2.x，雖然能夠用，可是要開發angular2版本就嫌低了，所以須要單獨安裝最新版的npm
目前node只能在 /home/flysic/soft/node-v6.6.0-linux-x64/bin這個目錄下訪問，所以須要將這個目錄添加到PATH路徑，或使用軟連接;通常在 windowws下使用PATH路徑方式，linux使用軟連接方式

sudo ln -s /home/flysic/soft/node-v6.6.0-linux-x64/bin/node /usr/local/bin/node

1.2 安裝npm

查看 npm官網上沒有看到下載，卻是在 npm的github 上看到安裝方式，java

Fancy Install (Unix)
There's a pretty robust install script at https://www.npmjs.com/install.sh. You can download that and run it.
Here's an example using curl:
curl -L https://www.npmjs.com/install.sh | sh

使用上面的方式安裝，出現一下信息，說明按照成功，這時在 soft/node-v6.6.0-linux-x64/下的bin目錄，應能看到新的npm程序，查看版本 (npm -v)，應是3.10.8。node

  ├── unpipe@1.0.0
  ├─┬ validate-npm-package-license@3.0.1
  │ ├─┬ spdx-correct@1.0.2
  │ │ └── spdx-license-ids@1.2.0
  │ └─┬ spdx-expression-parse@1.0.2
  │   ├── spdx-exceptions@1.0.4
  │   └── spdx-license-ids@1.2.0
  ├─┬ validate-npm-package-name@2.2.2
  │ └── builtins@0.0.7
  ├─┬ which@1.2.11
  │ └── isexe@1.1.2
  ├── wrappy@1.0.2
  └── write-file-atomic@1.2.0
It worked

目前npm只能在 /home/flysic/soft/node-v6.6.0-linux-x64/bin這個目錄下訪問，所以須要將這個目錄添加到PATH路徑，或使用軟連接;通常在windowws下使用PATH路徑方式，linux使用軟連接方式linux

sudo ln -s /home/flysic/soft/node-v6.6.0-linux-x64/bin/npm /usr/local/bin/npm

1.3 運行qickStart

克隆angular2.0的qickStart程序

git clone https://github.com/angular/quickstart angular2_l
cd angular2_l

安裝依賴庫，程序依賴庫配置在package.json文件，執行npm install，等待安裝完成，當顯示出現信息時，說明執行成功

> angular-quickstart@1.0.0 postinstall /home/flysic/workapace/angular2_l
> typings install

typings WARN deprecated 2016-09-25: "registry:dt/node#6.0.0+20160831021119" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-09-14: "registry:dt/core-js#0.0.0+20160725163759" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-09-15: "registry:dt/angular-protractor#1.5.0+20160425143459" is deprecated (updated, replaced or removed)
typings WARN deprecated 2016-09-15: "registry:dt/selenium-webdriver#2.44.0+20160317120654" is deprecated (updated, replaced or removed)

├── angular-protractor (global)
├── core-js (global)
├── jasmine (global)
├── node (global)
└── selenium-webdriver (global)

運行程序，執行npm start，會出現如下信息，同時打開瀏覽器，顯示""My First Angular App"

> angular-quickstart@1.0.0 start /home/flysic/workapace/angular2_l
> tsc && concurrently "tsc -w" "lite-server"

[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  --------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.1.115:3000
[1]  --------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.1.115:3001
[1]  --------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/app.component.spec.js
[1] [BS] File changed: app/app.module.js
[1] [BS] File changed: app/main.js
[1] [BS] File changed: e2e/app.e2e-spec.js
[0] 09:09:21 - Compilation complete. Watching for file changes.