Angular是Google公司提供的一套開源免費的項目框架，它是一套基于MVC結構的JavaScript開發(fā)工具
Angular簡介
Angular是基于HTML基礎進行擴展的開發(fā)工具，它希望能通過HTML標簽構建動態(tài)的Web應用，它的特點有數(shù)據(jù)的雙向綁定、依賴注入等。
特點
- 使用雙大括號
{{}}語法對動態(tài)獲取的數(shù)據(jù)進行綁定 - 能將HTML元素代碼通過分合的方式組成可重用的組件
- 支持表單和表單驗證
- 能使用邏輯代碼與DOM元素相關聯(lián)
注意：Angular只適合構建一個CRUD的應用，不適合圖形或游戲的應用開發(fā)
幾個Angular的示例
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
<head>
<meta charset="UTF-8">
<title>第一個簡單的Angular示例</title>
</head>
<body>
{{'Hello, Angular!'}}
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
<head>
<meta charset="UTF-8">
<title>數(shù)值計算表達式</title>
</head>
<body>
1.98 + 2.98 = {{1.98 + 2.98 | number : 0}}
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN" ng-app>
<head>
<meta charset="UTF-8">
<title>數(shù)據(jù)雙向綁定</title>
</head>
<body>
<input type="text" ng-model="user.name">
<p>{{user.name}}</p>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script>
function userController ($scope) {
$scope.user = {
name : ''
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>在頁面中綁定并顯示多項數(shù)據(jù)</title>
</head>
<body>
<ul ng-controller="stuController">
<li ng-repeat="stu in stuList">
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
<script src="http://cdn.bootcss.com/angular.js/1.5.6/angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('stuController', function($scope){
$scope.stuList = [
{name: '張明明', sex: '女', age: 24, score: 95},
{name: '瀝青死', sex: '女', age: 27, score: 87},
{name: '劉曉華', sex: '男', age: 28, score: 86},
{name: '陳種種', sex: '男', age: 24, score: 95}
];
})
</script>
</body>
</html>
