English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Twitter Bootstrap is the preferred stylesheet for AngularJS, and Twitter Bootstrap is the most popular front-end framework at present.
You can add Twitter Bootstrap to your AngularJS application, you can add the following code in your <head> element:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
If the site is in China, it is recommended to use Bootstrap from Baidu Static Resource Library, the code is as follows:
The following is a complete HTML example, using AngularJS directives and Bootstrap classes.
<!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</table>/h2>
<table
class="table table-striped">
<thead><tr>
<th>Edit/th>
<th>First
Name/th>
<th>Last Name</th>/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>
<td>{{ user.lName }}</td>/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>/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>/label>
<div
class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit"
placeholder="Last Name">
</div>
</div>
<div>
<label>Password:</label>/label>
<div
class="col-sm-10">
<input type="password" ng-model="passw1"
placeholder="Password">
</div>
</div>
<div>
<label>Repeat:</label>/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 Attributes | Purpose |
|---|---|
| $scope.fName | Model variable (user name) |
| $scope.lName | Model variable (user surname) |
| $scope.passw1 | Model variable (user password) 1) |
| $scope.passw2 | Model variable (user password) 2) |
| $scope.users | Model variable (array of users) |
| $scope.edit | Set to true when the user clicks to create a user. |
| $scope.error | If passw1 Not equal to passw2 Set to true |
| $scope.incomplete | Set to true if a field is empty (length = 0) |
| $scope.editUser | Set model variables |
| $scope.watch | Monitor model variables |
| $scope.test | Validate the errors and integrity of model variables |