Angular - 筆記長也NotesHazuya

Angular 資料繫結 (5) - 元件互動與雙向繫結

元件互動 父元件與子元件 在 Angular 當中,預設的父元件就是 app-root,也就是 app.component,因此所有的元件都會是 app.component 的子元件。 @Input @Input() 裝飾器可以接收來自父元件的值。 @Output() @Output() 裝飾器可以將子元件的值傳遞給父元件。 直接看範例,這邊有一個 sizer.comp......

Angular 資料繫結 (4) - 樣式與類別繫結

樣式繫結(Style Binding) 樣式繫結是與 html 當中的 css style 屬性進行繫結,語法是 [style.樣式名稱]="value",直接看範例: app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.c......

Angular 資料繫結 (3) - 事件繫結

事件繫結(Event Binding) 事件繫結基本上會監聽使用者的動作,透過事件的觸發來執行某個事情。 語法使用 app.component.html <button (click)="do()" type="button" [disabled]="state===true">我是按鈕,你按得到嗎?</button> app.component.ts

Angular 資料繫結 (2) - 屬性繫結

如果你還沒看過上一篇內嵌繫結的話,可以回去看看。 屬性繫結 (Property Binding / Attribute Binding)  Angular 上可以將資料繫結到頁面元素的屬性上,而在網頁設計當中有兩種屬性:一種是 Property ,一種是 Attribute。 Property Property 是 DOM 操作下的屬性,是瀏覽器在載入網頁時建立的 DOM 節點當中的屬性,可以從瀏覽器......

Angular 資料繫結 (1) - 內嵌繫結

資料繫結 在 Angular 當中,繫結的種類分為兩類,一種是單向另一種則是雙向繫結。 單向繫結 單向繫結包含了內嵌繫結 (Interpolation)、事件繫結 (Event Binding)、屬性繫結 (Property Binding / Attribute Binding)、樣式繫結

Angular Component 元件

Component 基本上元件會負責頁面樣式的呈現,資料的撈取與處理都會交由 Service 進行,後續會有文章介紹 Service服務。 建立Component ng generate component [名稱/路徑] [參數] ng g c [名稱/路徑] [參數] 頁面與樣式 預設建立元件時,CLI 會將 HTML、CSS 以及 ts 檔案拆......

Angular NgModule 模組

本篇算是開始寫程式了,不過會先解析 Angular 的程式碼結構。在 Angular 當中會由不同的模組所組成,模組之間切分的依據可能是功能、流程等。 NgModule 專案建立完成都會有一個根模組叫做 AppModule ,透過 @NgModule 定義。 import { BrowserModule } from '@angular/platform-browser'; import { NgModul......

Angular CLI 基本介紹

上一篇我們已經安裝好了 Angular CLI 以及建立了 Angular 專案,雖然本來要開始寫程式了,但是在開始寫程式之前我想要先介紹一些關於 Angular CLI 以及程式架構的部分。 開始之前 在開始之前,你可以輸入以下指令確認 Angular CLI 已經安裝完成了 ng --version 出現下面的畫面基本上就是已經安......

Angular 專案資料夾結構介紹

上一篇我們已經建立了一個專案,本篇介紹一下專案的資料夾基本結構。 Angular 專案目錄 .editorconfig :讓專案在不同......

Angular 簡介與開發環境建置

自從 Laravel 結束後我就開始偷懶了@@,所以時隔半年終於要開始進行下一系列的文章了。 本次學習的是前端框架 Angular,基本上也是不定時更新~ MPA V.S. SPA 在開始介紹 Angular 之前,我們要先介紹以下兩個常見的網頁應用程式形式。 MPA (Multi-Page Application) 多頁面應用程式,是指一個應用程式利用多個 html......