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,117 Responses

  1. HomerFaw表示:

    https://kamagrapotenzmittel.shop/# Kamagra Oral Jelly kaufen

  2. HomerFaw表示:

    http://apotheekmax.com/# ApotheekMax

  3. Michaeltor表示:

    Online apotheek Nederland met recept: Beste online drogist – online apotheek

  4. Derekgroum表示:

    apotek online recept: Apoteket online – Apotek hemleverans idag

  5. Louislen表示:

    http://apotheekmax.com/# ApotheekMax

  6. Michaeltor表示:

    Kamagra kaufen: Kamagra online bestellen – Kamagra Oral Jelly kaufen

  7. 늑대닷컴表示:

    Great post. I was checking continuously this blog and I’m impressed! Very helpful info particularly the remaining section 🙂 I handle such info a lot. I used to be seeking this particular info for a long time. Thank you and good luck.

  8. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:ремонт крупногабаритной техники в москве
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  9. Michaeltor表示:

    apotek online recept: Apotek hemleverans recept – Apotek hemleverans idag

  10. HomerFaw表示:

    https://kamagrapotenzmittel.shop/# Kamagra online bestellen

  11. Malcolmseern表示:

    Kamagra kaufen kamagra Kamagra online bestellen

  12. Derekgroum表示:

    Apotek hemleverans recept: apotek pa nett – apotek online

  13. 늑대닷컴表示:

    Hi there! Do you know if they make any plugins to protect against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?

  14. Malcolmseern表示:

    kamagra Kamagra Oral Jelly kaufen Kamagra Original

  15. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем:сервис центры бытовой техники москва
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  16. Louislen表示:

    https://kamagrapotenzmittel.com/# Kamagra kaufen ohne Rezept

  17. Michaeltor表示:

    Kamagra Gel: Kamagra Oral Jelly – Kamagra kaufen ohne Rezept

  18. Michaeltor表示:

    Apotek hemleverans recept: Apotek hemleverans idag – apotek online recept

  19. HomerFaw表示:

    https://kamagrapotenzmittel.com/# Kamagra Oral Jelly kaufen

  20. HomerFaw表示:

    https://kamagrapotenzmittel.shop/# Kamagra kaufen ohne Rezept

  21. Louislen表示:

    https://kamagrapotenzmittel.com/# Kamagra Oral Jelly

  22. Michaeltor表示:

    Kamagra Original: kamagra – Kamagra Oral Jelly

  23. Malcolmseern表示:

    apotek pa nett Apotek hemleverans recept apotek online recept

  24. Добро пожаловать на sofisimo.com, интересную информацию.
    Узнайте больше о sofisimo.com, современные идеи.
    С sofisimo.com вы всегда на шаг впереди, открывая.
    Платформа sofisimo.com для всех, что-то новое.
    sofisimo.com – ваш помощник в обучении, учась.
    Станьте частью сообщества на sofisimo.com, найти поддержку.
    Платформа sofisimo.com наполнена вдохновением, инновации.
    sofisimo.com – ваша платформа для успеха, откройте.
    Путешествие начинается на sofisimo.com, где.
    sofisimo.com: соединение знаний и практики, всему, что нужно.
    Проведите время с пользой на sofisimo.com, вы найдете.
    sofisimo.com – это ваш надежный партнер, находить новые пути.
    Свяжитесь с сообществом на sofisimo.com, обсуждение.
    Выберите sofisimo.com для новизны, учиться.
    Узнайте секреты успеха на sofisimo.com, для вашей карьеры.
    Вступайте в сообщество sofisimo.com, возможность для всех.
    Станьте частью sofisimo.com сегодня, ваши мечты становятся реальностью.
    Ищите новую информацию на sofisimo.com, творчество не имеет границ.
    sofisimo.com – платформа для инноваций, развивать свои навыки.
    sillones para oficina sillones para oficina .

  25. Michaeltor表示:

    Online apotheek Nederland met recept: Apotheek Max – Betrouwbare online apotheek zonder recept

  26. HomerFaw表示:

    http://apotheekmax.com/# Apotheek Max

  27. HomerFaw表示:

    https://apotheekmax.shop/# Beste online drogist

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

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