7 小時學會 AngularJS

學習 AngularJS 與 JavaScript 的觀念、設計自訂 directive、建造單頁網路應用
4.6 (10 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
157 students enrolled
$200
Take This Course
  • Lectures 54
  • Length 7 hours
  • Skill Level All Levels
  • Languages Traditional Chinese, captions
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2016 Traditional Chinese Closed captions available

Course Description

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

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

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

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

學生評論

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

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

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

你會在這門課完成:

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

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

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

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

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

What are the requirements?

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

What am I going to get from this course?

  • 學習 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 課程的大幅度折扣!

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 準備開始
02:30

簡介這門課程的學習主題。

01:20

介紹這門課如何提示你注意重要的專有名詞。

Article

使用高解析度模式觀看影片獲得最佳體驗,這個影片介紹如何觀看高解析度課程影片。

Section 2: Model 與 View 搭配各種元件
06:03

AngularJS 要如何解決使用 jQuery 等工具建造大型應用產生的問題?

02:48

AngularJS 的基礎架構。AngularJS 符合的架構包含 MVC, MVVM, MV*。

05:23

瀏覽器可以讀取和處理 HTML 元素屬性。而我們可以利用自訂 HTML 屬性,將資料儲存在 HTML 元素內。

05:12

什麼是全域命名空間的汙染? 它為何是不好的? 我們要如何避免?

Article

未來大部份的課程都會搭配程式碼。這裡介紹如何取得程式碼。

09:20

AngularJS 讓你能藉由模組、app 與 controller 控制 DOM - 而不會汙染全域命名空間。

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

Section 3: Service 和 Dependency Injection
04:45

它是 AngularJS 需要的程式碼技巧。Dependency Injection 是什麼?

04:56

認識第一個 AngularJS service。非常重要的 scope 概念。

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

04:01

在 JavaScript 每一個物件都是函式,而函式可以被轉換成字串。

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

03:03

AngularJS 如何實現 Dependency Injection?

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

20:27

你可以使用許多內建的 AngularJS service,而網路上有更多的第三方 service。要如何用簡單的方式取得且使用第三方 service 呢?

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

03:05

JavaScript 陣列是弱型別的容器;可以用來放置任意物件,也包含函式。

11:10

介紹 AngularJS 的 controller 程式碼要如何處理才不會因為 minification 而失效。

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

Section 4: 資料連結與 Directive
09:58

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

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

13:13

AngularJS 最好的功能之一就是雙向資料連結。這堂課我們會來練習這個功能。

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

03:21

AngularJS 藉由事件迴圈實現許多功能。事件迴圈是什麼?

17:28

AngularJS 延伸事件迴圈的功能,加上了監看器建立了 Digest Loop。讓我們來了解 Digest Loop 是什麼。

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

19:51

讓我們來討論 AngularJS 開發時最常用到的 directive。

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

04:13

讓我們來學習更多的 AngularJS directive。

09:14

這堂課會討論一個重要的核心概念,適用於所有現代網路應用。

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

13:17

這堂課會討論如何使用 AngularJS $http service 向伺服器傳送及取得資料。

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

Section 5: 單頁網路應用
04:37

目前為止我們只有遇到過一個 controller 搭配一個 view,而 AngularJS 允許我們使用更多。

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

08:47

井號是的功能是什麼? 為甚麼它對於單頁網路應用非常有用?

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

14:37

AngularJS 如何使用井號幫助我們開發單頁網路應用。這和 AngularJS routing 有關。

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

06:26

了解 AngularJS routing 架構如何實現單頁網路應用。

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

Section 6: 自訂 Service
06:09

你需要了解 singleton 的概念才能了解 AngularJS service。singleton 是什麼?

12:59

這堂課會建立我們的第一個自訂 service 並使用於我們的單頁網路應用。

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

Section 7: 自訂 Directive
02:24

HTML5 提出了一個概念雖然沒有盛行,但它相當重要值得學習: Web Components。

06:32

AngularJS 對變數與 HTML 屬性名稱作了一些有趣的調整。有哪些事情是你需要知道的?

Angular 與 Normalized 屬性名稱
1 question
18:37

建立我們的第一個 AngularJS 自訂 directive 並了解它的語法。

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

03:12

如果 directive template 過於龐大該怎麼辦? 這裡提供使用 templateUrl 屬性解決的方法。

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

13:29

這堂課會介紹具有隔離 scope 的自訂 directive。一開始會先介紹 @ 符號與單向資料連結。

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

05:59

介紹更多關於具有隔離 scope 的自訂 directive。這堂課介紹 = 符號與雙向資料連結。

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

10:27

這是關於具有隔離 scope 的自訂 directive 系列課堂的最後一個部份。這堂課討論 & 符號與函式。

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

03:30

在 ng-repeat 內部使用自訂 directive。

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

18:06

Compile 這個詞在自訂 directive 內部的意義(與功能)是什麼? pre-link 與 post-link 是什麼?

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

03:04

AngularJS 自訂 directive 的 link 屬性是什麼意思?

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

05:44

討論 transclusion 這個名詞並了解它在 AngularJS 自訂 directive 的意義。

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

Section 8: 讓我們快速打造網路應用
12:48

是時候打造我們的第一個完整的 AngularJS 單頁網路應用了。讓我們來做一個天氣預報應用!

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

05:17

我們添加了一個自訂 service 到我們的天氣預報單頁網路應用。

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

18:07

藉由 API 呼叫向外部取得資料,給天氣預報應用使用。

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

07:40

繼續添加資料給天氣預報網路應用使用。

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

13:43

我們將一些程式碼包裝成自訂 directive,可供網頁應用重複使用。

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

00:32

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

Section 9: 額外獎勵講座
06:05

藉由 ng-submit 的幫助,我們可以改進單頁網路應用的使用者體驗。修改程式碼,讓點擊 Enter 鍵盤按鍵代替點擊頁面按鈕。

07:16

藉由將 API 呼叫相關程式碼包裝成自訂 service 來改善架構。

10:49

介紹熱門的 controller as 語法作為 $scope 的替代方案。介紹它的使用時機與優點。

Section 10: 準備好在 2016 年使用 AngularJS 2.0 開發
08:12

關於如何在 2016 年及未來準備好使用 AngularJS 2.0 。

更新資料 #1 - 連結
Article
Section 11: Conclusion
餞別禮
Article
01:47

感謝您選擇 「7 小時學會 AngularJS」 這門課!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

慕課 癮科技, Udemy台灣合作夥伴

癮科技為台灣知名科技媒體網站,於2005年成立。根據全球數據監測公司 Alexa 測量,癮科技每月有189萬名不重複使用者(UV)。科技新聞媒體網站流量台灣第三。

致力於將科技帶入生活,提供專業的科技新聞、產品開箱、技術課程。也與網友分享許多科技⽣生活新知,另外更 透過許多深度分析、實測觀點的專欄,讓科技更貼近網友們的生活。

慕課為癮科技成立之線上教育品牌,希望讓每個人的學習不受阻礙。

有更多的詳情歡迎與我們聯絡。

Instructor Biography

Anthony Alicea, Software Developer, Architect, and UX Designer

Newly married in Cleveland Ohio, Tony is primarily focused these days on trying to be a good husband. While inexperienced at that, he's quite experienced in all things web.

Tony has been programming since he was 12 years old, and got into web sites and web application development at 16. After graduating with a Computer Science degree from Case Western Reserve University, Tony continued with that interest as a Microsoft certified software application developer and architect, database designer, and user interface designer.

His experience has ranged across technologies such as HTML5, CSS3, ASP .NET MVC, JavaScript, jQuery, KnockoutJS, AngularJS, NodeJS, LESS, Bootstrap, SQL, Entity Framework and more.

He believes strongly that deeply understanding any topic allows you to properly learn it and, even more importantly in a real-world environment, quickly overcome problems.

He also has a deep interest in human nature and behavior, and how that impacts human-computer interaction. This interest translated into extending his career into user experience design and usability research.

Another link in the chain is his 25 years of experience in public speaking and teaching, both in front of large groups and as a one-on-one private instructor.

Putting all these pieces together, he has spent his career listening to a client need, designing a database and software to meet that need, building it, testing it, teaching others how to use it, then improving user experience by watching people actually use it and adjusting accordingly.

Tony loves teaching every aspect of what he does, and even more loves teaching in a way that imparts understanding, as opposed to just examples intended to be parroted. He loves that moment when a student 'gets it', and that's what he wants for you when you take one of his courses.

He has found that those that learn purely by example, and not by understanding, end up much more limited than they need to be.

"Examples need to be built on top of context, and once you have context, you can not only copy the examples you find, but adjust and improve upon them."

He firmly believes that everyone has the ability to develop software, if they are just taught properly. Including you.

"It is my pleasure and privilege to teach you. I hope you'll come away knowing something you didn't before, understanding at a level deeper than before, and feeling positive that you can accomplish what you've set out to accomplish. Thank you!" - Tony Alicea

Ask Tony a question, read a post, or follow him around internet.

Instructor Biography

劉得祺 Derek Liu, 翻譯者、前端工程師

嗨,我是 Derek Liu,我向網路學習,喜愛翻譯與分享教學資源。

身為 1990 年出生的網路世代,我相信知識的分享與傳遞能夠讓更多人得益,我也相信在不久的未來,網路會成為每一個人的教室。

我期許自己能持續翻譯教學資源,為教育貢獻一份心力。

Ready to start learning?
Take This Course