安裝Visual Studio Code

先到官網下載安裝程式

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

接受授權合約

選擇安裝的路徑

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

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

準備安裝

安裝中

安裝完成

安裝指令

<span class="hljs-variable">$ </span>bower install ngprogress`</pre>

# 加入css和js
<pre class="prettyprint">`<span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"app/components/ngProgress/ngProgress.min.js"</span>&gt;</span><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"ngProgress.css"</span>&gt;</span>`</pre>

# 載入模組
<pre class="prettyprint">`<span class="hljs-keyword">var</span> app = angular.module(<span class="hljs-string">'progressApp'</span>, [<span class="hljs-string">'ngProgress'</span>]);`</pre>

# 注入控制器
<pre class="prettyprint">`<span class="hljs-keyword">var</span> MainCtrl = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">($scope, $timeout, ngProgressFactory)</span> {</span>}`</pre>

# 建立進度條物件
<pre class="prettyprint">`$scope.progressbar = ngProgressFactory.createInstance();`</pre>

# 啟動進度條
<pre class="prettyprint">`$scope.progressbar.start();
$timeout($scope.progressbar.complete(), <span class="hljs-number">1000</span>);`</pre>

# API
<pre class="prettyprint">`-<span class="ruby"> <span class="hljs-symbol">start:</span> 啟動進度條
</span>-<span class="ruby"> <span class="hljs-symbol">setHeight:</span> 設定進度條高度
</span>-<span class="ruby"> <span class="hljs-symbol">setColor:</span> 設定進度條顏色
</span>-<span class="ruby"> <span class="hljs-symbol">status:</span> 進度條狀態
</span>-<span class="ruby"> <span class="hljs-symbol">stop:</span> 停止進度條
</span>-<span class="ruby"> <span class="hljs-symbol">set:</span> 設定進度
</span>-<span class="ruby"> <span class="hljs-symbol">reset:</span> 重設進度
</span>-<span class="ruby"> <span class="hljs-symbol">complete:</span> 完成進度
</span>-<span class="ruby"> <span class="hljs-symbol">setParent:</span> 設定進度條上層原素
</span>-<span class="ruby"> <span class="hljs-symbol">getDomElement:</span> 取得進度條元素</span>

相關連結

ngProgress 官網
ngProgress GitHub

必要條件

• IE9+* AngularJS
• 不需要JQuery

安裝指令

<span class="hljs-comment">bower</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span>
<span class="hljs-comment">npm</span> <span class="hljs-comment">install</span> <span class="hljs-comment">ng</span><span class="hljs-literal">-</span><span class="hljs-comment">notify</span> <span class="hljs-literal">-</span><span class="hljs-literal">-</span><span class="hljs-comment">save</span>`</pre>

# CDN
<pre class="prettyprint">`<span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.js</span>
<span class="hljs-label">http:</span>//cdn<span class="hljs-preprocessor">.jsdelivr</span><span class="hljs-preprocessor">.net</span>/angular<span class="hljs-preprocessor">.ng</span>-notify/<span class="hljs-number">0.8</span><span class="hljs-number">.0</span>/ng-notify<span class="hljs-preprocessor">.min</span><span class="hljs-preprocessor">.css</span>`</pre>

# 用法
app.js
<pre class="prettyprint">`(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    <span class="hljs-comment">// 載入模組</span>
    angular
        .module(<span class="hljs-string">'myApp'</span>, [<span class="hljs-string">'ngNotify'</span>])
        .run(ngNotifyConfig);

    <span class="hljs-comment">// 全域設定</span>
    ngNotifyConfig.$inject = [<span class="hljs-string">"ngNotify"</span>];
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ngNotifyConfig</span><span class="hljs-params">(ngNotify)</span> {</span>
        ngNotify.config({
            theme: <span class="hljs-string">'pure'</span>,
            position: <span class="hljs-string">'bottom'</span>,
            duration: <span class="hljs-number">3000</span>,
            type: <span class="hljs-string">'info'</span>,
            sticky: <span class="hljs-literal">false</span>,
            button: <span class="hljs-literal">true</span>,
            html: <span class="hljs-literal">false</span>
        });
    }
})();`</pre>IndexController.js
<pre class="prettyprint">`(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
    angular
        .module(<span class="hljs-string">"myApp"</span>)
        .controller(<span class="hljs-string">"IndexController"</span>, IndexController);

    IndexController.$inject = [<span class="hljs-string">"ngNotify"</span>];
    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">IndexController</span><span class="hljs-params">(ngNotify)</span> {</span>
        <span class="hljs-keyword">var</span> vm = <span class="hljs-keyword">this</span>;

        <span class="hljs-comment">// 通知1</span>
        vm.Notify1 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            <span class="hljs-comment">// 呼叫set函式來Notify, 預設為info type</span>
            ngNotify.set(<span class="hljs-string">'Your notification message goes here!'</span>);
        }

        <span class="hljs-comment">// 通知2</span>
        vm.Notify2 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            <span class="hljs-comment">// 可用第二個參數來指定Notify Type</span>
            ngNotify.set(<span class="hljs-string">'Your error message goes here!'</span>, <span class="hljs-string">'error'</span>);
        }

        <span class="hljs-comment">// 呼叫時使用額外的設定值</span>
        vm.Notify3 = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            <span class="hljs-comment">// 獨立設定值</span>
            ngNotify.set(<span class="hljs-string">"Your individual message."</span>, {
                theme: <span class="hljs-string">'pure'</span>,
                position: <span class="hljs-string">'bottom'</span>,
                duration: <span class="hljs-number">3000</span>,
                type: <span class="hljs-string">'info'</span>,
                sticky: <span class="hljs-literal">false</span>,
                button: <span class="hljs-literal">false</span>,
                html: <span class="hljs-literal">true</span>
            });

        }

        <span class="hljs-comment">// 關閉通知時呼叫call back函式    </span>
        vm.NotifyCallBack = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            <span class="hljs-keyword">var</span> callback = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> };
            <span class="hljs-comment">// 第三個參數為call back函式</span>
            ngNotify.set(<span class="hljs-string">'This message has a callback.'</span>, {}, callback);
        }

        <span class="hljs-comment">// 自訂顯示通知的容器</span>
        vm.NotifyTarget = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            ngNotify.set(<span class="hljs-string">'This message has a specific container!'</span>, {
                target: <span class="hljs-string">'#new-container'</span>
            });
        }

        <span class="hljs-comment">// 關閉通知</span>
        vm.CloseNotify = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span>
            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

正所謂一圖解千文，一張圖表可以更容易地看出資料背後所代表的意義
ChartJS是一套簡單好用基於HTML5的JS Library，提供六種圖表，使用方式還滿簡單地

首先透過Nuget或Bower取得ChartJS

$ Install-Package Chart.js
$ Bower Install Chart.js

<canvas id=”myLine” width=”300” height=”400”></canvas>

(function () {

            var lineChartData = {

                labels: [“January”, “February”, “March”, “April”, “May”, “June”, “July”],

                datasets: [

                  {

                      fillColor: “rgba(220,220,220,0.5)”,

                      strokeColor: “rgba(220,220,220,1)”,

                      pointColor: “rgba(220,220,220,1)”,

                      pointStrokeColor: “#fff”,

                      data: [65, 59, 90, 81, 56, 55, 40]

                  },

                  {

                      fillColor: “rgba(151,187,205,0.5)”,

                      strokeColor: “rgba(151,187,205,1)”,

                      pointColor: “rgba(151,187,205,1)”,

                      pointStrokeColor: “#fff”,

                      data: [28, 48, 40, 19, 96, 27, 100]

                  }

                ]

            }

            var ctx = document.getElementById(“myLine”).getContext(“2d”);

            var myLine = new Chart(ctx).Line(lineChartData);

        })();

# npm介紹

- node package manager
- [npm官網](https://www.npmjs.com/)

# package.json

- $ npm init

[![](https://4.bp.blogspot.com/-04RgkUsOupM/VuaYTiejJRI/AAAAAAAADrE/aX4I3I-knLcwCvIya7DSSQCtZKVHylqog/s1600/01.png)](https://4.bp.blogspot.com/-04RgkUsOupM/VuaYTiejJRI/AAAAAAAADrE/aX4I3I-knLcwCvIya7DSSQCtZKVHylqog/s1600/01.png)
- [package.json文件](https://docs.npmjs.com/files/package.json)

[![](https://3.bp.blogspot.com/-9av8Fqm3X4Q/VuaYTuv-KtI/AAAAAAAADrA/5F0Xnq8z5K4e3WGN7SnBrUMLC7YuIdh4A/s1600/02.png)](https://3.bp.blogspot.com/-9av8Fqm3X4Q/VuaYTuv-KtI/AAAAAAAADrA/5F0Xnq8z5K4e3WGN7SnBrUMLC7YuIdh4A/s1600/02.png)
# npm指令

- 安裝資料夾 **node_modules**
``` shell

# 安裝套件
$ npm install -g 
$ npm install 

# 安裝並寫入設定檔
$ npm install  --save
$ npm install ** --save-dev

# 移除套件
$ npm uninstall -g 
$ npm uninstall 

# 搜尋套件
$ npm search 

# 列出已安裝的套件
$ npm list -g
$ npm list

# 更新套件
$ npm update -g
$ npm update

# 安裝package.json設定檔的套件
$ npm install -l
```

開發Windows Service的時後，為了開發方便，之前都用一些小技巧切換在本機的Console模式和伺服器的Service模式，但在日後維護的時後或是偵錯的時後，總是不太方便，最近用了一個好用的套件叫TopShelf，是一個用來開發Windows Service的框架，實在太好用了，所以記錄一下筆記

首先新增一個Console專案

using System;

namespace ConsoleApplication1
{
class MyService
{
public void Start()
{
Console.WriteLine(“MyService Start”);
}

    public void Stop()
    {
        Console.WriteLine("My Service Stop");
    }
}

}

回到應用程式進入點開始配置服務

using Topshelf;

namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
Topshelf.HostFactory.Run(x=>
{
x.Service<MyService>(s =>
{
s.ConstructUsing(() => new MyService());
s.WhenStarted(svc => svc.Start());
s.WhenStopped(svc => svc.Stop());
});

            x.RunAsLocalSystem();
            x.StartAutomatically();
            x.SetServiceName("MyService");
            x.SetDisplayName("MyService Display Name");
            x.SetDescription("MyService Description");
        });
    }
}

}

本機執行的結果

首先安裝Bootstrap.Switch這個套件