AngularJS（1、咱們爲何選擇AngularJS）

時間 2020-01-19

標籤 angularjs 咱們爲何選擇欄目 AngularJS 简体版

原文原文鏈接

在學習和使用AngularJS的過程當中，一個這樣的問題一直縈繞在咱們心頭：咱們爲何選擇AngularJS
javascript

首先咱們來看一下官方的說明：html

AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事。前端

AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們稱爲標識符(directives)的結構，讓瀏覽器可以識別新的語法。例如：java

使用雙大括號{{}}語法進行數據綁定；angularjs

使用DOM控制結構來實現迭代或者隱藏DOM片斷；web

支持表單和表單的驗證；ajax

能將邏輯代碼關聯到相關的DOM元素上；api

能將HTML分組成可重用的組件。瀏覽器

AngularJS經過爲開發者呈現一個更高層次的抽象來簡化應用的開發。如同其餘的抽象技術同樣，這也會損失一部分靈活性。換句話說，並非全部的應用都適合用AngularJS來作。AngularJS主要考慮的是構建CRUD應用。幸運的是，至少90%的WEB應用都是CRUD應用。可是要了解什麼適合用AngularJS構建，就得了解什麼不適合用AngularJS構建。 app

按官方的意思，就是說AngularJS實際上是html的一個補充，它作了一些事情，使html開發webapp更簡單快捷。

下面咱們用HelloWorld來看看是怎麼簡單快捷的：

<html>
<head><title>Hello, World in JavaScript</title></head>
<body>
<p id="greeting"></p>
<script type="text/javascript">
  var isIE = document.attachEvent;
  var addListener = isIE
      ? function(e, t, fn) {e.attachEvent('on' + t, fn);}
      : function(e, t, fn) {e.addEventListener(t, fn, false);};

  addListener(window, 'load', function() {
    var greeting = document.getElementById('greeting');
    if (isIE) {
      greeting.innerText = 'Hello, World';
    } else {
      greeting.textContent = 'Hello, World';
    }
  });
</script>
</body>
</html>

通常的控制數據顯示到界面，咱們須要調用dom操做，如今咱們來看下AngularJS怎麼操做：

<html ng-app>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
  <script src="controllers.js"></script>
</head>
<body>
  <div ng-controller='HelloController'>
    <input ng-model='greeting.text'>
    <p>`greeting`.`text`, World</p>
  </div>
</body>
</html>

AngularJS經過數據雙向綁定，使input中綁定的數據模型每次修改都能自動顯示到<p>標籤中，這就是AngularJS的第一個優點，數據$scope的雙向綁定，

而後是指令(directives)，它所作的就是聲明自定義標籤來自定義dom，而後經過控制器(controllers)來控制數據的變化(M)以及界面的顯示(V)

其次是把MVC的概念從後臺帶入到前端，使前端大批量的代碼得以清晰地編寫查看。在下一篇中咱們將講述如何用AngularJS創建前端代碼框架

AngularJS中文官網