發表文章

目前顯示的是 2017的文章

Angular5.0 的事件訂閱

Angular 範例程式中,最有名(?)的除了官網的 Hero 之外,還有 TodoMVC , 進入到 Angular5.0 之後,當然也不能免俗的要再改寫一次。 在 Angular5.0,最重要的改變就是引進了 RxJS 的 Observable 用法; 也就是 Observable(被觀察者) / Observer(觀察者)。 觀察者樣式最常見的實作範例就是 “事件” , 在程式中可以訂閱按鈕的 click 事件 – Observer(觀察者) 按鈕被按下之後,clickEvent 會被拋出 – 按鈕是 Observable(被觀察者) 在 Angular4.0裡,是使用 Promoise 來實作非同步的資料提供者 - TodoService, 以下是4.0寫法:(範例僅保留關鍵,非完整程式) src/app/todo/todo.service.ts import { Injectable } from '@angular/core'; @Injectable() export class TodoService { private todos: ToDo[] = []; constructor() { } get() { return new Promise(resolve => resolve(todos)); } } src/app/todo/todo.component.ts import { Component, OnInit } from '@angular/core'; import { TodoService } from './todo.service'; export class TodoComponent implements OnInit { private todos; constructor(private todoService: TodoService) { } getTodos(){ return this.todoService.get().then(todos => { this.todos = todos; })...

TypeScript 解析 xml 的寫法與比較

工作上需要解析 XML 格式的資料, 找到兩個函式庫 - libxmljs 、 xml2js ,在此紀錄使用方式與比較,供往後參考:

Node.js 相關檔案路徑寫法

HTML 中指定檔案位置的方式: 寫法可以分為兩種: 1. 絕對路徑: 指的是檔案本身絕對的位置,只跟檔案本身所在位置有關。 2. 相對路徑: 相對於現在所在目錄的路徑表示法 路徑寫法 範例 說明 絕對路徑 https://tw.yahoo.com/logo.png 位於遠端 Web Server 上 file:///D:/Files/logo.png 位於本機指定路徑 /logo.png 位於此網站 www 根目錄下 相對路徑 logo.png 位於此檔案同目錄下 ./logo.png 位於此檔案同目錄下 ../img/logo.png 位於此檔案上層目錄的img目錄下 「.」代表現在目錄,而「..」代表上一層目錄 建議採取 指定 www 根目錄下 的寫法, 例如:<link rel='stylesheet' href='/stylesheets/style.css' /> 當 www Server 搬移 www 與 HTML 檔案路徑時時,就不需要調整寫法 Node.js 程式內路徑寫法: (參考資料來自這篇 文章 ) 整理如下: 路徑寫法 說明 _dirname 檔案所在目錄的絕對路徑 _filename 檔案所在絕對路徑 process.cwd() Node 執行指令時所在的目錄絕對位置 另外,require 中路徑寫法是 目前檔案 的相對路徑,要注意!!

.NET 跨平台新發展

圖片
最近微軟對跨平台、跨裝置的動作頗大, 發表了一系列的平台架構,以下作為一些名詞整理: 1. . NET Core :    .NET Framework 新一代版本,因此 .NET Core 會包含 .NET Framework 的類別庫。    是微軟開發的第一個跨平台 (Windows、Mac OSX、Linux) 的應用程式開發框架,也是微軟     在一開始發展時就開放原始碼的軟體平台。    目前支援的程式類型有:    1. 中控台應用程式 (console application)    2. 類別庫 (library)    3. ASP.NET Core Web 應用程式 (web application) [感想]    因為桌面程式有平台相關的技術,所以目前不支援GUI應用程式開發 (WPF哭)    希望以後可以支援啊! 2. UWP  (Universal Windows Platform) :    UWP 是適用於 Windows 10 以後版本的 app 平台 (在Window 10 版本開始才提供此共通架構)。    只需使用一個 API 集、一個 App 套件及一個市集,就可以在所有 Windows 10 裝置 – 電腦、   平板電腦、手機、Xbox 等等上運行。    以往使用.NET程式寫的應用程式,直接呼叫作業系統的API,所以無法跨平台。    現在透過 UWP,轉換呼叫的API,所以可以跨 Windows 裝置,並支援自適應介面(adaptive interface)。    未來透過 UWP Bridge技術,更可以轉換 iOS、Android、Web 等裝置。 下圖是架構示意圖: [總結] UWP 是跨 Windows 裝置的框架 .NET Core 是跨不同系統(Wind...

使用 Visual Studio Code 執行 C# 程式時問題排除

圖片
要使用 Visual Studio Code 執行 C# 程式, 可參考 官方文件說明 ( Visual Studio Code 版本: 1.15.1 ) 根據以上步驟執行完成後, 就可以開心 debug 囉 (誤) 但是!! 事情沒這麼簡單,以下紀錄該怎麼一步步完成設定: 1. 按下 F5 啟動 debug 模式 2. 選取 " .NET Core " 環境 3. launch.json 檔案會自動被建立並開啟,請根據環境調整紅框處參數:   參數設定可以參考開發路徑內容: 4. 回到 Visual Studio Code 按下 F5 會出現以下錯誤訊息:    找不到 preLaunchTask 'build'。      選擇 " 設定工作執行器 " -- " .NET Core ",    tasks.json 會自動被建立,    這時候再按下 F5 ,就可以成功執行囉! 但是執行的前置時間有點久呢....稍後再研究如何加速啟動

如何自訂 Node.js/Express 狀態訊息?

當 Node.js 處理請求時,使用 sendStatus 回傳狀態碼, 當發生錯誤時,只要指定狀態碼,就會顯示標準錯誤訊息內容, 例如: router.put('/user/:id', function (req, res, next) { res.sendStatus(404); }); 客戶端會收到如下錯誤訊息: HTTP / 1.1 404 Not Found 如果只顯示預設資訊, 對於排除問題非常不方便.... 當想反映實際錯誤發生原因,或是提示如何排除問題, 可以這樣寫: router.put('/user/:id', function (req, res, next) { res.statusMessage = "User Not Exist, Please Create User First."; res.send(404); res.end(); }); 客戶端就會收到以下錯誤訊息: HTTP / 1.1 404 User Not Exist, Please Create User First. 這樣就可以提供詳細資訊給前端,做進一步處理囉!

[20171019]今日嘀咕

提出質疑很簡單, 困難的是找出病灶、提出解決方法、甚至解決問題 勉勵自己有能力解決問題、成為解決問題的人

[20171013]今日嘀咕

把猴子當人訓練,猴子的舉止會像人 把人當猴子訓練,人的舉止會像猴子 所以,想要怎麽收穫,就要怎麼栽

[2017/09]閱讀清單

JS 概念篇: How to set variable to undefined in javascript?  (英) callback 說明與用法  (中) 了解 function  (中) 其他: How to promisify native XMLHttpRequest?  (英) undoRedo for simple app  (英) 該選 backbone.js 還是 CanJS?  (英)

Form Builder 拖拉功能篇

圖片
根據前一篇的參考資料 Drag & Drop with pure JavaScript 完成拖拉功能!! 新增功能: 移動時,元件原本的位置顯示標記 移動途中可使用 Esc 取消操作 若在不可放置的位置放開滑鼠左鍵,視為取消操作 移動後須調整 ViewModel 資料,重新包裝原始程式碼 (程式碼待補)

Form Builder架構篇

圖片
最近在做類似線上 Form Builder 的專案,在此整理相關資料。 架構 Server Side:  NodeJS Client Side ( MVC / MVVM):  EJS : 優點 - 語法簡單易學 缺點 - 無法雙向binding   CanJS : 優點 - 可使用EJS語法設計樣板,語法簡單易學、引入 Observe 架構支援雙向Binding 缺點 - 因最終產生 Angular2 專案,需同時維護 EJS/Angualr2 兩架構之樣板 Angular2 : 優點 - 支援雙向Binding 缺點 - 功能豐富且複雜,Render 功能使用此架構略嫌複雜 architecture diagram ( 參考來源 ) [閱讀清單] CanJS API Developing a MEAN app with Angular 2.0 MEAN App with Angular 2 and the Angular CLI Drag & Drop with pure JavaScript Angular vs React 如何選擇?