CK's Notepad

Angular2的Route的新版持續在開發中，目前已經到了beta階段了，可是Angular2的CLI只是單純的有更新@angular/router的版本而已，但是內建的樣版卻沒有更新，所以只好手動了。

.Net Core 終於支援使用SqlClien的物件了(但不確定是從什麼時候開始的), 那就來試試看怎麼在mac的環境上連到sql server撈資料了

Angular2裡面偵測改變的方法有全新的方式，用來提升整體的效能，那針對Component對於偵測改變有一個屬性可以設定，那就是透過 ChangeDetectionStrategy

在Angular2裡面如何做一個全域型的變數然後當其更新時，讓所有有用到的人都知道。這時候就要用EventEmitter了

Angular2也有一個給Firebase使用的Library, 必計是自家的服務，有相對的AngularFire也是正常的，

目前AngularFire2只支援Firebase SDK V2版本，V3版本還在路上。所以在firebase所建立的專案必須要由舊介面建立後再轉至新Console介面，才可以使用。

AngularFire2現在支援Firebase SDK V3版本了，設定方式如下

Angular2 Directives - Structural Directives : 改變DOM element的Directive。常見的structural directives有 ngIf, ngSwitch, ngFor 用法如下.

Angular2裡面有用到RxJS的Extensions. 那這個Extendsion會帶給Angular2怎樣的幫助，來研究一下Http的程式碼吧

Angular發佈RC了，來升級吧

因為找不到自己想要的Markdown編輯器，所以自己來寫一個.

想要的功能

• Live preview like Typora
• Auto-upload image to Flickr
• Be able to work with Hexo

Angular Component 處理styles有三種模式 1. ViewEncapsulation.None: 適用於全部頁面(No Shadow DOM) 2. ViewEncapsulation.Native: 僅套用於Shadow DOM自己本身 3. ViewEncapsulation.Emulated: 預設行為。 會自動將每個component給予一個名稱，讓各compoent裡面的style會各自獨立

先來看第1,2種，看看style會被放在哪一個位置

1. ViewEncapsulation.None

1
2
3
4
5
6
7
8
9
10
11

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class CkBookPage {}

2.ViewEncapsulation.Native

1
2
3
4
5
6
7
8
9
10
11

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.Native
})
export class CkBookPage {}

注意到ViewEncapsulation.Native將ViewEncapsulation.None的和本身定義的Style都包含在Shadow DOM裡面，這表示該Componenet與外面已經分開了. 本身所定義的css樣式不會影響到別人了

3. ViewEncapsulation.Emulated為預設行為，會自動將每個Component給予一個名稱，然後在產生html時會將各Componet裡 定義的style加上該名稱，讓css不會互相影響

1
2
3
4
5
6
7
8
9
10

@Component({
    selector: 'ck-book',
    template: require('./book.html'),
    styles: [`
        h3 {
           color: red
        }
    `],
    encapsulation: ViewEncapsulation.Emulated
})

1
2
3
4
5
6

<style>h3[_ngcontent-jfs-3] {
         color: red
   }</style>
    <div _ngcontent-jfs-3 class="clearfix mx-auto col-8">
        <h3 _ngcontent-jfs-3>Booking</h3>
		....

參考

• shadow-dom-strategies-in-angular2
• Controlling how Styles are Shared with View Encapsulation