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...

14,576 Responses

  1. NABAKAWLBIXnz表示:

    buy bystolic online bystolic 5 mg uk purchase nebivolol online cheap

  2. Rlwxkt表示:

    cheap gloperba best ed pill for diabetics order clopidogrel 75mg generic

  3. JasonHop表示:

    canadian pharmacy online canada pharmacy online

  4. Chelsaepisn表示:

    essay writing services
    best college essay writing services
    custom essays toronto

  5. I know this is not exactly on topic, but i have a blog using the blogengine platform as well and i’m having issues with my comments displaying. is there a setting i am forgetting? maybe you could help me out? thank you.

  6. Cmnojr表示:

    colchicine 0.5mg without prescription gloperba pill order generic clopidogrel 75mg

  7. Calvindit表示:

    overseas pharmacy no prescription no prescription needed canadian pharmacy

  8. JasonHop表示:

    ed drugs list pills for erection

  9. Fzigid表示:

    gloperba pills buy plavix online order plavix 75mg generic

  10. Calvindit表示:

    zithromax antibiotic without prescription bactrim and sepra without a presription

  11. 야동박스表示:

    Awesome post. It’s so good to see someone taking the time to share this information

  12. BABAKAWLBIXnu表示:

    nebivolol 5 mg drug bystolic 5 mg uk bystolic

  13. Nanicepisn表示:

    what is the best college essay editing service
    cheap custom essay writing
    help writing an essay for college

  14. Michaeljit表示:

    canadian pharmacy 24h com safe canadian pharmacy 24 com

  15. Ovqvrb表示:

    purchase prograf pill trandate 100mg brand purchase fenofibrate pills

  16. Riazsh表示:

    purchase prograf purchase ropinirole generic order tricor 200mg generic

  17. Iouuyc表示:

    tacrolimus 5mg sale tacrolimus pills order fenofibrate generic

  18. BABAKAWLBIXha表示:

    buy nebivolol 5 mg sale nebivolol 5 mg sale buy nebivolol pill

  19. BABAKAWLBIXtx表示:

    nebivolol 10 mg price oral bystolic 5 mg bystolic brand

  20. JasonHop表示:

    best canadian pharmacy canada cloud pharmacy

  21. Charitapisn表示:

    essay writers canada
    write my essay for me
    help with my essay

  22. JasonHop表示:

    online pharmacy discount code us pharmacy no prescription

  23. Calvindit表示:

    cheap bactrim buy cheap zithromax online

  24. Efgiqi表示:

    avapro cost famotidine 20mg oral buy pepcid 40mg

  25. Michaeljit表示:

    buy cheap amoxicillin buy cheap doxycycline

  26. HaroldNails表示:

    Что такое гибкие кабели?
    Самый простой кабель – это одножильный провод с пластиковой оболочкой.
    Он может гнуться и сохраняет этот изгиб – если вы не делаете это слишком часто, потому что иначе провод ломается.
    Такие простые кабели используются в домашних установках.
    После установки кабель остается нетронутым в течение десятилетий.
    Такие твердые провода не подходят для многих других применений, где кабели должны быть гибкими и эластичными.
    Здесь проводники в жилах состоят из нитей – пучков тонких проволок, которые можно сгибать миллионы раз, в зависимости от конструкции, не ломая и не теряя свойств тока или передачи данных.
    Одно из самых неприятных мест для кабеля – тяговая цепь. Здесь кабели питания, сервопривода и передачи данных расположены близко друг к другу и перемещаются вперед-назад по мере работы машины.
    Иногда со скоростью более пяти метров в секунду с ускорением, превышающим ускорение силы тяжести более чем в пять раз.
    Кабели проложены в тяговой цепи таким образом, что они изгибаются только в одном направлении.
    КГ 1х35

  27. Calvindit表示:

    best online pharmacy no prescription us pharmacy no prescription

  28. Xgfdkb表示:

    order avapro pills clobetasol medication brand famotidine

發佈留言

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