第25個冬天

  首先電腦環境確認nodejs跟npm  以及angular cli都裝好了 沒有就下如下指令補安裝 npm install -g @angular/cli 接著創建angular新專案這裡命名angularadmin 建立好就移動至下一層專案所在目錄 ng new angularadmin cd angularadmin 接著ng add  material函式庫進來 直接用material所附帶的component  (navigation,dashboard) 進行建立 ng add @angular/material ng generate @angular/material:navigation navigation ng generate @angular/material:dashboard dashboard 預設當你在引入 material時候會問你要採用捨麼風格 風格列表機本上如下 當我們已經把該裝的跟建立的準備好後 可以先ng serve啟動來看下目前效果 先到angularadmin/src/app/app.component.html 把預設提供的畫面範本用如下內容複製粘貼給覆蓋掉 <app-navigation></app-navigation> Material預設自動幫我們準備好的NavigationComponent navigation.component.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import { Component } from '@angular/core' ; import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout' ; import { Observable } from 'rxjs' ; import { map, shareReplay } from 'rxjs/operators' ; @ Component({ selector: 'app-navigation' , templateUrl: ...

 Angular當中提供的Data Binding 主要分為 內嵌繫結 Interpolation {{statement}} statement : 通常是來自component的屬性 使用 兩個大括號的語法 就稱為內嵌繫結，屬於單向的繫結，只有將元件中 component 的資料傳送到網頁元素 template 上顯示。 屬性繫結 Property Binding [src]="statement" [attr.data-xxx]="statement" (for data-attribute )   屬性 使用中括號包住 ，並等於一個陳述式，使用引號包住，EX. [屬性]='陳述內容'。 雖然 property 與 attribute 的中文都翻譯成「屬性」 但就 HTML5 中，attribute 是可自定義的，例如： data-setAttributeName，可是 無法作為屬性繫結，在html中屬性是以 atrribute 稱呼，是指標籤的屬性。 例如: <img title ="pic title" src ="https://url.joor.net/ckY" alt ="pic" /> src 、 title 、 alt 為標籤屬性，另外還有很常見的 href、class… 在此是針對JavaScript DOM下的 property 事件繫結 Event Binding HTML中所有的event都能轉為Angular的event 雙向繫結 Two-way Binding 語法 內嵌繫結 Interpolation 屬性繫結 Property Binding 事件繫結 Event Binding

  元件、組件(component):每一頁都屬於component(至少一個) 所以若一個網站有200頁就至少會有200個component 每一頁可能又會拆幾個子component( Header component , Menu component) 有點類似封裝成一個自訂客製的tag 一個component會有三個組成元素分別是 class (也就是.ts檔) template(也就是.html檔) metadata(中繼資料)->decorator 通常放在.ts檔class上面有點類似data annotation用來描述該class(或property,method)的一些特性 也時常放在一個property或者一個method上面去裝飾 以@NgModule這個decorator來講 當中的metadata又包含 declarations 代表在此模組中要控制的組件有哪些這邊用陣列方式來做設置。 providers 代表一些service的引用添加 imports 代表Module的引入(比方像最開始需要依賴的就是BrowserModule,AppRoutingModule) 模組,模块(module):用來管理component的一個封裝的單位，通常沒有code只會有個宣告 (有點類似dll或namespace封裝很多class進去) 一般都會先建立module再去註冊各個component，module用來封裝angulat的組件。 至少會有一個最根本的Base Module就是 AppModule Type of the NgModule metadata. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73...

  首先最上層三種目錄 e2e - 端到端的測試項目， 用於自動化測試 node_modules - 存放第三方的依賴套件 src - 主要大部分開發用的程式碼(css,typescript...) 在主要開發用的 ./src/ 目錄下 ./app/ - 整個網頁應用程式的 Module、Component、Service ....都放置於此。 ( 不含E2E 測試的程式碼) ./assets/ - 靜態資源放置處，如圖片、資料檔... ./environments/ - 存放angular 環境配置文件(環境變數設定檔) 建立專案時就會自動建立兩檔案，environment.ts 與 environment.prod.ts。 全系統的環境變數都會需要透過這兩檔案來設定。 browserslist - 檔案內其實有說明，大意就是 Angular 的編譯器會根據此檔案的設定來加上 CSS 的前綴，若有 IE 11支援相容需求，需要取消最後一行的註解。 test.ts - 跟 main.ts 檔類似，主要是用在測試檔上。 karma.conf.js - karma 單元測試配置文件 angular.json - CLI的配置文件 package.json - 就是跟我們NodeJs應用一樣的NPM相依套件配置文件

 ng version Outputs Angular CLI version. ng version [options] ng v [options] ng new Creates a new workspace and an initial Angular application. ng new <name> [options] ng n <name> [options] ng serve Builds and serves your app, rebuilding on file changes. ng serve <project> [options] ng s <project> [options] ng build Compiles an Angular app into an output directory named dist/ at the given output path. Must be executed from within a workspace directory. ng build <project> [options] ng b <project> [options] Angular CLI 起手式 ng new proj_name --skip-install cd proj_name npm install ng serve ng new myapp --skip-install (注意若沒按照順序先把該有的相依套件透過npm install下來會跑出紅色一串錯誤) 而由於我們一開始選擇的是後面多加--skip-install的動作因此之後才有多出這一步驟 等執行完ng serve之後出現上面這種畫面資訊， 打開瀏覽器於網址輸入 localhost:4200  就可以看到我們自己新建的Angular App Ref: https://angular.io/cli Could not find module “@angular-devkit/build-angular” https://stackoverflow.com/questions/50333003/could-not-find-module-angular-devkit-bui...

  Visual Studio Angular 2 Snippet Pack https://marketplace.visualstudio.com/items?itemName=MadsKristensen.Angular2SnippetPack Visual Studio Code Angular Snippets (Version 11) https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2 其他還有像是 Angular Language Service https://marketplace.visualstudio.com/items?itemName=Angular.ng-template Path Intellisense https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

  Angular本身是由Google提出的一套base on MVC架構的 (可跟常見的後端程式語言PHP、.NET、NodeJS搭配開發) Web Application的開源JS Framework 主要特色在於可以對HTML透過指令方式做彈性延伸達成動態內容建構。 除了網頁應用也可以建構手機應用(跟Ionic 、RN搭配) 主要會在介紹到 Angular的歷史與版本演進 Angular1跟Angular2比較 Angular 開發工具介紹 Angular CLI Angular的使用場景 Angular的語法特點 Angular的歷史與版本演進 主要是在2009年由Misko Hevery 跟Adam Abrons兩個開發者設計出來的 Misko Hevery於2009年開始在Google工作 並且 於2012年由Google名義推出 Angular version 1.0 也就是AngularJS  A JavaScript MVW Framework   Extends HTML by adding attributes, tags, and expressions  Events Handling  Powerful Data Binding  Built-In Template Engine and Routing  Form Validations and Animations  Dependencies Injection etc. 於2016年9月則又釋出了Angular version 2.0  Modern, faster and highly scalable framework  One framework for web, mobile and desktop apps  Not an update to Angular1.x, but a complete rewrite  Written in Typescript  Simple and Expressive  Web components based architecture  Hierarchical Dependenc...