初識angular體驗(二)

時間 2020-02-15

原文原文鏈接

　　不知不覺過了一週了，這期間本人也學習了幾章angular的實例教程，上次的分享我說到了angular的好處以及咱們爲何要用angular。今天咱們來講下究竟何時用angular是最好的以及舉一些簡單的小例子。
　　angular是一個MVC框架，最適於開發客戶端的單頁面應用。它不是個功能庫，而是用來開發動態網頁的框架。它專一於擴展HTML的功能，提供動態數據綁定，並且它能跟其它框架（如jQuery）合做融洽。
　　若是你要開發的是單頁應用，angular就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮angular的長處。可是像遊戲開發之類對DOM進行大量操縱、又或者單純須要極高運行速度的應用，就不是angular的用武之地了。
　　所說angular不是萬能的，在該須要用的時候，咱們要合理的運用，並讓其發揮其重要做用。
　　下面我來舉個小例子讓你們來看看它的神奇之處！
　　特性一：雙向數據綁定
　　數據綁定是angular最酷最實用的特性。它可以幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定可以使代碼更少，你能夠專一於你的應用。
　　咱們想象一下Model是你的應用中的簡單事實。你的Model是你用來讀取或者更新的部分。數據綁定指令提供了你的Model投射到view的方法。這些投射能夠無縫的，絕不影響的應用到web應用中。
　　傳統來講，當model變化了。開發人員須要手動處理DOM元素而且將屬性反映到這些變化中。這個一個雙向的過程。一方面，model變化驅動了DOM中元素變化，另外一方面，DOM元素的變化也會影響到Model。這個在用戶互動中更加複雜，由於開發人員須要處理和解析
　　這些互動，而後融合到一個model中，而且更新View。這是一個手動的複雜過程，當一個應用很是龐大的時候，將會是一件很是費勁的事情。
　　這裏確定有更好的解決方案！那就是angular的雙向數據綁定，可以同步DOM和Model等等。html

<!doctype html>
<html ng-app="demoApp">
  <head>
    <script src="http://m.cnblogs.com/142260/js/angular.min.js" rel="nofollow"/>
  </head>
  <body>
    <div>
      <label>Name:</label>
      <input type="text" ng-model="user.name" placeholder="請輸入名字">
      <hr>
      <h1>Hello, `user`.`name`!</h1>
    </div>
  </body>
</html>web

　　以上代碼就能夠實現文本框和下面h1標籤內容的雙向綁定，而且實時更新，是否是很神奇呢？
　　好啦，此次的分享就到這裏啦，下次分享我會把angular的全部特性都用代碼的形式舉例出來，而後在把本人所學習的angular以節的形式給你們作一個講解，但願個人分享對你們能有所幫助，讓咱們共同提升！！！再見啦！！！
app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。