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

  1. Thanks for sharing most of these wonderful articles. In addition, the best travel and also medical insurance plan can often eradicate those considerations that come with traveling abroad. A medical crisis can soon become very costly and that’s bound to quickly place a financial stress on the family’s finances. Having in place the best travel insurance deal prior to leaving is well worth the time and effort. Thanks a lot

  2. Thanks for the points you have contributed here. Something else I would like to express is that pc memory demands generally increase along with other breakthroughs in the technologies. For instance, if new generations of processors are brought to the market, there is usually a similar increase in the size demands of both the laptop or computer memory plus hard drive space. This is because software program operated by simply these processors will inevitably boost in power to make new know-how.

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

  4. The Top Depression Treatment Options Gurus Do 3 Things
    Holistic Treatment For Depression (Sunnyeonamukkun.Com)

  5. AnedPaish表示:

    Friends and family may provide the much needed care and support while you are fighting cancer.
    Life is meaningful again at rash from doxycycline and save the money for other purchases.
    If the rash continues after you make the switch give it a week then you need to see your doctor.

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

  7. How To Make A Profitable Casino Slots When You’re Not
    Business-Savvy kaymell.uk (tv-9l2i12af8rcwvgxllzvlpd.com)

  8. xxx amam7078表示:

    Good web site! I truly love how it is simple on my eyes and the data are well written. I’m wondering how I could be notified whenever a new post has been made. I have subscribed to your RSS which must do the trick! Have a great day!

  9. Carrol表示:

    This Story Behind Adult Adhd Symptoms Test Will Haunt You For The Rest
    Of Your Life! adhd in adults women symptoms; Carrol,

  10. Thanks for the new things you have disclosed in your writing. One thing I would really like to discuss is that FSBO connections are built eventually. By presenting yourself to owners the first saturday their FSBO is usually announced, prior to masses start calling on Mon, you create a good link. By giving them tools, educational supplies, free accounts, and forms, you become a good ally. By taking a personal desire for them in addition to their circumstance, you make a solid link that, in many cases, pays off as soon as the owners opt with a real estate agent they know as well as trust — preferably you.

  11. I have discovered some considerations through your site post. One other thing I would like to state is that there are many games available on the market designed particularly for toddler age children. They consist of pattern acceptance, colors, animals, and models. These normally focus on familiarization in lieu of memorization. This helps to keep little kids engaged without sensing like they are studying. Thanks

  12. Another issue is that video games are generally serious as the name indicated with the key focus on studying rather than entertainment. Although, there’s an entertainment feature to keep your children engaged, each game is generally designed to work on a specific expertise or course, such as math concepts or technology. Thanks for your post.

  13. After I initially commented I seem to have clicked the -Notify me when new comments are added- checkbox and from now on each time a comment is added I recieve four emails with the same comment. There has to be a means you can remove me from that service? Many thanks.

  14. You produced some decent points there. I looked on the internet with the problem and discovered most individuals should go along with with your website.

  15. Thanks for the unique tips contributed on this site. I have noticed that many insurance firms offer shoppers generous discount rates if they elect to insure several cars together. A significant quantity of households include several automobiles these days, particularly those with old teenage young children still living at home, as well as the savings in policies could soon begin. So it pays to look for a good deal.

  16. The Most Effective Wood Burning Stoves Tips For Changing Your Life http://Www.913875.Xyz

  17. Youre so cool! I dont suppose Ive learn anything like this before. So good to find anyone with some unique ideas on this subject. realy thanks for starting this up. this web site is something that is wanted on the web, somebody with just a little originality. useful job for bringing one thing new to the internet!

  18. wonderful issues altogether, you just gained a logo reader. What would you recommend about your publish that you made a few days ago? Any sure?

  19. I would love to add when you do not now have an insurance policy or maybe you do not remain in any group insurance, you could well take advantage of seeking the aid of a health broker. Self-employed or people having medical conditions typically seek the help of any health insurance broker. Thanks for your text.

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

  21. AngkHesia表示:

    How to go gluten-free safely, and enjoy it!
    What are the top five benefits of using can flagyl pills terminate early pregnancy as it is modestly-priced and effectively works to relieve
    If there is a nod of approval or expressed agreement with the story then it’s fairly certain you’re getting what the patient wanted to tell you.

  22. AgnvHesia表示:

    On his website, he advertises that Clover has “no back-of-house,” meaning he wants the process of food preparation and distribution to be completely transparent.
    Some valtrex for cold sore in the comparative chart on this site
    People at High Risk from FluAnyone can get the flu even healthy people , and serious problems related to the flu can happen at any age, but some people are at high risk of developing serious flu-related complications if they get sick.

  23. 9 Lessons Your Parents Teach You About Psychiatrist For Add Near
    Me psychiatrist for add near me (http://www.Goodgmc.co.kr/)

  24. 15 Inspiring Facts About Anxiety Symptoms Severe You’ve Never
    Seen Anxiety About Anxiety Symptoms

  25. Thanks for the helpful write-up. It is also my belief that mesothelioma has an particularly long latency phase, which means that the signs of the disease may well not emerge right up until 30 to 50 years after the original exposure to mesothelioma. Pleural mesothelioma, that is certainly the most common type and affects the area round the lungs, could cause shortness of breath, upper body pains, and also a persistent cough, which may result in coughing up bloodstream.

  26. I want to to thank you for this very good read!! I definitely enjoyed every little bit of it. I have you saved as a favorite to check out new stuff you post…

  27. It?s really a cool and helpful piece of info. I am glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.

  28. Sweet blog! I found it while surfing around on Yahoo News. Do you have any suggestions on how to get listed in Yahoo News? I’ve been trying for a while but I never seem to get there! Thanks

  29. Thanks for the strategies you have shared here. On top of that, I believe there are many factors which will keep your car insurance policy premium all the way down. One is, to contemplate buying autos that are inside good directory of car insurance organizations. Cars which have been expensive tend to be at risk of being stolen. Aside from that insurance is also based on the value of your car or truck, so the more pricey it is, then the higher a premium you pay.

發佈留言

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