- 以下文章為個人翻譯版本，若有翻譯不詳細部分，歡迎指正（或是老娘自己看爽，你可以不要太認真地看）
- 文章內包含很多個人註記或外部連結，有興趣的就自己看看...
AngularJs Free Course 網址http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
歡迎來到與Angular一同成長的課程!
在第一階段，我們即將開始介紹 – 什麼是Angular？
這堂課中，我們將展示使用Angular一起建立應用程式，和介紹Angular應用程式中主要的元素。
（↓下圖）
讓我們針對響應式的世界再挖掘更深一點，看看我指的是什麼？
你可以看到在這下面，我們甚至能使用底下表單的去新增回應。
（↓下圖）
在第一階段，我們即將開始介紹 – 什麼是Angular？
這堂課中，我們將展示使用Angular一起建立應用程式，和介紹Angular應用程式中主要的元素。
（↓下圖）
若您即將開始學習Angular，您需要十分熟悉HTML& CSS，也需要懂得Javascript。
如果您還不熟悉Javascript，網路上有非常多十分棒的課程，您應該去看看。
除此之外，若您懂得一些測試工具，也 將十分有助益：行為驅動開發、測試驅動開發…等。
因為Angular是很容易被測試的，而您應該使用專業的應用程式去這麼做。
Angular僅僅是前端的程式框架，所以您只需要懂Javascript。（註1）
（↓下圖）
若您使用Javascript去建立一個動態網站，您可能會想要使用Angular。
Angular會協助您組織您的Javascript程式。
它會協助您建立一個響應式網站，這表示 – 它們將可以快速取用輸入項目。
又如果您剛好很熟悉jQuery，Angular和jQuery擁有非常好的相容性。
正如先前提到的，Angular能夠非常方便的測試，這表示您可以建立一個可維護的軟體。
（↓下圖）
讓我們針對響應式的世界再挖掘更深一點，看看我指的是什麼？
這是程式學院的網站，你可以看到 – 當我們點擊了一個連結，例如screencasts這個項目。
（↓下圖）
網頁閃動了一下，然後重新載入這個網頁…
然後我們可以再點其他東西，然後開始處理並帶入你在網頁上看到的其他東西…
這是傳統網頁回應的循環，但在這背後的運作又是如何呢？
（↓下圖）
來看看這是我們的瀏覽器和網站伺服器。（↓下圖）
瀏覽器即將開始對伺服器提出要求…
伺服器回應網站的各項元件和HTML、Javascript，而瀏覽器載入了整個網頁。
（↓下圖）
但是當使用者再度點擊了另一個連結，再次產生一個新的要求，而伺服器回應了一個新的網頁和所有的元件。
但是當使用者再度點擊了另一個連結，再次產生一個新的要求，而伺服器回應了一個新的網頁和所有的元件。
瀏覽器將再度載入整個網頁。
事實上，這麼做並沒有非常有效率。
（↓下圖）
所以，我們來看看一個新的範例，而這次就是我所謂的響應式。
所以，我們來看看一個新的範例，而這次就是我所謂的響應式。
這是我們目前課程的網站，你可以看到當我點擊了頁面上的項目，網頁重新整理的速度變得十分顯著。
（↓下圖）
這個網頁每次被點擊連結時都即時回應並也十分快速。
（↓下圖）
這個網頁每次被點擊連結時都即時回應並也十分快速。
（↓下圖）
所以到底發生了什麼事呢？
在這背後，當瀏覽器第一次的要求被提出，而伺服器回應了你可能已經預期的網頁和元件，而瀏覽器載入整個網頁。
而這一次，當使用者點擊了一個連結，某件不一樣的事情即將發生了…
（↓下圖）
這次僅僅要求了你需要的資訊去更新網頁。
這次僅僅要求了你需要的資訊去更新網頁。
在這個案例中，僅抓取了一些Json的資料。
一旦瀏覽器擁有這些資料，它將僅載入這些資料到既存的網頁並且更新我們在瀏覽器上面看到的資訊。
（↓下圖）
（↓下圖）
而這些逐一產生的資料是由我們的應用程式所建立，應用程式可能在行動裝置（例如iOS）的介面上這樣做，也可能建立應用程式讓其他開發者可以透過它再建立某些應用程式。
它也可能建立一個應用程式去使得前端應用程式透過它來做溝通 - 正如我們在這堂課中使用Angular建立的這個。
Angular的基本定義是：
所以在接下來的課程，我們將使用Angular去建立一個前端應用程式，並使它能和後端應用程式做溝通。
但課程中將不建立後端應用程式，我們只專注於前端。
（↓下圖）Angular的基本定義是：
它是一個使用者端的Javascript框架可與HTML增加互動 – 我們需要找出如何告訴HTML哪時必須觸發Javascript。
下面我們有一些HTML，而我們該如何告訴它 – 何時要跳出警告視窗呢？
（↓下圖）
（↓下圖）
在Angular裡面，我們需要透過Directives（指令）去新增這個行為。
Directives（指令）是在HTML標籤中的一種標記，這種標記會告訴Angular去執行或參照某些Javascript程式。
所以這裡的答案是 – 增加ng-controller這個自訂屬性(attribute)（註3）到HTML的<Body>裡面，讓它等於Javascript函式的名稱「StoreController」。
（↓下圖）
所以這裡的答案是 – 增加ng-controller這個自訂屬性(attribute)（註3）到HTML的<Body>裡面，讓它等於Javascript函式的名稱「StoreController」。
（↓下圖）
若我們執行這個HTML，我們將會看到這個警告視窗。
當然這是一個非常有限的範例，你可能永遠不需要寫一個像這樣的Angular程式。
但你可透過這個範例知道Directives（指令），和我們如何綁定行為。
接下來的課程，珠寶商店才是即將被建立的應用程式。
（↓下圖）
再來，您可以在以下頁面中看到我們有一些不同的產品縮圖。
（↓下圖）
再來，您可以在以下頁面中看到我們有一些不同的產品縮圖。
我們可以開啟不同的產品資訊和預覽。
（↓下圖）
你可以看到在這下面，我們甚至能使用底下表單的去新增回應。
（↓下圖）
如果您想要開始使用Angular，第一步，請由官方網站下載Angular程式庫。
在這堂課程中，我們也將使用Twitter Bootstrap（註2），而您也可能想要一併下載。
請隨意選用。
（↓下圖）
讓我們開始先從HTML撰寫。
你可以看見以下，我們有包含Twitter Bootstrap的CSS，和綁定已經下載的Angular的程式庫。
接下來，關於 Angular應用程式的元件，我們即將學習的是Modules（模組）。
Modules（模組）是我們撰寫的Angular應用程式裡的各個小函式-這可以讓我們保持程式的相依性 - 這可以讓我們的程式變得更好維護、更容易測試和更好閱讀。
而我們可以在這其中定義應用程式的各種相依性，使我們可以執行一個Modules（模組）並告訴程式 – 這個Modules（模組）依附在其他兩個Modules（模組）上。
（↓下圖）
（↓下圖）
所以我們無須太訝異，你必須寫一行簡短的程式在Modules（模組）的程式列上。
我們要寫下 var app（這是應用程式application的縮寫） = angular（這是代表Angular的程式庫）.module（因為我們要建立模組）
然後我們給予這個模組一個名稱「store」，並在後方我們定義相依性。
但我們目前沒有任何模組之間的相依性，所以我們留下[]，程式就是這樣寫的。
（↓下圖）
我們將這一小段程式碼寫在檔名為app.js的檔案中，然後我們要在HTML中包含它。就像下方您所看到的方式：
（↓下圖）
我們也需要增加對應的自訂屬性到HTML標記中，在這個案例裡，加上ng-app=”store”，記住ng-app是另一種Directives（指令），這個Directives（指令）建立一個當文件載入時會執行Modules（模組）的Angular應用程式。
（↓下圖）
我們也需要增加對應的自訂屬性到HTML標記中，在這個案例裡，加上ng-app=”store”，記住ng-app是另一種Directives（指令），這個Directives（指令）建立一個當文件載入時會執行Modules（模組）的Angular應用程式。
（↓下圖）
這個Modules（模組）還未開始做任何事情，僅是先將它寫入HTML元素中，讓它觸發這HTML元素中有包含的Angular應用程式。
到這裡，表示我們可以開始撰寫運算式。
運算式使得你可以插入動態數值到你的HTML中。
以下是使用數字處理的基本範例：
我們寫下 I am {{ 4 + 6 }}
這在頁面執行後將顯示 I am 10
再來我們可以使用字串處理，我們寫下 {{ “hello” + “ you” }} ，這將被計算為您所預期會得到的 hello you。
再來我們可以使用字串處理，我們寫下 {{ “hello” + “ you” }} ，這將被計算為您所預期會得到的 hello you。
（↓下圖）
在Angular中，我們必須使用大量的運算處理，如果您想知道更多，請參考這個網址。
所以，如果我搬移hello you到我們的Angular應用程式裡，而我在本基瀏覽器上載入時會發生什麼事呢？
（↓下圖）
Hello you – 正如你所預期的一樣。
（↓下圖）
Hello you – 正如你所預期的一樣。
（↓下圖）
所以這門課中，我們學習到了Directives（指令）、Modules（模組）和運算式。
你何不試試將這些都運用到我們的測驗中呢？
測驗網址：http://campus.codeschool.com/courses/shaping-up-with-angular-js/level/1/section/1/creating-a-store-module
ng-app=”store”
{{ “hello” + “ you” }}
註釋：
註1：前端（front-end)維基百科-http://zh.wikipedia.org/wiki/%E5%89%8D%E7%AB%AF%E5%92%8C%E5%90%8E%E7%AB%AF
註2：Bootstrap維基百科-http://zh.wikipedia.org/wiki/Bootstrap
註3：attribute自訂屬性-為了與preperty（屬性）有所區別，在文章中都這樣翻譯，如果想知道更多關於這兩者之間的差異，可以搜尋一下網路的文章參照。
本章複習：
這一章我們有學習到的
Directives（指令）：
ng-controller = "StoreController"ng-app=”store”
Modules（模組）：
var app = angular.module('store',[]);運算式：
{{ 4 + 6 }}{{ “hello” + “ you” }}
沒有留言:
張貼留言