AngularJS Bootstrap

La feuille de style par défaut d'AngularJS est Twitter Bootstrap, Twitter Bootstrap est actuellement le cadre frontend le plus populaire.

Bootstrap

Vous pouvez ajouter Twitter Bootstrap à votre application AngularJS, vous pouvez ajouter le code suivant dans votre élément <head> :

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

Si le site est en Chine, il est recommandé d'utiliser Bootstrap de la bibliothèque de ressources statiques de Baidu, le code suivant :

Voici un exemple complet d'HTML, utilisant les instructions AngularJS et les classes Bootstrap.

Code 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>Utilisateurs</th>/h2>
<table　
class="table table-striped">
　　<thead><tr>
　　　　<th>Modifier/th>
　　　　<th>Prénom　
Nom/th>
　　　　<th>Nom de famille</th>/th>
　　</tr></thead>
　　<tbody><tr　
ng-repeat="user in users"
　　　　<td>
　　　　　　<button　ng-click="editUser(user.id)">
　　　　　
<span></span>  Modifier
　　　　　
</button>
　　　　</td>
　　　　<td>{{ user.fName }}</td>/td>
　　　　<td>{{ user.lName }}</td>/td>
　
</tr></tbody>
</table>
<hr>
<button　
ng-click="editUser('new')">
　　<span></span>Créer un nouveau utilisateur
</button>
<hr>
<h2　ng-show="edit">Créer un nouveau utilisateur : </h2>
<h2　ng-hide="edit">Modifier　
Utilisateur : </h2>
<form>
<div>
　
<label>Prénom : </label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="fName" ng-disabled="!edit"　
placeholder="Prénom">
　　</div>
	</div>　
<div>
　
<label>Nom de famille : </label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="lName" ng-disabled="!edit"　
placeholder="Nom de famille">
　　</div>
</div>
	<div>
　
<label>Mot de passe : </label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw1"　
placeholder="Mot de passe">
　　</div>
</div>
	<div>
　
<label>Répéter : </label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw2"　
placeholder="Mot de passe à répéter">
　　</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 国际化

Tutoriel de base AngularJS

AngularJS Bootstrap

Bootstrap

Code HTML

JavaScript 代码解析