摘要: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