English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 基础教程

Bootstrap AngularJS

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:

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

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

以下是一个完整的 HTML 示例, 使用了 AngularJS 指令和 Bootstrap 类。

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>Utenti</h2>
<table　
class="table table-striped">
　　<thead><tr>
　　　　<th>Modifica</th>
　　　　<th>Primo　
Nome</th>
　　　　<th>Cognome</th>
　　</tr></thead>
　　<tbody><tr　
ng-repeat="user in users">
　　　　<td>
　　　　　　<button ng-click="editUser(user.id)">
　　　　　
<span></span>  Modifica
　　　　　
</button>
　　　　</td>
　　　　<td>{{ user.fName }}</td>
　　　　<td>{{ user.lName }}</td>
　
</tr></tbody>
</table>
<hr>
<button　
ng-click="editUser('new')">
　　<span></span> Crea Nuovo Utente
</button>
<hr>
<h2 ng-show="edit">Crea Nuovo Utente:</h2>
<h2 ng-hide="edit">Modifica　
Utente:</h2>
<form>
<div>
　
<label>Nome:</label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="fName" ng-disabled="!edit">　
placeholder="Nome">
　　</div>
	</div>　
<div>
　
<label>Cognome:</label>
　　<div　
class="col-sm-10">
　　　　<input type="text" ng-model="lName" ng-disabled="!edit">　
placeholder="Cognome">
　　</div>
</div>
	<div>
　
<label>Password:</label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw1">　
placeholder="Password">
　　</div>
</div>
	<div>
　
<label>Ripeti:</label>
　　<div　
class="col-sm-10">
　　　　<input type="password" ng-model="passw2">　
placeholder="Ripeti Password">
　　</div>
</div>
</form>
<hr>
<button ng-disabled="error || incomplete">
　　<span></span> Salva　
Modifiche
</button>
</div>
<script src="myUsers.js"></script>
</body>
　</html>

Analisi del codice JavaScript

Proprietà del ScopeUso
$scope.fNameVariabile del modello (nome utente)
$scope.lNameVariabile del modello (cognome utente)
$scope.passw1Variabile del modello (password utente 1)
$scope.passw2Variabile del modello (password utente 2)
$scope.usersVariabile del modello (array degli utenti)
$scope.editQuando l'utente fa clic su creare utente impostato su true.
$scope.errorSe passw1 non è uguale a passw2 impostato su true
$scope.incompleteSe un campo è vuoto (length = 0) impostato su true
$scope.editUserImpostazione delle variabili del modello
$scope.watchMonitoraggio delle variabili del modello
$scope.testVerifica degli errori e dell'integrità delle variabili del modello
Manuale di riferimento AngularJSInternazionalizzazione AngularJS