AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
如果站点在国内，建议使用百度静态资源库的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 | 模型变量 (用户的数组) |
| $scope.edit | 当用户点击创建用户时设置为true。 |
| $scope.error | 如果 passw1 不等于 passw2 设置为 true |
| $scope.incomplete | 如果有一个字段为空(length = 0)设置为 true |
| $scope.editUser | 设置模型变量 |
| $scope.watch | 监控模型变量 |
| $scope.test | 验证模型变量的错误和完整性 |