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，代码如下：

以下是一个完整的 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>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>&nbsp;&nbsp;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>

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 Bootstrap