筆記長也NotesHazuya

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

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

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

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

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

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

Laravel 分頁(Pagination)功能應用

分頁 Pagination 在設計頁面的時候,像是文章列表這種呈現數量很多的時候就必須進行分頁。過往在實作分頁的時候其實很複雜,但是在 Laravel 當中已經有幫忙寫好的  Pagination 可以直接拿來用。 基本設定 在 Controller 或其他地方進行資料庫查詢的時候,要針對查詢結果加上&nbsp......

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

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

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

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

在 Laravel 上使用 FireBase(Realtime Database)

FireBase FireBase 是一個提供跨平台的雲端開發平台,可以讓開發者快速建立雲端的後端開發環境,包含本文將要介紹的即時資料庫(Realtime Database),是 FireBase 一個很熱門且核心的服務。 Realtime Database 即時資料庫是一種 noSql 的結構,儲存結構類似於陣列或是 json 格式,如下圖

Angular Component 元件

Component 基本上元件會負責頁面樣式的呈現,資料的撈取與處理都會交由 Service 進行,後續會有文章介紹 Service服務。 建立Component ng generate component [名稱/路徑] [參數] ng g c [名稱/路徑] [參數] 頁面與樣式

Angular NgModule 模組

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

Angular CLI 基本介紹

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