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

  1. An interesting discussion may be valued at comment. I do believe that you can write much more about this topic, it will not certainly be a taboo subject but usually people are insufficient to speak on such topics. An additional. Cheers

  2. jrajpyiav表示:

    Get free NFL picks and NFL parlays against the spread, for all of tonight’s games. If you see a plus sign before a set of odds, it tells you how much profit you will earn by placing a $100. A $100 bet on the Jets at +540 would net you $540 if they pulled off an upset, indicating that they are the clear underdogs. You will sometimes see +540 rendered as 6.40 (decimal odds), but you can use a betting odds calculator to turn it into American odds. Odds are originally set by oddsmakers, who are also called sports traders or bookmakers. They usually adjust their odds once bettors start wagering money. The odds can also be moved due to things like injuries or weather forecasts. If you’re completely new to sports betting, then we would suggest you start off with our help tools to get yourself up to speed. From getting to grips with betting lines to understanding specific MLB odds or College basketball odds, for example, you can walk through the whole journey with Oddspedia. At the end of the day though, the most important thing about betting will always be the odds. That’s why our ultimate goal is to help all of our users (yes, that’s you!) find the best odds for every betting line.
    https://sethjfzs394061.fitnell.com/70585146/betonline-football-odds
    There are also some states with complex sports betting laws. For example, in Rhode Island bettors used to be required to use the state lottery sports betting system and in Nevada, bettors must be on the premises of an in-person sportsbook that works with their mobile sportsbook (for example, you can use BetMGM in the MGM Grand). Since these are such special circumstances, we have decided to exclude them from our list. BettingUSA was founded in 2013 as the first 50 state guide to legal online betting in the United States, long before the expansion of legal online sports betting started taking shape in America. You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.

  3. Great site! I recommend it to everyone!tarjima kinolar

  4. Sani-flo表示:

    I actually wanted to make a brief word to say thanks to you for all the superb guidelines you are writing on this website. My considerable internet investigation has now been paid with good quality facts to exchange with my family members. I ‘d express that most of us site visitors are extremely fortunate to be in a useful website with very many brilliant people with interesting pointers. I feel really fortunate to have discovered the site and look forward to many more entertaining moments reading here. Thanks once more for a lot of things.

  5. bokep smp表示:

    Excellent article! We are linking to this particularly great article on our website. Keep up the good writing.

  6. This website was… how do you say it? Relevant!! Finally I’ve
    found something which helped me. Thank you!

  7. Appreciating the time and energy you put into your website and in depth information you
    provide. It’s nice to come across a blog every once in a while that isn’t the
    same unwanted rehashed information. Fantastic read! I’ve bookmarked
    your site and I’m adding your RSS feeds to my Google account.

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

  9. ArrgPaish表示:

    If you have additional questions regarding hyperhidrosis, please call the Section of Thoracic Surgery at 773 702-3551.
    Quality is a major concern when you ivermectin 1 cream generic now.
    If we have ongoing low-grade inflammation over the course of multiple years, particularly when coupled with significant hormonal fluctuations during perimenopause and menopause, the tissues and muscle can become thinner and drier — and even more susceptible to inflammatory changes.

  10. ArnnPaish表示:

    Can it be that she wants to deliver the news herself?
    If I’m taking stromectol where to buy without a prescription?
    Efficacy of static magnetic field therapy in chronic pelvic pain: a double-blind pilot study.

  11. ремонт кондиционеров表示:

    <a href=”https://remont-kondicionerov-wik.ru”>надежный сервис ремонта кондиционеров</a>

  12. Unquestionably consider that that you stated. Your favourite reason appeared to be at the web the
    simplest thing to understand of. I say to you, I definitely get annoyed while other folks consider
    worries that they plainly don’t realize about. You managed to
    hit the nail upon the highest and also outlined out the entire thing
    with no need side-effects , other people could take a signal.
    Will likely be again to get more. Thank you

  13. bokep indo表示:

    I would like to thank you for the efforts you have put in penning this blog. I am hoping to check out the same high-grade content from you in the future as well. In truth, your creative writing abilities has encouraged me to get my very own site now 😉

  14. This design is wicked! You obviously know how to keep a reader amused. Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job. I really loved what you had to say, and more than that, how you presented it. Too cool!

  15. Great site! I recommend it to everyone!tarjima kino

  16. ngentot pepek表示:

    That is a good tip particularly to those fresh to the blogosphere. Short but very accurate information… Many thanks for sharing this one. A must read article.

  17. 24 7 plumber表示:

    Thank you for another great post. Where else could anybody get that type of info in such a perfect way of writing? I have a presentation next week, and I am on the look for such information.

  18. Today, I went to the beach front with my kids. I found a sea shell and gave it to my 4
    year old daughter and said “You can hear the ocean if you put this to your ear.” She
    put the shell to her ear and screamed. There was a hermit crab
    inside and it pinched her ear. She never wants to go back!
    LoL I know this is completely off topic but I had to tell someone!

  19. Right here is the perfect site for anybody who wishes to find out about
    this topic. You realize a whole lot its almost tough to argue with you (not
    that I actually will need to…HaHa). You definitely put
    a new spin on a subject that’s been discussed for a long time.

    Great stuff, just wonderful!

  20. Мой телефон перестал заряжаться, и я не знал, что делать. По совету друга обратился в этот сервисный центр. Мастера быстро нашли проблему и устранили её. Теперь мой телефон снова в строю! Рекомендую всем: ремонт смартфонов с гарантией.

  21. AtfnHesia表示:

    There was no reason to explain why this had happened, except that I’d worn really high heels one day and wondered if that was the problem if it was the stiffness would have gone away much more quickly.
    Using the internet, you can find a online pharmacy codeine syrup ! Order reliable products from us.
    In order for the virus to attach, receptors on the virus must bind to receptors on the outside of the healthy cell.

  22. AndnHesia表示:

    Subscribe to RxEconsult weekly newsletters.
    More offers at Zyvox by shopping online.
    While this speeds assessments, it loses vast amounts of information about specific symptoms.

  23. i do a lot of article submissions in a week or two and i hire some writers from india and other countries to do my stuf,.

  24. bokep indo表示:

    Aw, this was a really nice post. Spending some time and actual effort to produce a great article… but what can I say… I put things off a lot and never manage to get nearly anything done.

  25. Друзья, если планируете обновить ванную комнату, советую обратить внимание на один интернет-магазин раковин и ванн. У них действительно большой ассортимент товаров от ведущих производителей. Можно найти всё: от простых моделей до эксклюзивных дизайнерских решений.
    Я искал купить раковину в ванную, и они предложили несколько вариантов по хорошей цене. Качество продукции на высоком уровне, всё сертифицировано. Порадовало и то, что они предлагают профессиональные консультации и услуги по установке. Доставка была быстрой, всё пришло в целости и сохранности. Отличный магазин с хорошим сервисом!

  26. Quality posts is the secret to attract the visitors to
    go to see the site, that’s what this web page
    is providing.

  27. I’m extremely impressed with your writing skills and also with the layout on your weblog.
    Is this a paid theme or did you customize it yourself? Anyway keep
    up the excellent quality writing, it’s rare to see a nice blog like
    this one these days.

  28. ремонт кондиционеров表示:

    <a href=”https://remont-kondicionerov-wik.ru”>ремонт кондиционеров с гарантией</a>

  29. BrianOpite表示:

    Bienvenue sur notre blog, votre espace ultime pour les informations sur les stars africaines du monde des canaux mediatiques et des emissions de realite televisee https://mediaeventhub.africa/sbahle-mpisane-gourou-du-fitness-et-star-de-la.html ! Des mouvements recents dans l’industrie du show business africain aux commerages les plus croustillants sur les stars, nous vous mettrons a jour de toutes les aventures captivantes a travers le Afrique. Par exemple, des alliances musicales inedites, de instants intenses dans les emissions de tele-realite, ou de parcours personnels inspirants de vos stars preferees, nous tracons tout. La scene du divertissement en Afrique regorge de talents, et notre blog est la pour vous rapprocher des legendes qui faconnent l’industrie.

    Les emissions de tele-realite africaines ont envahi le monde, mettant en avant la richesse culturelle, la ingeniosite et l’originalite uniques du continent. Des emissions comme « Big Brother Naija », « Les Epouses Reelles de Lagos » et « Tentations Afrique du Sud » suscitent l’interet de des spectateurs massives, suscitant des debats et federant des fans bien plus loin de l’Afrique. Nous plongeons dans les histoires, les rapports et les instants memorables qui font de ces emissions des incontournables a la tele. Notre blog ne se borne pas a rapporter sur stars, mais s’interesse aussi a le role culturel de ces programmes, mettant en avant l’empreinte croissante de la culture de masse africaine a l’echelle globale.

    Notre blog met egalement en lumiere les figures mediatiques et les etoiles montantes qui font sensation en Afrique. Des acteurs talentueux aux animateurs populaires, en sans oublier les influenceurs sur les plateformes sociales, nous saluons les accomplissements de ceux qui transforment le show business sur le continent. Par exemple des recompenses gagnees dans les cinema de Nollywood, des apparitions marquantes dans des productions internationales ou des messages percutants dans des courts-metrages musicaux, nous vous fournissons des confidences speciales et des histoires qui se cachent derriere la gloire. Vous trouverez des focus de personnalites importantes comme Lupita Nyong’o, qui ont non seulement gagne les spectateurs du continent, mais aussi acquis une reconnaissance mondiale.

    Ne nous perdez pas de vue pour les nouvelles fraiches et mises a jour exclusives sur vos idoles du continent. Notre blog est un espace pour les fous de la culture populaire qui veulent rester a jour avec les polemiques de stars, les nouvelles emissions et les courants de mode qui influencent l’industrie. Qu’il s’agisse d’un un fervent adepte de la culture populaire africaine ou un lecteur occasionnel des nouvelles du spectacle, notre blog vous garantit de vous garder au courant, distrait et eveille par le monde vibrant des medias et des emissions de realites televisees en Afrique.

發佈留言

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