興奮的第一份網誌

 轉眼一年的時間過去了，這一年時間都在學Node.js，因為Angular 也是在node.js架構下開發的。Angular 10已經發佈了。這一年學會了使用node.js+express+Angular +Mongo DB來開發網站，並且佈署到Heroku上，用起來很順。一邊工作一邊學習有點累，時間很趕；現有學會了心裡得高興。 目前正在學GCP，將node.jsnode.js佈署到GCP的firebase上去用，因為牽涉到firestore及PWA 正在加緊努力中。

Components是Angular 7設計成網頁的主要成分，再利用 module 將 components 整合在一起，一個 module 中除了有 component 之外主要還會有 app.module.ts 和 app.routing.module.ts ，在此要針對最基本的組成做簡要說明，當然還有更多，在此暫時省略。 一、解析 Component 1. 已知 Component 在 Angular 專案中佔有重要的地位，所以要深入來了解一下： 2. 在專案的 src 目錄下找到 index.html 網頁，用編輯器打開 3. 在index.html中(如上圖)可以發現一個 html 指令 < app-root></app-root> ，因為個人常寫 html 網頁所以知道這不是普通的 html 指令。應該是 Angular 專案中特殊指令。是的，這就是代表一個 Component 的 html 指令。 4. 接著到專案中的 src/app 目錄找到 app.component.ts 檔案，用編輯器打開。 5. 從上圖可看到 app.component.ts 檔案中只有幾行指令，現在想要來解讀之： (1) 從 @angular/core 匯入 Component (2)@Component({...}) 是 typescript 指令要定義 Component 的屬性，在此定義了 selector 、 templateUrl 、 styleUrls 三個屬性。 (3) selector 表示，顯示在 html 網頁中的指令 ( <app-root></ app-root> ) (4) templateUrl 表示， app-root 代表一段 html 指令，而這段指令寫在 templateUrl 所顯示的檔案，也就是 app.component.html 。 (5) styleUrls 表示 app.component.html 中會用到節 CSS 指令放在 app.component.css 檔案中 (6) 這稱為 factory 方法 (7) 最後看到一個叫 AppCoponent 的類別被匯出，而且有一...

一、    請依據下列步驟測試   Angular CLI   是否可以正常執行： 1.   開啟「命令提示字元」視窗 (Windows) §   建立 demo1 專案資料夾與 Angular 專案骨架，請執行下列指令： §   ng new demo1 --routing --style cs s §   這個過程會建立 Angular 專案檔案並自動安裝所有 npm 相依套件！ 2.   進入 demo1 目錄 §   cd demo1 3.   啟動 Angular 開發伺服器 §   npm start 或是 §    ng serve 二、    開啟 Google Chrome 瀏覽器，並連接到以下網址，畫面上只要出現   Welcome to demo1!   字樣，就代表專案已建立成功！ 👍 1.   http://localhost:4200/

前言： Angular 是在 NodeJs 上開發出來的，因此安裝 Angular 之前要先安裝 nodejs 。而且至少要在 Node 6.9.0 或更新的版本，而且要 NPM 3 或更新的版本。因 為我個人使用 windows 作業系統，所以以後的研習心得，也都會是在 windows 作業系統下完成。 想更深入研究可參考以下網址說明 https://gist.github.com/doggy8088/15e434b43992cf25a78700438743774a 一、安裝 nodejs 1. 到 https://nodejs.org/zh-tw/download/ 下載 nodejs 2. 如上圖可選用 LTS( 穩定版本 ) 或目前版本 3. 使用安裝包的 64-bit ，因為現在大部分的 windows 電腦都是 64 位元，如果電腦是 32 位元則選用 32-bit 4. 如果電腦中原來已經有安裝，有兩種狀況，電腦是 64 位元但安裝了 32 位元，要先把 32 位元的 nodejs 移除，再安裝 64 位元的 nodejs 。因為早期只有 32 位元的 nodejs 。如果本來就是 64 位元就直接下載新版的安裝就好了，因為安裝程式會自動更新版本。同時也會連帶安裝 npm 。 5. 查詢現有版本在 cmd 中下指令   node -v     與 nmp -v 二、安裝 Angular CLI 1. 安裝指令 npm install -g @angular/cli 2. 查看版本 ng --version 三、安裝特定版本 Angular 指定安裝 Angular 6 : npm install -g @angular/cli @6 The  -g  flag tells npm to do this install globally. The 6 on the end tells npm that I want the latest available version 6. You can verify your global version by usi...

一、 Component 組成 Angular ，就好像網頁組成網站的道理一樣。 二、一般而言一個 Componet 會由 4 個檔案或更多組成，而且放在同一個目錄之中。假設 Componet 名為 AppComponet 則其 4 個檔案為 1. app.component.spec.ts 2. app.component. ts 3. app.component.html 4. app.component.css 三、 Angular CLI( command line interface ) 用於 Angular 專案，是一種指令式的介面，在寫 Angular 時利用 Angular CLI 的指令來產生 Component ，例如： ng generate component Card   其中 ng generate component 是 CLI 指令， Card 是 Component 的名字，這時候 Angular CLI 會在專案的 App 目錄中幫我們產生 Card 元件 ( 連目錄帶檔案 ) 如下圖 四、產生的元件還要在 app.module.ts 中宣告才能用。例如 五、建立專案時只有一個元件是 App 就 放在 App 的根目錄中，但這個目錄有 6 個檔案，除了前面提過的 1. app.component.spec.ts 2. app.component. ts 3. app.component.html 4. app.component.css 5. app.module.ts 等 5 個檔案之外還有 6. app-routing.module.ts 其內容如下圖： 六、總結 Angular 2.0 版以後，發展到現在已經到 7.0 版了，其架構與 Angular 1.xx 版完全不同， Angular 2.0 版以後簡稱 Angular 舊版的叫 AngularJS 。 AngularJS 的用法是 把 angular.js 組件 import 到 html 檔案中就可以開始寫程式了。 Angular 的用法則 是要在 Angular CLI 架構下開發，所謂的 Angular 7 其實要搭配 Angular ...