Angular超級入門（三）【變量修改、簡單發佈上線】

上一節《Angular.js超級入門（二）【環境安裝、HelloWorld程序】》中講到以下的代碼：

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

其中的{{ title }}爲什麼在頁面顯示的時候變成了app呢？

很顯然，這個title是一個變量，從別的代碼那取來的。咱們看看其它文件，對於angular和大多數編程框架來講，相同功能的代碼老是放在一個目錄下的，因而咱們會看到相同app文件夾下的app.component.ts文件裏記載着title變量的值：

咱們試着將title的值更改：

title = 'MyFirstAngularApp1';

而後嘗試刷新頁面看看：

因而這個title變量，就能夠按照程序的常規處理方式，在typescript中進行處理、轉換了。（注意，用VSCode進行編輯，按快捷鍵ctrl+s默認只存儲當前編輯的文件，而不是工程裏全部未保存的文件都進行保存。若是遇到明明改了變量卻沒有反映的狀況，試着檢查下是否全部未保存的文件都保存了。）

 

【最後，簡單發佈】

這麼多typescript、html、js、css文件，我總不能所有拷貝到web服務器上才能用吧？我能不依賴node.js的server來運行個人angular程序嗎？

答案是固然能夠。但首先，咱們得把程序進行編譯。所謂編譯，就是將衆多人開發的前端組件進行整合、優化，將typescript轉化爲前端瀏覽器可識別的javascript代碼。編譯過程以下：

打開CMD，進入到咱們的工程文件夾（編譯前記得關閉已經用npm run start命令開啓的服務器），輸入以下命令：

ng build --prod

編譯的過程以下，編譯完後會多一個dist文件夾：

dist即爲真正的生產文件，能夠部署到web服務器。部署前還有一個問題，咱們打開index.html頁面，看到以下代碼：

文件中的

<base href="/">

意味着全部的未指定詳細路徑的文件請求，都從根域名開始查找。若是這個index.html要部署在子目錄下的話，例如localhost/subfolder/index.html，它的js文件依然會到localhost/xxx.js下去找，如果全部生產文件都複製在同一目錄下（也就是xxx.js在localhost/subfolder/xxx.js下），那麼打開index頁面就會報錯找不到xxx.js：

的腳本因 Mime 類型不匹配而被阻止

Refused to apply style from 'http://localhost:63342/styles.ac89bfdd6de82636b768.bundle.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
index.html:15 GET http://localhost:63342/main.e9283078d8b0e76688b8.bundle.js net::ERR_ABORTED 404 (Not Found)

解決辦法以下：

1. 註釋（或刪掉）<base href="/">
2. 將xxx.js拷貝（或部署）到localhost/xxx.js下

開啓該頁面的方式有幾種：

1. 直接雙擊該html文件，經過瀏覽器打開，此時瀏覽器的地址爲「file:///D:/angular/my-app2/dist/index.html」
2. 使用webstorm等IDE自帶的服務器進行打開
3. 加載的其它web服務器（例如tomcat、apache、nginx等）進行打開