AngularJS – 基本介紹篇

看完上一篇有關AngularJS的文章之後,如果你已經產生對他的興趣,接下來我們就跟著Google規劃的課程來學習,其實在AngularJS的官方網頁上,本來就有這方面的視訊教學(當然是英文的囉!),馬老師這邊只是做到整理、翻譯和提出我的一些想法,讓想要學習他的人可以更方便,官方視訊總共分成五個等級,每個等級又分成不同章節,章節結束後還都會有模擬測驗,真的推薦大家可以去看看喔!

首先檢視一下要學習AngularJS的一些背景條件:

必須要了解

  • HTML、CSS
  • Javascript

最好能懂

不是那麼重要的

  • jQuery
  • Ruby
  • Rails
  • Python
  • PHP
  • Database

必須了解的部分指的是技術領域,最好能懂的部分是指開發時的觀念

AngularJS Part1 Slide1

至於選擇AngularJS的理由有以下幾點:

  • 幫助你組織Javascript
  • 快速幫你建構動態網站
  • 可以跟jQuery合作愉快
  • 便於測試
AngularJS Part1 Slide2

接下來官方教學以ng-controller為案例,教導AngularJS是如何去呼叫函數的,不過這部分在1.3以上的版本已經不是這樣使用了要特別注意!

AngularJS Part1 Slide3

以下就針對這個案例進行程式的示範,在1.2(含)以前的AngularJS可以這樣來操作ng-controller:(在JS Bin上測試

<!doctype html>
<html ng-app>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="UTF-8">
<title>controllerExample</title>
<script>
  function myFn() {
    alert("歡迎光臨馬老師雲端研究室");
  }
</script>
</head>
<body ng-controller="myFn">
</body>
</html>

但在1.3(含)之後的AngularJS需要這樣來操作ng-controller:(在JS Bin上測試)

<!doctype html>
<html ng-app="controllerExample">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="UTF-8">
<title>controllerExample AngularJS 1.3.2</title>
<script>
angular.module('controllerExample', [])
.controller('myFn', function (){
    alert("歡迎光臨馬老師雲端研究室");
});
</script>
</head>
<body ng-controller="myFn">
</body>
</html>

根據上面的案例,來介紹利用AngularJS開發網頁時的流程和方式:

首先我們可以先建立一個模組(Module),在模組內會包含AngularJS的函式名稱、應用程式名稱(Application Name)和相關函式庫(Dependencies)。

AngularJS Part1 Slide4

上述的程式可以撰寫在一個JS檔案中,讓網頁將該檔案引用。

AngularJS Part1 Slide5

接下來在HTML標籤中加入ng-app=”Application Name”後,讓網頁在載入的時候就會自動運行該模組(Module)。

AngularJS Part1 Slide6

接下來開始介紹表達式,不過這個在上一篇案例當中我們已經有使用過了,相信大家也很容易能夠了解,也建議大家去參考視訊中提到的網頁,裡面有更多有關於表達式的說明。

AngularJS Part1 Slide7

※以上截圖部分為AngularJS官方教學視訊

You may also like...

20,689 Responses

  1. RandallLoone表示:

    canadian pharmacy review: Canadian Pharmacy AAPD – canada drugs online reviews

  2. Manuelgript表示:

    https://indianpharmacyabp.com/# Best online Indian pharmacy
    buying prescription drugs in mexico

  3. Эффективное продвижение сайтов, изучите.
    Как добиться успеха в SEO, изучайте.
    Главные советы по продвижению сайтов, трафик.
    Будущее онлайн-продвижения, которые стоит учитывать.
    Углубляемся в продвижение сайтов, которые вы должны знать.
    Актуальные стратегии SEO, которые вы должны использовать.
    Лучшие агентства по SEO, на которые можно положиться.
    Избегайте этих ошибок в SEO, которые можно исправить.
    Доступные методы SEO, попробуйте.
    Лучшие онлайн-сервисы для SEO, которые обязательны к использованию.
    Метрики для оценки эффективности, которые нельзя игнорировать.
    Как контент влияет на трафик, о чем многие забывают.
    Успех в локальном SEO, методы для вашего региона.
    Знание пользователей в продвижении, приемы, которые сработают.
    Важность мобильной версии, может стать вашим преимуществом.
    Как выбрать метод продвижения, определите свою цель.
    Почему важны бэклинки, учтите это в стратегии.
    Что нового в SEO в этом году, не пропустите.
    Сила SMM в SEO, получите новые целевые аудитории.
    Топовые практики по оптимизации, которые изменят вашу стратегию.
    seo для сайта https://1prodvizhenie-sajtov-52.ru/ .

  4. Manuelgript表示:

    https://indianpharmacyabp.com/# IndianPharmacyAbp
    mexican mail order pharmacies

  5. MorganThymn表示:

    Online medicine home delivery: Indian pharmacy international shipping – IndianPharmacyAbp

  6. MorganThymn表示:

    mexican pharmacy acp: medicine in mexico pharmacies – mexico drug stores pharmacies

  7. Charlescek表示:

    purple pharmacy mexico price list pharmacies in mexico that ship to usa mexican pharmacy acp

  8. RandallLoone表示:

    mexican pharmacy acp: mexican mail order pharmacies – mexican pharmacy acp

  9. Manuelgript表示:

    http://indianpharmacyabp.com/# Best online Indian pharmacy
    best online pharmacies in mexico

  10. Manuelgript表示:

    https://indianpharmacyabp.com/# indian pharmacy
    medication from mexico pharmacy

  11. MorganThymn表示:

    canadian pharmacy cheap: Canadian Pharmacy AAPD – ordering drugs from canada

  12. MorganThymn表示:

    canada pharmacy world: reliable canadian pharmacy reviews – canadianpharmacymeds com

  13. ErnestgeoFt表示:

    http://canadianpharmacyaapd.com/# canadian pharmacy meds
    п»їlegitimate online pharmacies india

  14. RandallLoone表示:

    canadian pharmacy ed medications: Canadian Pharmacy AAPD – legit canadian pharmacy

  15. I can’t believe how amazing this article is! The author has done a fantastic job of conveying the information in an captivating and enlightening manner. I can’t thank him enough for offering such precious insights that have certainly enhanced my awareness in this subject area. Kudos to him for creating such a work of art!

  16. Manuelgript表示:

    https://mexicanpharmacyacp.shop/# mexican pharmacy acp
    reputable mexican pharmacies online

  17. ErnestgeoFt表示:

    https://indianpharmacyabp.shop/# Indian Pharmacy Abp
    indian pharmacy

  18. Manuelgript表示:

    http://mexicanpharmacyacp.com/# mexican pharmacy acp
    mexico drug stores pharmacies

  19. Charlescek表示:

    mexican pharmacy acp mexican online pharmacies prescription drugs reputable mexican pharmacies online

  20. MorganThymn表示:

    Best online Indian pharmacy: Indian pharmacy international shipping – Best online Indian pharmacy

  21. MorganThymn表示:

    IndianPharmacyAbp: top 10 online pharmacy in india – India pharmacy ship to USA

  22. Charlescek表示:

    best canadian online pharmacy Canadian Pharmacy AAPD canada pharmacy online legit

  23. 10 Evolution Casino Site Tips All Experts Recommend
    에볼루션게이밍

  24. Maddison表示:

    15 Reasons To Not Be Ignoring Replacement Windows Maidstone window
    lock replacement maidstone – Maddison,

  25. HaroldJally表示:

    farmacia online piГ№ conveniente: Farmacie online sicure – Top Max Farma

  26. DavidVex表示:

    farmacia online piГ№ conveniente Farmacie online sicure acquisto farmaci con ricetta

  27. HaroldJally表示:

    Top Max Farma: farmacia online – top farmacia online

  28. DavidVex表示:

    Top Max Farma Farmacia online piГ№ conveniente Top Max Farma

  29. 15 Best Auto Locksmith Hertfordshire Bloggers You Must Follow best Auto
    locksmith hertfordshire (https://pajamanotify20.werite.net)

發佈回覆給「Manuelgript」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。