Anjularjs基礎使用

參考：菜鳥教程

https://www.runoob.com/angularjs/angularjs-tutorial.html    
複製代碼

簡介

經過新的屬性和表達式擴展了 HTML
能夠構建一個單一的頁面應用程序
AngularJS 是一個 JavaScript 框架,它可經過 script 標籤添加到 HTML 頁面（引入anjularjs庫文件)
AngularJS 經過 指令 擴展了 HTML，且經過 表達式 綁定數據到 HTML    
複製代碼

什麼是anjularjs

AngularJS 把應用程序數據綁定到 HTML 元素
AngularJS 能夠克隆和重複 HTML 元素
AngularJS 能夠隱藏和顯示 HTML 元素
AngularJS 能夠在 HTML 元素"背後"添加代碼
AngularJS 支持輸入驗證
複製代碼

基礎指令：是以 ng 做爲前綴的 HTML 屬性

ng-app:指令定義一個 AngularJS 應用程序，告訴 AngularJS某個元素是 AngularJS 應用程序 的"全部者",一個網頁能夠包含多個運行在不一樣元素中的 AngularJS 應用程序
ng-model：指令把元素值（例如輸入域的值）綁定到應用程序
ng-bind：指令把應用程序數據綁定到HTML視圖
ng-init：指令初始化 AngularJS 應用程序變量 
複製代碼

數據綁定的方式

Anjular JS對象

<label type="text" ng-init="Person={firstName:'May',lastName:'Song'}" /> 姓：
  <label>{{Person.firstName}}</label>
複製代碼

Anjular JS數組

<label type="text" ng-init='counts=["I","am","New","people"]' /> 顯示第三個數據：
  <label>{{counts[2]}}</label>
複製代碼

Anjular JS表達式：AngularJS 使用 表達式 把數據綁定到 HTML

（1）AngularJS 表達式寫在雙大括號內：{{"表達式" }}
（2）AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙
（3）AngularJS 將在表達式書寫的位置"輸出"數據
（4）AngularJS 表達式 很像 JavaScript 表達式：它們能夠包含文字、運算符和變量
複製代碼

Anjular JS表達式與Javascript表達式

似於 JavaScript 表達式，AngularJS 表達式能夠包含字母，操做符，變量。
與 JavaScript 表達式不一樣，AngularJS 表達式能夠寫在 HTML 中。
與 JavaScript 表達式不一樣，AngularJS 表達式不支持條件判斷，循環及異常。
與 JavaScript 表達式不一樣，AngularJS 表達式支持過濾器。
複製代碼

數據綁定

單價：<input type="text" ng-model="quantyBind" ng-init="quantyBind='2'" />
  數量：<input type="text" ng-model="countBind" ng-init="countBind='1'" />
  <label>總價是：{{quantyBind}}*{{countBind}}={{quantyBind*countBind}}</label>
複製代碼

ng-repeat：遍歷循環一個數組

<label ng-init="Names=['Mike','Amy','Summer','Lady']"></label>
        <ul>
            <li ng-repeat="x in Names">
                {{x}}
            </li>
        </ul>
複製代碼