JavaScript - AngularJS

摘要:JavaScript - AngularJS

這一篇,是介紹AngularJS,我截取裡面說明的部分,來學習如何使用AngularJS

http://www.codeproject.com/Articles/657970/Understanding-AngularJS

1.載入AngularJS的api

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

2.指名可套用AngularJS的範圍,在tag裡加入ng-app,有套用ng-app內的範圍,將會被AngularJS解析

<form id="mainform" ng-app>

3.將input 控制項,資料繫結AngularJS model, 此後這個控制項將被AngularJS給綁架,自動隨綁定model變更內容

<input type="text" id="txtLastName" ng-model="Employee.LastName" />

4.將被綁定的控制項,自動隨綁定的控制項的值變動,而變動顯示

<tr>
<td>
{{ Employee.LastName }}
</td>
</tr>

5.撰寫Controller ,由Controller處理與View之間的關係

<form id="mainform" ng-controller="EmpController" ng-app>

function EmpController ($scope) {

$scope.Employee= { LastName: 'Bandopadhyaya', 
FirstName:’Rahul’,
…
CurrentCountry:’India’};
} 

6.綁定與事件的關係

<input type="button" id="btnAddEmp" value="
Add Employee" ng-click="save()" />

 

要測試AngularJS

可使用JsBin

http://jsbin.com/OROruka/1/edit