编程小贴士

给你的编程提供小点子


AngularJS的五个重要的特性

AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同样出色。在这篇教程中,我们将简单的介绍AngularJS几个重量级必备特性,并且介绍它如何能够让你的web应用更加强大!

本文介绍了它的几个基本特性,让你对angularjs有个初步的认识,去掉对它的神秘感,对入门很有用:

AugularJS简单介绍

AngularJS是一个新出现的强大客户端技术,提供给大家的一种开发强大应用的方式。这种方式利用并且扩展HTML,CSS和javascript,并且弥补了它们的一些非常明显的不足。本应该使用HTML来实现而现在由它开发的动态一些内容。

在这篇文章中,我们讲述了一些最重要的AngularJS功能和特性。我们的目标在于阅读后,你可以开始自己开发一些有趣的应用。

特性一:双向的数据绑定

数据绑定可能是AngularJS最酷最实用的特性。它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理,查询和监听DOM。数据绑定是的代码更少,你可以专注于你的应用。

我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的,毫不影响的应用到web应用中。

传统来说,当model变化了。 开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面,model变化驱动了DOM中元素变化,另一方面,DOM元素 的变化也会影响到Model。这个在用户互动中更加复杂,因为开发人员需要处理和解析这些互动,然后融合到一个model中,并且更新View。这是一个 手动的复杂过程,当一个应用非常庞大的时候,将会是一件非常费劲的事情。

这里肯定有更好的解决方案!那就是AngularJS的双向数据绑定,能够同步DOM和Model等等。

这里有一个非常简单的例子,用来演示一个input输入框和<h1>元素的双向绑定:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html ng-app>
  <head>
    <script src="angular.js"></script>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <hr>
      <h1>Hello, {{yourName}}!</h1>
    </div>
  </body>
</html>

特性二:模板

在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。所有的指令都负责针对view来设置数据绑定。

我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化,不是字 符串的连接或者innerHTML变化。使用DOM作为输入,而不是字符串,是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令 词汇并且可以创建你自己的指令,甚至开发可重用的组件。

最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签,然后开发者拿过来添加上功能,通过数据绑定将会使得这个过程非常简单。

这里有一个例子,我们使用ng-repeat指令来循环图片数组并且加入img模板,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function AlbumCtrl($scope) {
<blockquote>    scope.images = [
{"image":"img/image_01.png", "description":"Image 01 description"},
{"image":"img/image_02.png", "description":"Image 02 description"},
{"image":"img/image_03.png", "description":"Image 03 description"},
{"image":"img/image_04.png", "description":"Image 04 description"},
{"image":"img/image_05.png", "description":"Image 05 description"}
];
}
 
<div ng-controller="AlbumCtrl">
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
</li>
</ul>
</div></blockquote>

这里还有一件事值得提一句,AngularJS并不强制你学习一个新的语法或者从你的应用中提出你的模板。 特性三:MVC 针对客户端应用开发AngularJS吸收了传统的MVC基本原则。MVC或者Model-View-Controll设计模式针对不同的人可能意 味不同的东西。AngularJS并不执行传统意义上的MVC,更接近于MVVM(Moodel-View-ViewModel)。 Model model是应用中的简单数据。一般是简单的javascript对象。这里没有必要继承框架的classes,使用proxy对象封装或者使用特 别的setter/getter方法来访问。事实上我们处理vanilla javascript的方法就是一个非常好的特性,这种方法使得我们更少使用应用的原型。 ViewModel viewmodel是一个用来提供特别数据和方法从而维护指定view的对象。 viewmodel是$scope的对象,只存在于AnguarJS的应用中。$scope只是一个简单的js对象,这个对象使用简单的API来侦测和广播状态变化。 Controller controller负责设置初始状态和参数化$scope方法用以控制行为。需要指出的controller并不保存状态也不和远程服务互动。 View view是AngularJS解析后渲染和绑定后生成的HTML 。这个部分帮助你创建web应用的架构。$scope拥有一个针对数据的参考,controller定义行为,view处理布局和互动。 特性四:依赖注入(Dependency Injection,即DI) AngularJS拥有内建的依赖注入子系统,可以帮助开发人员更容易的开发,理解和测试应用。 DI允许你请求你的依赖,而不是自己找寻它们。比如,我们需要一个东西,DI负责找创建并且提供给我们。 为了而得到核心的AngularJS服务,只需要添加一个简单服务作为参数,AngularJS会侦测并且提供给你:

1
2
3
function EditCtrl($scope, $location, $routeParams) {
     // Something clever here...
}

你也可以定义自己的服务并且让它们注入:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
angular.
    module('MyServiceModule', []).
    factory('notify', ['$window', function (win) {
    return function (msg) {
        win.alert(msg);
    };
}]);
 
function myController(scope, notifyService) {
    scope.callNotify = function (msg) {
        notifyService(msg);
    };
}
 
myController.$inject = ['$scope', 'notify'];

特性五:Directives(指令) 指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情?那么AngularJS可以做到。 指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。 这里是一个例子,它监听一个事件并且针对的更新它的$scope ,如下:

1
2
3
4
5
6
7
8
9
10
11
12
myModule.directive('myComponent', function(mySharedService) {
    return {
        restrict: 'E',
        controller: function($scope, $attrs, mySharedService) {
            $scope.$on('handleBroadcast', function() {
                $scope.message = 'Directive: ' + mySharedService.message;
            });
        },
        replace: true,
        template: '<input>'
    };
});

然后,你可以使用这个自定义的directive来使用:

1
<my-component ng-model="message"></my-component>

使用一系列的组件来创建你自己的应用将会让你更方便的添加,删除和更新功能。

额外的特性:测试

AngularJS内含了测试用例可以帮助你更方便的执行测试。为什么不用呢?

JS是一个动态的解析性语言,而不是编译类型的,因此非常的难写测试。

AngularJS被开成一个可测试的框架。它甚至包含了点对点的单元测试runner。如果你喜欢这个特性,看看这个项目:https://github.com/angular/angular-seed

一但你运行这个项目,你可以看到如下输出:

tips1000_2014-07-04_00-02-36

API文档是完整的点对点测试,说明了整个架构师如何工作的。通过查看这些测试,你会对AngularJS有更深刻的了解。

 

175 Responses to “ AngularJS的五个重要的特性 ”

  1. i love pron说道:

    ypFV6e Thanks-a-mundo for the blog post.Thanks Again. Want more.

  2. Whats up very nice website!! Man.. Excellent..

  3. Tattoo Shop说道:

    Thanks for sharing this good write-up. Very inspiring! (as always, btw)

  4. xem tu vi 2019说道:

    Your typical military officer is a person with extensiveknowledge of history, particularly military history, and who takesoaths and honor seriously.

  5. very good blog! Also visit my webpage healthy Diet

  6. Lung Detox说道:

    You made some clear points there. I did a search on the subject and found most persons will go along with with your blog.

  7. I truly appreciate this post.Really thank you! Awesome.

  8. My Face Gifts说道:

    Major thanks for the blog.Really thank you! Fantastic.

  9. There is evidently a bunch to know about this. I feel you made some nice points in features also.

  10. Saw your material, and hope you publish more soon.

  11. Modular Kitchens have changed the very idea of kitchen nowadays since it has provided household females with a comfortable yet a classy place in which they may invest their quality time and space.

  12. take care of to keep it wise. I cant wait to learn much more from you.

  13. Click to read说道:

    What as up, all is going fine here and ofcourse every

  14. hamptonbay说道:

    Outstanding quest there. What happened after? Take care!

  15. Its hard to find good help I am regularly saying that its difficult to get quality help, but here is

  16. here说道:

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! However, how can we communicate?

  17. W88说道:

    Wow! I cant believe I have found your blog. Very useful info.

  18. mebel na zakaz说道:

    Regards for helping out, fantastic info.

  19. Wow, awesome blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is fantastic, as well as the content!. Thanks For Your article about sex.

  20. visit website说道:

    who you are however definitely you are going to a well-known blogger should you

  21. hotel taj说道:

    Looking forward to reading more. Great article post.Much thanks again. Really Cool.

  22. cheap taxi说道:

    looked at. And on this article Referencement editorial :

  23. Your current article normally possess alot of really up to date info. Where do you come up with this? Just stating you are very resourceful. Thanks again

  24. microblog说道:

    Thanks so much for the blog post.Much thanks again.

  25. you can check说道:

    Really appreciate you sharing this post. Really Great.

  26. The Lost Ways说道:

    Some really superb blog posts on this site, thanks for contribution.

  27. I truly appreciate this blog post.Really thank you! Much obliged.

  28. Willena说道:

    Politics is of It is higher to say nothing and be thought a idiot than to open your mouth and take away all doubt. ? Abraham Lincoln

  29. And说道:

    You ave made some really good points there. I looked on the internet for more information about the issue and found most people will go along with your views on this web site.

  30. try this说道:

    Im obliged for the blog article.Really thank you!

  31. Nwokolo说道:

    Keep up the superb piece of work, I read few posts on this website and I believe that your web site is really interesting and has got circles of superb information.

  32. klm voucher说道:

    Well I truly liked reading it. This information procured by you is very practical for accurate planning.

  33. you will have an awesome weblog right here! would you prefer to make some invite posts on my weblog?

  34. WONDERFUL Post.thanks for share..more hold your fire..

  35. Beyonce说道:

    I went over this web site and I believe you have a lot of excellent info, saved to fav (:.

  36. Perfectly written content, Really enjoyed reading.

  37. I really liked your article.Thanks Again. Fantastic.

  38. It generally takes about three years to complete that with.

  39. wow, awesome blog article. Much obliged.

  40. I will right away snatch your rss as I can not in finding your email subscription link or newsletter service. Do you have any? Please let me recognize in order that I may just subscribe. Thanks.

  41. securities说道:

    You need to participate in a contest for probably the greatest blogs on the web. I will recommend this site!

  42. Some genuinely quality posts on this internet site, saved to fav.

  43. thao duoc quy说道:

    Say, you got a nice blog.Really looking forward to read more. Awesome.

  44. I will bookmark your weblog and take a look at again right here regularly.

  45. You made some clear points there. I looked on the internet for the topic and found most guys will approve with your website.

  46. nfl jerseys has come under heavy attack for the health and safety standards it allows and the amount it pays workers abroad.

  47. VIP Scrapebox list, Xrumer link list, Download free high quality autoapprove lists

  48. visit website说道:

    you can do with a few pics to drive the message home a little bit, but other than that, this is fantastic blog.

  49. visit website说道:

    Thank you, I ave just been searching for information about this topic for ages and yours is the greatest I have discovered till now. But, what about the conclusion? Are you sure about the source?

  50. Blogging说道:

    I truly appreciate this blog post.Thanks Again. Much obliged.

  51. women说道:

    Way cool! Some very valid points! I appreciate you writing this post and also the rest of the site is also very good.

  52. I really liked your article.Thanks Again. Great.

  53. Thank you for your blog post.Thanks Again. Keep writing.

  54. discount code说道:

    These are really impressive ideas in regarding blogging.

  55. Im thankful for the article.Much thanks again. Great.

  56. Some truly choice articles on this website , saved to favorites.

  57. Crochet bolero说道:

    I think other website proprietors should take this website as an model, very clean and great user genial style and design, let alone the content. You are an expert in this topic!

  58. Sisimiut说道:

    Yay google is my king aided me to find this great internet site!

  59. my page说道:

    Thanks a lot for the post.Much thanks again. Really Great.

  60. blue nike说道:

    Im obliged for the article post.Much thanks again. Want more.

  61. worth说道:

    This is what good writing is made of; interesting, engaging, intelligent and well-written content. This is exactly what I see in your article. Thank you.

  62. Well I definitely enjoyed studying it. This subject provided by you is very constructive for proper planning.

  63. Waec expo说道:

    You ave made some really good points there. I looked on the internet for more information about the issue and found most individuals will go along with your views on this site.

  64. School admission说道:

    Im thankful for the blog post. Keep writing.

  65. ark ps4 server说道:

    It as actually a nice and useful piece of information. I am glad that you simply shared this useful information with us. Please stay us informed like this. Thank you for sharing.

  66. The issue is something which too few people are speaking intelligently about.

  67. I really liked your post.Really thank you! Really Great.

  68. This is a topic that as near to my heart Cheers! Where are your contact details though?

  69. Keep up the wonderful piece of work, I read few articles on this website and I think that your site is very interesting and has got sets of great info.

  70. Just that is necessary. I know, that together we can come to a right answer.

  71. You ought to experience a contest personally of the finest blogs on-line. IaаАа’б‚Т€ТšаЂаŒаАа’б‚Т€ТžаБТžm going to suggest this page!

  72. I will immediately grasp your rss as I can not find your email subscription hyperlink or newsletter service. Do you ave any? Kindly allow me realize in order that I may just subscribe. Thanks.

  73. Really appreciate you sharing this article.

  74. Thanks a lot for the post.Much thanks again. Will read on

  75. Very good information. Lucky me I found your website by accident (stumbleupon). I have book-marked it for later!

  76. The account aided me a acceptable deal. I have been a little bit acquainted of this your broadcast offered bright clear

  77. Wow, marvelous blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is wonderful, let alone the content!

  78. You have made some decent points there. I checked on the web for more information about the issue and found most individuals will go along with your views on this web site.

  79. Victor说道:

    It as not that I want to copy your internet site, but I really like the pattern. Could you tell me which style are you using? Or was it especially designed?

  80. resorts说道:

    whoah this blog is excellent i love reading your articles. Keep up the good work! You know, a lot of people are searching around for this information, you could help them greatly.

  81. Open Heaven说道:

    Very good info. Lucky me I discovered your blog by accident (stumbleupon). I have saved as a favorite for later!

  82. Thanks again for the blog post.Really thank you! Will read on

  83. These are superb food items that will assist to cleanse your enamel clean.

  84. accident lawyer说道:

    It’а†s actually a great and helpful piece of information. I am happy that you shared this useful info with us. Please stay us up to date like this. Thanks for sharing.

  85. rendu compte que. -arrete de te la banquette arriere, etait poste

  86. Thank you for your article.Really thank you! Will read on

  87. I will right away grasp your rss feed as I can at in finding your email subscription hyperlink or newsletter service. Do you have any? Kindly permit me recognize in order that I may subscribe. Thanks.

  88. mishki iz roz说道:

    I think other site proprietors should take this web site as an model, very clean and fantastic user friendly style and design, as well as the content. You are an expert in this topic!

  89. Winners说道:

    Thanks so much for the article.Really looking forward to read more. Want more.

  90. Hassie说道:

    very nice publish, i certainly love this web site, carry on it

  91. go there说道:

    Thanks a bunch for sharing this with all people you really know what you are talking about! Bookmarked. Kindly additionally discuss with my site =). We may have a hyperlink change agreement among us!

  92. you can check说道:

    Thanks-a-mundo for the blog. Really Great.

  93. write for us说道:

    Thank you ever so for you blog post.Really thank you! Really Great.

  94. this website说道:

    Wow, great article.Thanks Again. Want more.

  95. karta kukuruza说道:

    Really enjoyed this article.Thanks Again. Great.

  96. like this说道:

    Whoa! This blog looks just like my old one! It as on a entirely different topic but it has pretty much the same layout and design. Superb choice of colors!

  97. Looking forward to reading more. Great blog article.Really looking forward to read more. Cool.

  98. view说道:

    If some one needs to be updated with newest technologies therefore

  99. This is a great tip particularly to those fresh to the blogosphere. Short but very accurate info Thanks for sharing this one. A must read post!

  100. Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your website is great, as well as the content!

  101. tаАаб‚Т€Т“me now and finallаАааБТ“ got the braveаА аБТ–y

  102. Your means of explaining the whole thing in this post is truly nice, all be able to effortlessly understand it, Thanks a lot.

  103. magnificent post, very informative. I wonder why the other experts of this sector don at realize this. You should proceed your writing. I am sure, you have a huge readers a base already!

  104. Really enjoyed this blog.Really thank you! Want more.

  105. see说道:

    This very blog is definitely entertaining additionally informative. I have picked a bunch of helpful tips out of this blog. I ad love to go back every once in a while. Cheers!

  106. That is very fascinating, You are a very professional blogger. I ave joined your rss feed and sit up for searching for more of your great post. Also, I have shared your web site in my social networks

  107. classified说道:

    Thanks a lot for sharing this with all people you actually recognize what you are talking about! Bookmarked. Please also consult with my site =). We could have a link exchange contract among us!

  108. click here说道:

    This very blog is no doubt educating as well as informative. I have chosen a bunch of handy advices out of it. I ad love to go back every once in a while. Thanks a lot!

  109. see the website说道:

    you are saying and the way in which during which you say it.

  110. Im obliged for the blog post.Much thanks again. Awesome.

  111. caratulas CD说道:

    Pretty! This was an extremely wonderful post. Thank you for supplying this info.

  112. link说道:

    Say, you got a nice post.Thanks Again. Much obliged.

  113. You made some decent points there. I appeared on the internet for the issue and found most individuals will go along with with your website.

  114. Say, you got a nice article post.Really thank you!

  115. hoa don dien tu说道:

    Thanks for sharing, this is a fantastic article post.Really looking forward to read more.

  116. cau do说道:

    This info is priceless. Where can I find out more?

  117. check here说道:

    Very nice write-up. I absolutely appreciate this website. Keep writing!

  118. go there说道:

    Wow, great article post.Really thank you! Really Cool.

  119. Utterly pent subject material, Really enjoyed reading through.

  120. I want gathering useful information, this post has got me even more info!

  121. Cindie说道:

    You definitely know how to bring an issue to light and make it important. I cant believe youre not more popular because you definitely have the gift.

  122. Nice blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as fast as yours lol

  123. You must take part in a contest for among the finest blogs on the web. I all advocate this website!

  124. genuine parts说道:

    You made some decent points there. I did a search on the subject and found most guys will agree with your blog.

  125. check here说道:

    msn. That is an extremely neatly written article. I will make sure to bookmark it and return to learn more of your useful info.

  126. sunday说道:

    I use pocket money also. I love it. I also use MPG and it allows me to record my gas purchases and maintenance transactions into pocket money right from MPG.

  127. Really appreciate you sharing this blog post.Really thank you! Keep writing.

  128. Way cool! Some extremely valid points! I appreciate you writing this article plus the rest of the website is extremely good.

  129. Really appreciate you sharing this article post.Really looking forward to read more. Fantastic.

  130. uniform shirts说道:

    You made some nice points there. I looked on the internet for the topic and found most people will go along with with your blog.

  131. Terrific work! This is the type of information that should be shared around the web. Shame on the search engines for not positioning this post higher! Come on over and visit my site. Thanks =)

  132. I truly appreciate people like you! Take care!!

  133. There is visibly a bunch to realize about this. I feel you made various nice points in features also.

  134. Way cool! Some extremely valid points! I appreciate you penning this write-up and also the rest of the website is also very good.

  135. Nice post, thanks. Could you explain the third paragraph in more detail?

  136. Game Online说道:

    of the subjects you write related to here. Again, awesome web site!

  137. Wow! This blog looks just like my old one! It as on a entirely different subject but it has pretty much the same page layout and design. Wonderful choice of colors!

  138. Looking forward to reading more. Great article.Really looking forward to read more. Will read on

  139. of the math that people should bear in mind, I want to add couple of other qualitative pieces

  140. check out说道:

    your great post. Also, I ave shared your website in my social networks

  141. Rattling fantastic information can be found on weblog. I believe in nothing, everything is sacred. I believe in everything, nothing is sacred. by Tom Robbins.

  142. ni cd cell说道:

    This is one awesome post.Really looking forward to read more. Awesome.

  143. You have brought up a very fantastic details , regards for the post.

  144. link说道:

    Between me and my husband we’ve owned more MP3 players through the years than I can count, including Sansas, iRivers, iPods (classic & touch), the Ibiza Rhapsody, etc. But, the last few years I’ve settled down to one line of players. Why? Because I was happy to find how well-designed and fun to utilize the underappreciated (and widely mocked) Zunes are.

  145. Major thanks for the blog.Really looking forward to read more. Great.

  146. You are my inspiration, I own few blogs and rarely run out from brand . аАа’аАТ‚аЂТ˜Tis the most tender part of love, each other to forgive. by John Sheffield.

  147. Red your website put up and liked it. Have you at any time considered about visitor submitting on other associated blogs similar to your website?

  148. I truly appreciate this post. I ave been looking all over for this! Thank God I found it on Google. You have made my day! Thank you again..

  149. If I set up my own blogging web site. Is it okay to copy and paste pics on my site to suppour my blogging?

  150. This site definitely has all the information I wanted about this

  151. Mobile Computer说道:

    Way cool! Some very valid points! I appreciate you penning this post and also the rest of the site is extremely good.

  152. incredibly nice post, i unquestionably genuinely like this website, retain on it

  153. This really answered my drawback, thank you!

  154. Really enjoyed this blog.Thanks Again. Keep writing.

  155. Thank you for your article.Really thank you! Cool.

  156. I really value your piece of work, Great post.

  157. wow, awesome article post.Thanks Again. Keep writing. see sex gifs

  158. time locating it but, I ad like to shoot you an email.

  159. couponcodes说道:

    one is sharing information, that as truly good, keep up writing.

  160. agen poker说道:

    Would you be considering exchanging links?

  161. best pron说道:

    JRwTqR Usually My spouse and i don at send ahead web sites, on the contrary I may possibly wish to claim that this particular supply in fact forced us to solve this. Fantastically sunny submit!

  162. It as genuinely very complex in this busy life to listen news on TV, thus I only use internet for that purpose, and get the most up-to-date news.

  163. Wow! Thank you! I always needed to write on my blog something like that. Can I take a fragment of your post to my site?

  164. Some genuinely select posts on this website , saved to bookmarks.

  165. Thanks for spending the time to argue this, I feel starkly about it and adore conception additional taking place this topic.

  166. What kind of camera was used? That is definitely a really good superior quality.

  167. Way cool! Some very valid points! I appreciate you writing this write-up and also the rest of the site is extremely good.

  168. Really enjoyed this blog article.Really looking forward to read more. Keep writing.

  169. Some really superb info , Sword lily I found this.

  170. Woh I like your articles , saved to favorites !.

  171. Thanks a lot for the article post.Really thank you! Great.

  172. bistro masa说道:

    You have made some really good points there. I checked on the internet to learn more about the issue and found most people will go along with your views on this web site.

  173. bistro masa说道:

    Really appreciate you sharing this article.Really thank you! Much obliged.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>