通過上一篇博文，為大家解答了幾個初學常見的問題，并展示了第一個程式。這裡我們就上一篇博文中的代碼基礎上，來了解一下ng(AngularJS簡稱)的基本結構
首先我們先從上一篇博文的代碼開始，代碼如下
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>程式1</title>
<!-- 引入angularJS -->
<script src="https://cdn.bootcss.com/angular.js/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="inputName='Funco_小風'"><!-- 定義變量inputName初始值為字元串'Funco_小風' -->
name:<input type="text" placeholder="inputyourname" ng-model="inputName" /><!-- 通過ng-model将該input标簽與變量inputName綁定 -->
<br />
你的名字是 -{{inputName}}<!-- 顯示變量inputName -->
</div>
</body>
</html>
body下的第一個div标簽，有一個ng-app，如果你沒學過ng，那麼你可能會認為他是HTML标簽屬性，就像width和bgcolor一樣，但事實上，這東西在ng中我們稱為指令。
在運作時，浏覽器會解析擷取的angular.js檔案，這個angular.js中的運作機制你目前初學不需要去掌握，隻需要知道它被解析後，就相當于有了一個ng解析器，它會解析HTML中的ng指令。
這裡我們看到有三個ng指令，依次是ng-app\ng-init\ng-model。首先，你應該從這裡可以看出，這些ng指令都以 “ng-” 開頭，事實上，幾乎所有(目前我已知的範圍内)ng指令都是以ng-開頭。
ng-app用來聲明ng應用，隻有聲明了ng-app的标簽，其内容中屬于ng的部分才會被解析。如果你嘗試将上面代碼中的ng-app=""移除，你會發現，原本的效果都将失去。當然，在聲明了ng-app的标簽以外的地方使用ng，也是無效的。此外，上方的ng-app指令也可以被賦予一個字元串，比如将上方中的ng-app=""改為ng-app="Myapp"則表示聲明一個應用，名為Myapp。他的具體用法在後面具體講指令的時候會詳細講
ng-model用于綁定變量，在ng中這樣的變量也稱為模型。它可以将HTML标簽的值綁定到ng-model聲明的模型中，如上方就将input标簽輸入的值綁定到了inputName這個屬性中。值得注意的是，該指令僅能用與表單元素上，其他元素使用你可能得不到任何效果。實際上，你在表單以外的标簽使用這個指令也沒有意義，畢竟非表單的标簽沒辦法輸入值。
{{}}是表達式，在這裡面你可以直接調用已經定義的模型，也可以進行各種運算，并将結果輸出到該表達式所在位置。如上方中{{inputName}}就是輸出inputName的值。
由此我們可以了解到，正是用ng-app聲明了ng應用，使用ng-model将HTML标簽與模型綁定，同時使用表達式{{}}輸出，才能實作一邊輸入表單，另一邊同時輸出表單内容。
這麼一來你應該能感受到，ng與原生js和jquery的不同指出，至少就這樣的功能而言，你用原生js和jquery都要至少好五六行的代碼，而ng僅僅需要三步走，他甚至不需要你定義并注冊事件函數。因為他會自動監視模型，當模型發生改動時，自動重新運作app中所有與該模型關聯的操作(這樣的機制在ng中稱為資料綁定)。這也是為什麼jquery程式員可能很難接受ng的原因之一，畢竟ng封裝程度較jquery更高，這也是為什麼我們見到稱jquery更多時候是庫，而稱ng更多時候是架構
這裡我們僅僅對angularJS結構作基本了解，你隻要大概能了解到ng的使用方法和大緻過程即可，實際上，除了指令，表達式，和模型外，它還有很多概念，很多指令，比如控制器、作用域、過濾器、動畫、包含、路由。還有它的網絡操作，如cookies、提供異步操作的promis。以及它如何編寫UI，比如與Twiter出品的前端架構Bootstrap協作。這些僅需要知道就行。後面會開始按照如上所述的次序進一步了解學習。
![軟體測試——Web測試基礎理論知識思維導圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)