會接觸正則表達式(RegExp)是因為前一篇的文章ng-pattern，但正則似乎是所有語言通用的，所以學起來絕對不吃虧。

網路上有太多太多的資源可以查詢了，我也比較會用基本的數字判斷而已，所以這篇主要分享我學習上的一些小地雷觀念。

一次只能設定一個字

一次只能設定一個字

一次只能設定一個字

為什麼重複三次標題，因為這是我踩的一個很大的雷，網路上有很多資源，其中我的需求是要限制一個範圍的數字，例如只能輸入0~1500之間的數字，這時候其中一個網站給我一個很猛的寫法是^[0-1500]$，我在那邊試老半天一值給我很奇怪的數字範圍。

後來很不爽直接關鍵字全打英文想找國外的說明，發現有個頗棒的外文網站解釋得真的很好，參考此連結，老實說我覺得英文的資源說明真的比較明白，中文的資源真的沒有在解釋比較完整的觀念。

大中小括號各司其職{}[]()

首先在JS的正則會用兩條斜線包起來，像這樣/Some RegExp/，而想要限制什麼樣的文字照著打即可(例如/9453/，/helloworld/，/taiwanNo1)，RegExp是很精明的所以大小寫全形半形都不可以不同。

中括號[]–一個單字的象徵

但我們不可能像上面的例子量身定做，我們需要一個單字的範圍值，例如我要單個任意數字，這邊的單個只的真的是一個數字，不能是0.1或01這種有單個以上的數字，是最基本的0,1,2,3,4,5,6,7,8,9，這時候我們要的那個單字範圍是0~9，在正則的規則裡面我們可以用最基本的^[0-9]$表達，注意中間是-哦。

那英文怎麼辦？英文也可以用範圍來表示，順序為字母序有分大小寫！
例如[a-z]為可以輸入小寫a~z任一個字母，而[A-Z]則是可以輸入大寫，那如果想要大小寫都可以呢？
[a-zA-Z]可以表達出來，中間不用加任何符號，因為-只會認左右邊的第一個單字！！所以如果不小心寫錯如[aA-Z]他只會認得A~Z這個範圍哦！

所以最基本範圍是任意大小寫英文和數字的單字表達為[a-zA-Z0-9]，這樣我們知道中括號是做什麼事情的囉！

大括號{}–象徵必須使用次數

大括號是緊緊黏在一個單字後面的，他做的事情例如{m,n}代表的是使用最少m次最多n次，看幾個最簡單的範例：
^[a-z]{1,5}$
a~z任意單字出現一到五次。
符合的有：apple,cat,dog
不符合的：Dog,and1,hellowworld,0
^B[0-9]{5}$
一個B後面接任意數字五個。
符合的有：B12345,B12,B999
不符合的：C12345,12345,BB123
^0{3}AC{1,}$
三個0一個A和一到無限次的C
符合的有：000AC,000ACCCCCCCCCCC
不符合的：111AC,000A,000C,000ACC
^7{,3}$
最多三個7
符合的有：7,77,777
不符合的：07,7777,a7

大括號的工作就是限制次數囉！

小括號()–合併為一個敘述

跟數學運算符號一樣用法，就是先執行括號內的東西，小括號也經常跟tube|搭配在一起，用一個簡單的例子：
^([a-z]|[0-9]){1,3}[A-Z]{,3}$
小括號內先執行，所以是任意單字a~z或者任意數字0~9，兩個其中一個出現一到三次，緊接著出現三次以內的大寫英文單字A~Z。

綜合三大括號我們再舉一個例子：
^([A-Z][a-z]{,10})|(09[0-9]{8})$
看出來了嗎？請填寫英文名字或者手機號碼，因為我的設定為開頭為一個大寫英文字母後面緊接著最多十個的小寫字母或者開頭為09後面緊接著八次任意數字。

但這有個弊案，會不會有人的英文名字真的只有一個大寫字母？抑或者名字真的超過十一個字母單字？這時候我們就可以用符號來表示了！

常用符號＾＄？＊＋

要維持著正則的穩定性，一定要加上最常用的^和$符號，\^緊接著一個單字代表開頭，一個單字後面緊接著$代表結尾，直接看例子：
^[a-z]331$
代表開頭一個小寫a~z的單字後面接33並最後是接1，但為什麼還要特別指定開頭和尾巴？

正則是可以去匹配一整篇文章(例如新聞)的方式，不斷重複尋找符合條件的單字，所以如果再使用者輸入的欄位不加上\^和$只要中間有夾雜著符合條件的單字也許是可以輸入的上去的哦！不過這邊我是沒驗證過XD。

也就是說如果單純[a-z]331的話a331也符合bbba33111也會有符合條件，所以在製作給使用者的欄位最好是嚴謹一點，多加點符號吧！

其他的常用符號？＊＋都是緊接在單字後面
?代表需要出現零次會一次
*代表需要出現零次或無限次
+代表需要出現一次或者無限次
這些東西都可以在網路上輕易找到，可以參考這篇。

其他跳脫符號的使用方法就不在贅述了，懂得剛剛說的觀念其實要學習正則表示式不會是很困難的事情囉！

其實Angular的其中一個精華是已經可以在HTML裡面做很多事情和判斷，也就是說Angular可以寫到幾乎已經不用寫太多JS了，但這是一個雙面刃，畢竟JS是前端很重要的命根之一。

或說回來，Angular在製作表單可以把引導性做的很高，立即的判斷該欄位是否是正確的輸入值(例如電子信箱不會有中文字)，許多內建基本的驗證式(例如信箱格式，文字長短等等)上網都可以輕鬆找尋到就不多介紹。

這次的主題是可以自定義條件的ng-pattern，那想要善用ng-pattern就不得不學習一下燒翻腦袋的正則表示式(RegExp)啦！正則表示式就請參考我的另外一篇文章囉！

ng-pattern的用法

先來討論ng-pattern使用方式，最基本的使用方式是把他放入一個input的tag裡面，其實就跟表達式(ng-show等等)的方法一樣，但只有他單獨出現的話是沒有意義的，簡單的例子如下：

1
2
3
4
5
6
7
8
9

<div ng-form name="demoform">
	<input type="text"
	name="identify"
	placeholder="請輸入身分證"
	class="style"
	ng-model="user.identify"
	ng-pattern="/[A-Z][0-9]{9}/" />
	<span ng-show="demoform.identify.$error.pattern">輸入的格式不正確</span>
</div>

第一個規則是驗證式(如這次的例子ng-pattern)都需要被包在form的tag裡面喔！

Angular有自己的ng-form，與原生的HTML的form差異在哪這邊不多做探討，總之直接用一套Angular的表達式也比較有優點，不要忘記幫ng-form取上名字name="demoform"。

input的原聲屬性全部都可以使用，ng-model是Angular處理資歷的表達式不多做探討，ng-pattern為驗證式，當然不能忘記要幫他取名子name="identify"。

再來先不要探討ng-pattern裡面的東西，ng-pattern本身是驗證式，所以當使用者輸入的欄位不符合我自訂的條件(/[A-Z][0-9]{9}/)的話會激活一個內建$error的屬性，所以我span的表達式ng-show會為true而顯示。

這裡可以很語意化的看成表單(demoform)的(.)某個input(identify)的(.)錯誤($error)的(.)某個驗證式(pattern)為真，所以span這個tag就會出現輸入的格式不正確這行字。

這就是驗證式基本的用法，當然可以配上CSS和其他手法玩得讓表單更有引導性，但這裡就不在深入討論了，至於基本的驗證式介紹也可以直接參考Angular的官方網站。

ng-pattern可以外部帶入

直接看範例：

1
2
3
4
5
6

<input type="text"
	name="identify"
	placeholder="請輸入身分證"
	class="style"
	ng-model="user.identify"
	ng-pattern="identifyRegExp" />

1
2
3
4

angular.module('app',[])
	.controller('contrl',[finction(){
		this.identifyRegExp = /[A-Z][0-9]{9}/;
	}])

當然也可以自己製作一些function讓他動態產生，這裡就不多討論了，接下來正則表示式就請參考我的另外一篇文章囉！

身為一個前端工程師，很大一部分是要讓網頁更有價值，但我想大部分的人並沒有很好的規劃去做這件事情，在此推薦Growth hack這本書。

##什麼是網頁的價值
很多人會覺得網站就是一個商品，所以他帶給我的利潤減去我投入的成本就是它的價值，以總結來說這樣講並沒有錯，但細節上的判斷沒有這麼簡單，投入的時間，使用者個階段的轉換率(例如一百個人裡面有幾位註冊成會員)等等都要精打細算，用最科學也最有效率的方式做記錄和改善。

##啟動前的條件

• 書裡講了很多讓產品改善的方法，但要使用這些條件之前手上當然要先有最小可行性產品，也就是核心功能就做好了，我要從一個網站購買一個最基本的服務已經可以在這個網站完成。

• 你要夠熟悉這項產品或者市場，Growth hack確實能帶給產品極大的改善沒錯，但一方面要知道改善的方向在哪裡(FB如果有自動播放廣播的功能並不會比較討喜)，或者是你眼光獨到知道這個產品一定有它的市場，即使一開始的產品並不是很好但還是可以賺錢，這時候趕出來的產品套上Growth hack也會有很好的效果。

這是一個乘法的概念，假如你的產品很好(10分)但是Growth的能力很差勁(3分)，那這個產品將只有30分的能耐，反之一個不好的產品套上再好的Growth hack方式也不會有什麼效果。

一個確認可以賺錢和成長的產品搭配在一起才是核心產品！

##科學和視野
這本書最有趣的是做任何事情是跟著最根本的科學證據走，但是眾多的證據就要想辦法拿到，而要拿到龐大的證據就需要讓自已有龐大的視野。

很多事情每個人都有自己的獨特見解，每個人都沒錯，但這就跟我們的顧客群一樣，總有人喜歡獨特的口味，那我們就去取最多人喜歡的口味吧！

現在科技發達，網頁這個產品最棒的地方是可以用一些套件來記錄哪個樣式或者引導方式最多使用者去做我們想叫他們做的事情，甚至是哪個環節突然出現了使用者異常的過濾數量。

重點就是兩句話：
如何讓吸引更多人進來頁面(Landing page)
如何讓進來的人不假思索的使用下去(On boarding)

四個月前想要改變自己的環境毅然而然辭職了上一份工作，在三個月後成功轉職，到現在也上班一個月了，在此分享一下心得。

不過首先恭喜一下自己有個Rookie的小群組，裡面的四個人都在年底找到新的工作。

##除非是公司指定學習不然上班前是很難準備的

在Get offer到上班之前以休息為主，稍微學習維持手感為輔。

這份offer拿到之後我大約是休息兩個禮拜才正式報到，找工作的歷程是很累的，公司挑人也不輕鬆，至少休息一個禮拜是合理的範圍。

一個禮拜的緩衝期你可以再度慎重考慮這份工作一次，在報到之前有任何問題都可以趕快向公司詢問，這是雙方重要的權益，如果報導當天才一堆543的問題的話會很沒有誠意。
『不要報到的時候才說我沒有開發用筆電，這是非常扯的事情啊！』

在面試的時候先詢問好如果有幸拿到offer的話一開始會分配到什麼事情。
例如我很明瞭的是幫忙維護網站的前端工程師，這時候可以問一下是用什麼在開發的(在這裡是用Angular框架)，如何做專案版本控制(Github)，還有什麼公司文化或環境要注意的(非必要，這種問題比較像在哈拉了，但我的公司是有養一隻可愛的科基犬XD)。

當初我有了這些資訊後又拿到offer，我會很想要趕快讓自己熟練這些技能，但老實說，真的不知道該如何熟練XD。

包括Angular線上的教學資源一定不會少，基礎了東西學完了之後會沒有目標要去做什麼事情，即使參考公司的網站也只能看個大概，不過至少要有可以閱讀專案的程度，就是可以問為什麼這裡要這樣做，而不是還在問什麼是ng-app。

該休息的時候就好好休息吧！新鮮人再怎麼準備都還是會有著初戀般既期待又害怕受傷害的心情的XD。

##第一個禮拜報到

無論要適應住在新的宿舍或者是前往新的環境，一個禮拜是一個循環。

第一天報到看到傳說中的神犬科基，主管跟我介紹完大家之後就是讓我先去開戶，環境很不錯，十二樓的窗外視野看得到聳立的101大樓，雖然是微微飄著雨但去開戶的路上視野還是很明亮。

回來的之後主管開始教我公司的專案是如何寫的，然後先出了一個小功能給我做，但我不知道其實那不算小XD。

其實大概花了兩天不斷跟我講解和介紹不只在專案上的東西，很多開發工具和公司用的線上工具(例如線上Exsel可以讓大家同步和修改)等等，大多不難，當時我只想趕快投入在開發上面練手感。

第一天才做出一個小按鈕其實內心還蠻開心的XD，大部分的時間是在找他的表單到底在哪和怎麼運作之類的，其實要熟悉花個兩天純粹在閱讀專案真的是不為過，畢竟前端的寫法真的是百百種，絕對會跟教學上看到的完全不一樣。

後面不知不覺也禮拜五了，第一個禮拜過得異常的快。

##建立學習的良性循環
日子一天一天過，每天上班最麻煩的應該就是通勤了吧，市民大道真是萬惡的塞車製造機啊！

前兩個禮拜每天都在研究，每天都在學新的東西，到一個段落之後我開始嘗試著翻修一整個網頁，這時候每天就是盯著同樣的幾個檔案不斷的研究和修改。

第三個禮拜開始感到有點無力感，雖然每天都在一點一滴的不斷優化網站，但總覺得少了什麼刺激感，衝勁不大像前兩個禮拜。

後來我開始看Nic大力推薦的『Growth Hack』，我才發現一個產品真正的價值，和一個工程師的意義。

在這段時間使命感會有一種暴增，我會為了想要讓網站看起來更棒而去看公司給我的Angular教學書，一看不得了原來Angular的精神在於盡量讓JS做少一點事情，因為Angular雖然有十分好用的通訊套件，但是非常吃網路資源，這時候JS再寫得攏長會讓網路很難負荷。

接下來我利用在Angualr學到的新技能想再去翻修網站，又發現原來我之前寫的東西並不這麼的優雅，再二次修改之下自己很容易看到差別與成長，這又會轉變成想去學習更多的動力，直到把網站做得更好。

當然網站最大的價值是有使用者去使用，越多的使用者照個網站的指示去完成動作是網站越有價值的成績之一，而網站越有價值我們工程師的成就感就會越大！

這份工作目前給我最大的感觸是認真在研究一件事情的時候時間真的感覺過得很快，這一個月對我來說真的過得很快XD。

基本串接API的一種方式是從一個網址接收伺服器給我們的物件，通常在網址裡會帶有變數讓我們可以選取指定的資料。

Angular在這部分有提供非常方便的套件為$http，只要遵守範例中的規則即可取得我們所需的資料。

取得基本json資料

最簡單的Get去獲取資料的範例如下：

1
2
3
4
5
6
7
8
9
10

$http({
	method: 'GET',
	url: 網址(要為字串格式)
}).then(function (response) {
	var resultDate = response.date;
	Do something...
}, function (response) {
	var errorStatus = respinse.status;
	Do something...
});

我們假設server回傳的資料如下：

1
2
3
4
5

{
	"name": Kurt,
	"date": 2016/12,
	"address": Taiwan
}

在.then之後的第一個function代表成功獲取資料後要做的事情，而逗號,之後的function則是如果失敗的話要做的事情，那麼系統如何判斷此次API的獲取資料是成功還是失敗呢？

在http協議下他們有定義三位數的狀態碼，在我們開啟每一過網頁或者做每一件有關於資料處理的事情(其實就是有跟server端每次的往來)都會有這些狀態碼去分類跟server溝通後的結果狀況，最常見的莫非是代表著找不到網頁的404狀態了！

在這邊我們簡單的了解2開頭的狀態碼代表成功，3或4開頭的狀態碼代表失敗，完整的狀態碼資訊可以參考維基百科HTTP協議狀態碼。

不論成功還失敗我們都會把結果一整包帶入一個變數裡面，在範例裡面我用response表示，成功的話現在變數response現在是跟server回傳的資料一模一樣囉，也就等同於：

1
2
3
4
5

response = {
	"name": Kurt,
	"date": 2016/12,
	"address": Taiwan
}

成功下載下來的東西我宣告一個變數resultDate去取得response裡”date”的東西，所以現在我們的resultDate如下：

1

resultDate = "2016/12"

要注意的是如果我們用這種方法取得物件裡的資料會是字串的屬性喔！！！
所以我才會用雙引號來做表示。

要把字串改為可以用的格式(ex:數字，日期，布林值等等)都需要另外程式碼處理。

最後如果失敗的話通常我會把錯誤的代碼抓出來，一樣宣告一個變數var errorStatus = respinse.status;，再利用這個狀態碼去做其他的事情，例如跟使用者講為什麼會出現這些狀態碼，不然一般的使用者看不懂遊覽器預設的status 404是什麼意思，我們可以自製訊息跟使用者說找不到此網頁或系統維護中之類的『人話』。

其實status不論失敗或成功都是會跟著傳過來的，只是成功的2開頭狀態碼對我們來說似乎沒有什麼用，我們基本上是忽略他，不過可以嘗試著利用var errorStatus = respinse.status;把他叫出來看看。

我們可以視一個tag包起來的區塊(通常為div)為一個Box

了解Box model有什麼東西

• content: 內文凡指文字，圖片等都稱為content。
• border: content的邊界用border包起來，就像是漫畫的格子一樣。
• padding: border到content的距離。
• margin: Box和Box之間的距離。

block(區塊元素)和inline(內聯元素)的差別

我曾經以為每個tag包起來的東西都會是一個區塊，但當我在切版的時候遇到一些莫名的排版走掉問題，一樣的CSS屬性和位置設定卻是出現不一樣的效果，原來tag自己有分兩個種類，又各自原本的原生屬性，也找到一篇很詳細完整的資料就給大家直接參考吧！

轉載痞客邦文章：
[CSS教學] - CSS基礎您不能不知道的block(塊元素)、inline(內聯元素)差別)

每當CSS樣式越寫越多，越寫越複雜，我們需要有清楚的腦袋知道CSS選擇的是哪些tag，這裡可以參考小資訊。

你可以把CSS看作選擇器

我們跟CSS溝通要選擇P這個原生tag

1
2
3
4

p {
	color: green;
}
代表我選擇P這個Tag讓文字變成綠色的

自創id和class

到後面CSS樣式很多，同一個tag不可能都只用一樣的樣式，這時候id和class自創屬性給他們就相當的實用，而且大多數的時候建議不要擅自改變tag的原生屬性以免將來很難維護。

在html檔案裡面繕寫

1
2

<div id="green">Yahoo!</div>
<p class="blue">Hello!</p>

在CSS裡像以下為他們冠上屬性

1
2
3
4
5
6

#green {
	color: green;
}
.blue {
	color: blue;
}

注意！一個id在body裡面只能使用一次！

逗號(,)為一次選擇多個

1
2
3
4
5
6
7

h1 {
	color: blue;
}

h2 {
	color: blue;
}

可以簡寫為

1
2
3

h1, h2 {
	color: blue;
}

選擇一個tag裡的另一個tag

我們可以選擇一個tag裡的幾個tag改變他們的樣式

1

<div class="content">Hello, my name is <strong class="name">Kurt</strong>, how are you?</div>

此時我只想改變這個content裡的name

1
2
3

.content .name {
	color: blue;
}

選擇擁有該屬性的tag

很多時候tag會加入一些其他的元素，我們也可以利用這個元素來讓CSS選擇到此tag

1
2
3

<h2 title="index">Hello world</h2>

<h2>Hello world</h2>

我們用利用給他的元素title讓CSS做選擇

1
2
3

[title] {
	color: red;
}

當然也可以指定明確

1
2
3

[title=index] {
	color: red;
}

當陣列裡面有很多物件要怎麼讓程式自己一筆一筆撈出來呢？

1
2
3
4
5
6
7
8
9
10
11
12

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

app.controller('StoreController', function(){
  this.products = gems;
//命名上複數加S會讓可讀性更佳
});

var gems = [
  { name: 'Azurite', price: 2.95 },
  { name: 'Bloodstone', price: 5.95 },
  { name: 'Zircon', price: 3.95 }
];

使用ng-repeat實作在HTML的DOM裡面

1
2
3
4
5
6
7
8

<div class="product row" ng-repeat="product in store.products">
//命名product一筆一筆去撈store.products裡陣列裡的每一個物件
	<h3>
    {{product.name}}
    <em class="pull-right">${{product.price}}</em>
//呼叫剛剛命名的product裡的每一個物件的東西
  </h3>
</div>

應該會把gems裡每一個物件的name和price一行一行全部列出來。

Controller是操縱功能的Directive，包含在Module之下，在JS創造的方式也與function十分相似。

實作範例：

1
2
3
4
5
6
7
8

var gem = { name: 'Azurite', price: 2.95 };
//創造一個物件
var app = angular.module('gemStore', []);
app.controller("StoreController", function(){
  this.product = gem;
  //把物件帶入this.product
});
//因為我們創造的模組名稱是app，所以要用app.controller創建

1
2
3
4
5
6
7
8
9
10

<body ng-controller="StoreController as store">
//把controller導入body的DOM並給他名稱store
  <div class="product row">
    <h3>
      {{store.product.name}}
      <em class="pull-right">{{store.product.price}}</em>
//之後要拿這個controller的東西要用store.product去拿
    </h3>
  </div>
</body>

正常來說就會顯示gem裡面的name和price囉！
直得一提的是這個Controller裡的東西只有在這個DOM裡面使用！！

錯誤的範例如下：

1
2
3
4
5
6
7
8
9
10

<div ng-controller="StoreController as store">
</div>
//Controller使用的DOM已經結束了！！
<div>
  <h3>
    {{store.product.name}}
    <em class="pull-right">{{store.product.price}}</em>
  </h3>
</div>
//這時候什麼東西都抓不到囉！

以上是基本Module裡的Controller與HTML溝通，跟原生JavaScript的function使用方法一樣，裡面也可以放物件和功能，但他一定要有主人(Module)帶領他唷！

參考上一篇[Angular-1]初探Angular-1]的文章，教學影片給我們Angular的小總結，如下附圖：

最近開始研究Angular1的框架，參考的是code school的Shaping up with angular.js，裡面的教學引導性超高，不排斥英文的人要學習Angular1的話非常推這個管道！他們還為這個教學做了主題曲XD。

第二個管道Angular的官方網站教學也做得不錯，但教材有點舊，而且他們也很推code shcool的教學。

p.s:Angular現在有出2，但玩法跟1差蠻多的而且還算在測試階段，有興趣的就去另外找資源哦！

基本認識

###Directive:
Angular特有的標籤，ng-app，ng-controller等等的標籤時常綁在html的DOM上面。

###Expression:
Angular特有的物件用法，所有的東西可以用雙括號{ { } }包住，例如直接在HTML輸入This is 10後，pring出來的訊息是This is 10。

簡單架設環境

用簡易的CDN帶入Angular套件和最常搭配的Boostrap樣式即可打簡單的code囉！

1 2	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

取之模組用之模組

Angular的世界通常是在JS檔案裡面自創模組後插入HTML的DOM裡面互動。

以下一個簡單的範例：

1

var app = angular.module("gemStore", []);

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html ng-app="gemStore">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body>
    <h1>{{"Hello, Angular!"}}</h1>
  </body>
</html>

應該可以看到pring出簡單的Hello, Angular!

參考來源：Shaping up with angular.js