2016年4月26日 星期二

Markdown語法簡介

Markdown語法簡介

標題

# H1
## H2
### H3
#### H4
##### H5
###### H6

換行與段落

  • 一個換行字元會轉成換行<br />
  • 兩個換行字元會轉成段落<p></p>
第一段
第一行
第二行

第二段
第一行
第二行

字體

*斜體*
**粗體**
***粗斜體***
~~刪除線~~

引言

> 用>和一個空白表示
>> 多個>表示嵌套

水平分隔線

三個以上的星號、連字號、底線表示
不能有空白或其他的文字
***
---
___

無序清單

* 星號加空白
    * 加Tab可嵌套清單
+ 加號也可以
- 減號也可以

有序清單

1. 格式為一個數字加小數點加空白
2. 數字本身順序不重要會自動遞增
    1. 一樣用加Tab可以嵌套

超連結

* [行內連結](https://www.google.com)
* [帶標題的行內連結](https://www.google.com "Google WebSite")
* [參考連結][Google Link]
[Google Link]: https://www.google.com

圖片

行內格式:
![圖片文字](01.png "圖片Alt")

參考連結格式:
![圖片文字][logo]
[logo]: 01.png "圖片Alt"

程式代碼與語法高亮

  • 單行代碼用一個`前後包起來
  • 多行代碼用三個`前後包起來
  • 語法高亮在`符號後加入語法的名稱





Console.WriteLine("Hello");

表格

冒號用來對齊的
預設為靠左對齊
放在右邊就是靠右對齊
左右都放就是靠中對齊

| 欄位一        | 欄位二           |  欄位三 |
| ------------- |-------------:| :-----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

表示中要跳脫表格用到的符號,需要用html編碼的方式表示
空白是&nbsp;
|是&#124;

安裝gitbook-cli套件

# 安裝gitbook-cli套件
## 打開命令視窗
```shell
$ npm install gitbook-cli -g
```


## 到gitbook新增一本書


## 輸入書名


## 進入設定頁面


## 取得git路徑
```shell
https://git.gitbook.com/{username}/{bookname}.git
```


## 取得這本書的原始檔案
```shell
$ git clone https://git.gitbook.com/{username}/{bookname}.git bookdir
```


## 使用Visual Studio Code打開資料夾


## 在本地端觀看編輯後的結果
```shell
$ gitbook serve
```


## 輸入此次異動的訊息


## 同步記錄到gitbook

安裝NodeJS

# 安裝NodeJS
## 到[官網下載](https://nodejs.org/en/)安裝程式


## 雙擊安裝程式開始安裝


## 接受授權條款


## 選擇安裝路徑


## 自訂安裝設定(使用預設值即可)


## 準備安裝


## 安裝中


## 安裝完成

安裝 git for windows

# 安裝Git for Windows
## 先到[官網下載](https://git-for-windows.github.io/)安裝程式


## 雙擊安裝程式開始安裝


## 選擇安裝路徑


## 選擇安裝元件


## 輸入開始功能表的資料夾名稱


## 調整環境路徑


## 設定文件的結尾符號


## 設定命令列模式


## 設定快取


## 開始安裝


## 安裝完成

安裝Visual Studio Code

# 安裝Visual Studio Code
## 先到[官網下載](https://code.visualstudio.com/download)安裝程式


## 下載好後雙擊安裝程式開始安裝


## 接受授權合約


## 選擇安裝的路徑


## 輸入之後要在功能表顯示的名稱


## 勾選加入資料夾和檔案的操作功能表


## 準備安裝


## 安裝中


## 安裝完成

2016年4月8日 星期五

AngularJS ngProgress 套件

安裝指令

$ bower install ngprogress

加入css和js

<script src="app/components/ngProgress/ngProgress.min.js"></script>
<link rel="stylesheet" href="ngProgress.css">

載入模組

var app = angular.module('progressApp', ['ngProgress']);

注入控制器

var MainCtrl = function($scope, $timeout, ngProgressFactory) {}

建立進度條物件

$scope.progressbar = ngProgressFactory.createInstance();

啟動進度條

$scope.progressbar.start();
$timeout($scope.progressbar.complete(), 1000);

API

- start: 啟動進度條
- setHeight: 設定進度條高度
- setColor: 設定進度條顏色
- status: 進度條狀態
- stop: 停止進度條
- set: 設定進度
- reset: 重設進度
- complete: 完成進度
- setParent: 設定進度條上層原素
- getDomElement: 取得進度條元素

相關連結

ngProgress 官網
ngProgress GitHub

AngularJS ngNotify 套件

必要條件

  • IE9+
  • AngularJS
  • 不需要JQuery

安裝指令

bower install ng-notify --save
npm install ng-notify --save

CDN

http://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.js
http://cdn.jsdelivr.net/angular.ng-notify/0.8.0/ng-notify.min.css

用法

app.js
(function () {
    // 載入模組
    angular
        .module('myApp', ['ngNotify'])
        .run(ngNotifyConfig);

    // 全域設定
    ngNotifyConfig.$inject = ["ngNotify"];
    function ngNotifyConfig(ngNotify) {
        ngNotify.config({
            theme: 'pure',
            position: 'bottom',
            duration: 3000,
            type: 'info',
            sticky: false,
            button: true,
            html: false
        });
    }
})();
IndexController.js
(function () {
    angular
        .module("myApp")
        .controller("IndexController", IndexController);

    IndexController.$inject = ["ngNotify"];
    function IndexController(ngNotify) {
        var vm = this;

        // 通知1
        vm.Notify1 = function () {
            // 呼叫set函式來Notify, 預設為info type
            ngNotify.set('Your notification message goes here!');
        }

        // 通知2
        vm.Notify2 = function () {
            // 可用第二個參數來指定Notify Type
            ngNotify.set('Your error message goes here!', 'error');
        }

        // 呼叫時使用額外的設定值
        vm.Notify3 = function () {
            // 獨立設定值
            ngNotify.set("Your individual message.", {
                theme: 'pure',
                position: 'bottom',
                duration: 3000,
                type: 'info',
                sticky: false,
                button: false,
                html: true
            });

        }

        // 關閉通知時呼叫call back函式    
        vm.NotifyCallBack = function () {
            var callback = function () { };
            // 第三個參數為call back函式
            ngNotify.set('This message has a callback.', {}, callback);
        }

        // 自訂顯示通知的容器
        vm.NotifyTarget = function () {
            ngNotify.set('This message has a specific container!', {
                target: '#new-container'
            });
        }

        // 關閉通知
        vm.CloseNotify = function () {
            ngNotify.dismiss();
        }


    }
})();

設定值

  • theme: string - 指定使用樣式
    • pure(default)
    • prime
    • pastel
    • pitchy
  • type: string - 通知類別
    • info(default)
    • error
    • success
    • warn
    • grimace
  • position: string - 顯示的位置
    • bottm(default)
    • top
  • duration: int - 顯示通知的持續時間毫秒數
  • sticky: bool - 是否持續顯示, 預設為false, 設為true時將不理會duration設定值
  • button: bool - 是否顯示關閉按鈕, 預設為true
  • target: string - 用來指定要顯示通知的容器名稱
  • html: bool - 需要引用angular-sanitize模組才能生效html格式的提示訊息

函式定義

  • set(message, type|config, callback)
    • 呼叫提示訊息
  • config(options)
    • 設定參數
  • dismiss()
    • 手動關閉通知, 當sticky設為true且button設為false時使用
  • addType(name, class)
    • 自訂通知類別
  • addTheme(name, class)
    • 自訂顯示樣式

相關連結

ng-notify Live Demo
ng-notify GitHub