Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

7 小時學會 AngularJS

Name: 7 小時學會 AngularJS
Rating: 4.9 (72 reviews)

學習 AngularJS 與 JavaScript 的觀念、設計自訂 directive、建造單頁應用程式

Highest Rated

Created by慕課慕課, Anthony Alicea, TC Liu

Last updated 7/2016

Chinese (Traditional)

What you'll learn

學習 JavaScript 的基本概念，了解它如何增進 AngularJS 的功能。
藉由探索 AngularJS 本身的架構來學習如何撰寫具有良好效能與品質的 AngularJS 程式碼。
熟悉 AngularJS 專有名詞，例如 dependency injection, service, directive, transclusion, 等等。
了解 dependency injection 以及了解 AngularJS 如何實現它。
設計自訂 directive 讓元件能夠重複使用，節省精力與時間。
了解單頁網路應用（Single Page Application）和運作原理。
利用 AngularJS 建立單頁網路應用（Single Page Application）。
你能夠比其他開發者更了解 AngularJS 並向其他人解釋 AngularJS。
由 2015 年更新的免費課程獲取 AngularJS 2.0 最新消息，並取得 2016 年 AngularJS 2.0 課程的大幅度折扣！

Course content

11 sections • 54 lectures • 6h 53m total length

簡介2:30

簡介這門課程的學習主題。
AngularJS 專有名詞1:20
介紹這門課如何提示你注意重要的專有名詞。
使用高解析度模式觀看課程影片0:12
使用高解析度模式觀看影片獲得最佳體驗，這個影片介紹如何觀看高解析度課程影片。

AngularJS 想要解決的問題6:03
AngularJS 要如何解決使用 jQuery 等工具建造大型應用產生的問題?
Model 與 View 搭配各種元件2:48
AngularJS 的基礎架構。AngularJS 符合的架構包含 MVC, MVVM, MV*。
HTML 方面: 自訂屬性5:23
瀏覽器可以讀取和處理 HTML 元素屬性。而我們可以利用自訂 HTML 屬性，將資料儲存在 HTML 元素內。
JavaScript 方面: 全域命名空間5:12
什麼是全域命名空間的汙染? 它為何是不好的? 我們要如何避免?
下載這門課程的程式碼0:25
未來大部份的課程都會搭配程式碼。這裡介紹如何取得程式碼。
模組、App 與 Controller9:20
AngularJS 讓你能藉由模組、app 與 controller 控制 DOM - 而不會汙染全域命名空間。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。

JavaScript 方面: Dependency Injection4:45

它是 AngularJS 需要的程式碼技巧。Dependency Injection 是什麼?
Scope Service4:56
認識第一個 AngularJS service。非常重要的 scope 概念。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
JavaScript 方面: 函式與字串4:01
在 JavaScript 每一個物件都是函式，而函式可以被轉換成字串。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
AngularJS 如何實現 Dependency Injection?3:03

AngularJS 如何實現 Dependency Injection?

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
取得其他 Service20:27
你可以使用許多內建的 AngularJS service，而網路上有更多的第三方 service。要如何用簡單的方式取得且使用第三方 service 呢?

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
JavaScript 方面: 陣列與函式3:05
JavaScript 陣列是弱型別的容器；可以用來放置任意物件，也包含函式。
Dependency Injection 和 Minification11:10
介紹 AngularJS 的 controller 程式碼要如何處理才不會因為 minification 而失效。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。

Scope 與 Interpolation9:58
撰寫第一個 AngularJS 使用者介面。我們已經學會使用 scope service ，接著讓我們使用它在網頁上顯示內容。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Directive 與雙向資料連結13:13
AngularJS 最好的功能之一就是雙向資料連結。這堂課我們會來練習這個功能。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
事件迴圈（Event Loop）3:21
AngularJS 藉由事件迴圈實現許多功能。事件迴圈是什麼?
監看器與 Digest Loop17:28
AngularJS 延伸事件迴圈的功能，加上了監看器建立了 Digest Loop。讓我們來了解 Digest Loop 是什麼。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
常見的 Directive19:51
讓我們來討論 AngularJS 開發時最常用到的 directive。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
常見的 Directive（第二部份）4:13
讓我們來學習更多的 AngularJS directive。
JavaScript 方面: XMLHTTPRequest 物件9:14
這堂課會討論一個重要的核心概念，適用於所有現代網路應用。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
取得外部資料與 $http13:17
這堂課會討論如何使用 AngularJS $http service 向伺服器傳送及取得資料。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。

AngularJS 方面: 多重 Controller 與多重 View4:37
目前為止我們只有遇到過一個 controller 搭配一個 view，而 AngularJS 允許我們使用更多。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
HTML 與 JavaScript 方面: 單頁網路應用與井號（Hash）8:47
井號是的功能是什麼? 為甚麼它對於單頁網路應用非常有用?
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Routing、Template 與 Controller14:37
AngularJS 如何使用井號幫助我們開發單頁網路應用。這和 AngularJS routing 有關。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Routing、Template 與 Controller（第二部份）6:26
了解 AngularJS routing 架構如何實現單頁網路應用。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。

HTML 方面: 可重複使用的元件2:24
HTML5 提出了一個概念雖然沒有盛行，但它相當重要值得學習: Web Components。
JavaScript 方面與 AngularJS 方面: 變數命名與 Normalization6:32
AngularJS 對變數與 HTML 屬性名稱作了一些有趣的調整。有哪些事情是你需要知道的?
Angular 與 Normalized 屬性名稱
建立 Directive18:37
建立我們的第一個 AngularJS 自訂 directive 並了解它的語法。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Template3:12
如果 directive template 過於龐大該怎麼辦? 這裡提供使用 templateUrl 屬性解決的方法。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Scope (@, =, 以及其他 obtuse symbol)13:29

這堂課會介紹具有隔離 scope 的自訂 directive。一開始會先介紹 @ 符號與單向資料連結。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Scope (@, =, 以及其他 obtuse symbol)（第二部份）5:59
介紹更多關於具有隔離 scope 的自訂 directive。這堂課介紹 = 符號與雙向資料連結。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
Scope (@, =, 以及其他 obtuse symbol)（第三部份）10:27
這是關於具有隔離 scope 的自訂 directive 系列課堂的最後一個部份。這堂課討論 & 符號與函式。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
重複的 Directive3:30
在 ng-repeat 內部使用自訂 directive。

這堂課提供程式碼。請下載下方的檔案並解壓縮它。
了解什麼是 'Compile'18:06
Compile 這個詞在自訂 directive 內部的意義（與功能）是什麼? pre-link 與 post-link 是什麼?
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
了解什麼是 'Link'3:04
AngularJS 自訂 directive 的 link 屬性是什麼意思?
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
了解什麼是 Transclusion5:44
討論 transclusion 這個名詞並了解它在 AngularJS 自訂 directive 的意義。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。

天氣預報單頁網路應用12:48
是時候打造我們的第一個完整的 AngularJS 單頁網路應用了。讓我們來做一個天氣預報應用!
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
自訂 Service5:17
我們添加了一個自訂 service 到我們的天氣預報單頁網路應用。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
連結資料（第一部份）18:07
藉由 API 呼叫向外部取得資料，給天氣預報應用使用。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
連結資料（第二部份）7:40
繼續添加資料給天氣預報網路應用使用。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
自訂 Directive13:43
我們將一些程式碼包裝成自訂 directive，可供網頁應用重複使用。
這堂課提供程式碼。請下載下方的檔案並解壓縮它。
一些註記0:32

不到一分鐘的簡短個人註記來評論課程。

藉由 ng-submit 改進單頁網路應用的使用者體驗6:05
藉由 ng-submit 的幫助，我們可以改進單頁網路應用的使用者體驗。修改程式碼，讓點擊 Enter 鍵盤按鍵代替點擊頁面按鈕。
設計供大型 AngularJS 應用使用的 Service7:16
藉由將 API 呼叫相關程式碼包裝成自訂 service 來改善架構。
巢狀 Controllers、Clean Code 與 Controller as （$scope 的替代方案）10:49
介紹熱門的 controller as 語法作為 $scope 的替代方案。介紹它的使用時機與優點。

Requirements

瀏覽器和文字編輯器
HTML 與 JavaScript 基本知識

Description

這門課包含下個新版本的資訊 - AngularJS 2.0！

了解 AngularJS 可以幫助你找到工作及增進職場能力。這個技能能讓你成為網路應用產業裡炙手可熱的開發者，讓你更容易開發網路應用，這也是 AngularJS 熱門的原因，它由 Google 所支持。

這門課會讓你很快就進入狀況，接著會教你重要的核心知識讓你完全理解 AngularJS，接著會教你如何建造 AngularJS 應用－我們很快就會完成一個單頁網路應用。

我們會在這門課設計自訂 service、建造自訂 directive、了解雙向連結的意義、設計一個能夠預測天氣的單頁網路應用、以及其他主題。這些主題都會附上範例程式碼。

學生評論

"我選擇過的最棒的課程"
"Udemy 平台上最棒的 AngularJS 簡介"
"清新的教學方法教導 AngularJS"
"Udemy 課程中我修習過的最好的課程之一"
"目前我在網路上遇到的最棒的講師"
"我學習過很多 AngularJS 課程，我認為這門課是目前最好的"
"我目前最喜歡的教學方式"

如果你沒有接觸過 AngularJS，或是你正在學習 AngularJS 但感覺仍然無法理解它，這門課程就是為你設計的！你要先理解 AngularJS 才能學會 AngularJS。

我希望當初在學習 AngularJS 時就有跟現在這門課一樣的課程。
這門課程用最合適的順序來介紹 AngularJS 的概念以及其實現的方式，讓你能夠完全的理解並學會 AngularJS。

你會在這門課完成：

了解 AngularJS 如何運作，包含的主題有：directive、dependency injection、雙向資料連結、digest loop、監看器及其他主題。
學會 AngularJS 使用的 JavaScript 與 HTML 基本原理，包含自訂 HTML 屬性、弱型別陣列、井號、以及事件迴圈。
撰寫自訂 service 程式碼。
設計自訂 directive，了解 compile，link 與 scope。
使用 AngularJS 建造單頁網路應用。
使用目前最新版本的 AngularJS - 版本 1.3!
關注 AngularJS 2.0 的最新消息!

AngularJS 不該很難學會。教學資源犯的最大的錯誤就是期待學生只藉由模仿他人的程式來學習。現實情境從來不會和教學資源完全相同。

我相信最好的學習方式是理解工具如何運作以及它能替你實現什麼，接著閱讀範例，接著自己動手做。這門課就是依照這個方式進行，讓你能夠理解並學會如何使用 AngularJS。

註記：你同時也可以在這門課取得範例程式碼。包含 'starter' 程式碼，作為課堂一開始的基礎，以及 'finished' 已完成的範例程式碼供你參考。

（聲明：購買這門課程的學生會取得我的 AngularJS 2.0 課程的大幅度優惠。該課程會在 2016 年發行，也會在 2015 年 AngularJS 2.0 正在開發時，新增新的免費講座。）

Who this course is for:

想要學習 AngularJS 的開發者與設計師
研究過 AngularJS 仍然覺得難以理解的學習者
使用過 jQuery 但對於大量手動操作 HTML 元件感到疲憊的開發者與設計師

7 小時學會 AngularJS

What you'll learn

Explore related topics

Course content

準備開始3 lectures • 4min

Model 與 View 搭配各種元件6 lectures • 29min

Service 和 Dependency Injection7 lectures • 51min

資料連結與 Directive8 lectures • 1hr 31min

單頁網路應用4 lectures • 34min

自訂 Service2 lectures • 19min

自訂 Directive11 lectures • 1hr 31min

讓我們快速打造網路應用6 lectures • 58min

額外獎勵講座3 lectures • 24min

準備好在 2016 年使用 AngularJS 2.0 開發2 lectures • 8min

Requirements

Description

Who this course is for: