Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

2015/07/01

AngularJS 筆記 - 基礎檔案 Overview

目錄最外層通常會有 package.json, bower.json 其他可能會有 gulpfile.js 或是 grunt.js

package.json 通常會拿來裝 gulp 的 plugin
bower.json 則是拿來安裝一些跟 Web 相關的套件 (包含 Angularjs Directive, JQuery...etc)

通常會有個 app 的資料夾,裡頭是放置你的 AngularJS Web App

會有一個 app.js ,這是整個 AngularJS 的核心,要在這邊定義你的 Web App,並幫它掛上需要使用的 Module 以及設定一些 Module 的內容(例如: Routing)

整個 App 的邏輯是由 Controller 負責,你可以定義自己的 Controller 並設定它為一個有名稱的 Module,在 app.js 中掛上它

每個 Controller 有自己的 $scope,看起來它的意思就是像是指向物件本身的 this,你可以給予這個 Controller 自帶方法跟屬性

取得資料或是一些共通行為通常都是透過 Service ,你可以撰寫自己的 Service 註冊在 app.js ,最後在 Controller 進行調用 (參考: https://docs.angularjs.org/guide/services)

例如一個 phoneListService 取得所有清單,在 Controller 裡頭直接以 phoneListService 參數帶入調用

關於 View ,也是使用基礎的 HTML 標籤語法配合一些 AngularJS 的解析語句

你可以用 Directive 自己實作一些自訂標籤或是屬性(看是使用 A, E, C 哪個設定),通常每個 Directive 會包含一個 .js 跟一個 .html 分別用來定義邏輯跟視圖 (參考: https://docs.angularjs.org/guide/directive)

你可以定義 Filter 做基本的過濾操作或是進行格式化輸出


完整的文件可以參考官方開發手冊: https://docs.angularjs.org/guide/

2015/03/05

A simple Nodejs (express) fIle upload example

In express, we usually use multer middleware to handle file upload.

First, use this package for your express application (here we assign upload destination as './uploads'

app.use(multer({ dest: './uploads/' }));

Now, we define a GET router for render upload form view and a POST router for upload

router.get('/upload/', function(req, res, next) {
 res.render('upload'); // render file upload form view
});

router.post('/upload/', function(req, res, next) {
 res.json(req.files); // return file information as json
});

below is upload.jade
extends layout

block content
  form(action="./", method="post", enctype="multipart/form-data")
    input(type="file", name="uploadedFile")
    input(type="submit")

Done!
You can access http://localhost:3000/upload/ to upload your files and see them in folder /uploads/ !!

2010/01/11

(整合)在blogger使用Syntaxhighlighter + PreCode

本文說明了如何在Blogger使用Syntaxhighlighter + PreCode的整合技巧

Syntax Highlighter Testing


this is a test




 
public class Main {
static void main() {
System.out.println("Hello World");
}
}