AngularJS 的首選樣式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受歡迎的前端框架。
你可以在你的 AngularJS 應(yīng)用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代碼:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站點(diǎn)在國內(nèi)，建議使用百度靜態(tài)資源庫的Bootstrap，代碼如下：
以下是一個完整的 HTML 示例, 使用了 AngularJS 指令和 Bootstrap 類。
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body
ng-app="myApp" ng-controller="userCtrl">
<div>
<h2>Users</h2>
<table
class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First
Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr
ng-repeat="user in users">
<td>
<button ng-click="editUser(user.id)">
<span></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
<hr>
<button
ng-click="editUser('new')">
<span></span> Create New User
</button>
<hr>
<h2 ng-show="edit">Create New User:</h2>
<h2 ng-hide="edit">Edit
User:</h2>
<form>
<div>
<label>First Name:</label>
<div
class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit"
placeholder="First Name">
</div>
</div>
<div>
<label>Last Name:</label>
<div
class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit"
placeholder="Last Name">
</div>
</div>
<div>
<label>Password:</label>
<div
class="col-sm-10">
<input type="password" ng-model="passw1"
placeholder="Password">
</div>
</div>
<div>
<label>Repeat:</label>
<div
class="col-sm-10">
<input type="password" ng-model="passw2"
placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button ng-disabled="error || incomplete">
<span></span> Save
Changes
</button>
</div>
<script src = "myUsers.js"></script>
</body>
</html>| Scope 屬性 | 用途 |
|---|---|
| $scope.fName | 模型變量 (用戶名) |
| $scope.lName | 模型變量 (用戶姓) |
| $scope.passw1 | 模型變量 (用戶密碼 1) |
| $scope.passw2 | 模型變量 (用戶密碼 2) |
| $scope.users | 模型變量 (用戶的數(shù)組) |
| $scope.edit | 當(dāng)用戶點(diǎn)擊創(chuàng)建用戶時設(shè)置為true。 |
| $scope.error | 如果 passw1 不等于 passw2 設(shè)置為 true |
| $scope.incomplete | 如果有一個字段為空(length = 0)設(shè)置為 true |
| $scope.editUser | 設(shè)置模型變量 |
| $scope.watch | 監(jiān)控模型變量 |
| $scope.test | 驗(yàn)證模型變量的錯誤和完整性 |