AngularJS Bootstrap

La hoja de estilo preferida de AngularJS es Twitter Bootstrap, Twitter Bootstrap es la estructura de frontend más popular en la actualidad.

Bootstrap

Puedes agregar Twitter Bootstrap a tu aplicación AngularJS, puedes agregar el siguiente código en tu elemento <head>:

<link　rel="stylesheet"　href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

Si el sitio está en China, se recomienda usar Bootstrap del repositorio de recursos estáticos de Baidu, el código es el siguiente:

A continuación, se muestra un ejemplo completo de HTML, que utiliza instrucciones AngularJS y clases Bootstrap.

Código HTML

<!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>Usuarios</h2>
<table　
class="table table-striped">
　　<thead><tr>
　　　　<th>Editar/th>
　　　　<th>First　
Nombre/th>
　　　　<th>Apellido</th>/th>
　　</tr></thead>
　　<tbody><tr　
ng-repeat="user in users"
　　　　<td>
　　　　　　<button　ng-click="editUser(user.id)">
　　　　　
<span></span>  Editar
　　　　　
</button>
　　　　</td>
　　　　<td>{{ user.fName }}</td>/td>
　　　　<td>{{ user.lName }}</td>/td>
　
</tr></tbody>
</table>
<hr>
<button　
ng-click="editUser('new')">
　　<span></span> Crear Nuevo Usuario
</button>
<hr>
<h2　ng-show="edit">Crear Nuevo Usuario:</h2>
<h2　ng-hide="edit">Editar　
Usuario:</h2>
<form>
<div>
　
<label>Nombre:</label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="fName" ng-disabled="!edit"　
placeholder="Nombre">
　　</div>
	</div>　
<div>
　
<label>Apellido:</label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="lName" ng-disabled="!edit"　
placeholder="Apellido">
　　</div>
</div>
	<div>
　
<label>Contraseña:</label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw1"　
placeholder="Contraseña">
　　</div>
</div>
	<div>
　
<label>Repetir:</label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw2"　
placeholder="Repetir Contraseña">
　　</div>
</div>
</form>
<hr>
<button　ng-disabled="error　||　incomplete">
　　<span></span>　Save　
Changes
</button>
</div>
<script　src　=　"myUsers.js"></script>
</body>
　</html>

JavaScript 代码解析

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	验证模型变量的错误和完整性

AngularJS 参考手册 AngularJS 国际化

Tutoriales básicos de AngularJS

AngularJS Bootstrap

Bootstrap

Código HTML

JavaScript 代码解析