AngularJS Bootstrap

The preferred style sheet for AngularJS is Twitter Bootstrap. Twitter Bootstrap is currently the most popular front-end framework.

View Bootstrap tutorial.

Bootstrap

You can add Twitter Bootstrap to your AngularJS application by adding the following code to your <head> element:

If the site is in China , it is recommended to use Bootstrap of Baidu static resource library, the code is as follows:

The following is a complete HTML example, using AngularJS directives and Bootstrap classes.

HTML Code

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//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>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

<h3>Users</h3>

<table class="table table-striped">
  <thead>
    <tr>
      <th>编辑</th>
      <th>名</th>
      <th>姓</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="user in users">
      <td>
        <button class="btn" ng-click="editUser(user.id)">
          <span class="glyphicon glyphicon-pencil"></span>编辑
        </button>
      </td>
      <td>{{ user.fName }}</td>
      <td>{{ user.lName }}</td>
    </tr>
  </tbody>
</table>

<hr>
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">名:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
    </div>
  </div> 
  <div class="form-group">
    <label class="col-sm-2 control-label">姓:</label>
    <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="密码">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">重复密码:</label>
    <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="重复密码">
    </div>
  </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>修改
</button>

</div>

<script src="myUsers.js"></script>

</body>
</html>

Running Example»

Click the "Run Instance" button to view the online instance

Instruction analysis

##<tr ng-repeat Loop through the users object array, placing each user object in a <tr> element. <button ng-clickThe function editUser() is called when the <button> element is clicked< ;h3 ng-showIf edit = true show <h3> element<h3 ng-hideIf edit = true hide <h3> Element##<input ng-model## for the application #<button ng-disabledDisables the <button> element if an error occurs or ncomplete = true

Bootstrap class analysis

AngularJS instruction	Description
<html ng-app	Define an application (unnamed) for the <html> element
<body ng-controller	Define a controller for the <body> element




Binds<input> Element

##<table>table-stripedTable with striped background<button>btnButton##<button><span><span> <span><span><form><div><label>##<label>col-sm-2across 2 columns<div>col-sm-10Across 10 columns

JavaScript 代码

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege', lName:"Pege" },
{id:2, fName:'Kim',  lName:"Pim" },
{id:3, fName:'Sal',  lName:"Smith" },
{id:4, fName:'Jack', lName:"Jones" },
{id:5, fName:'John', lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;

$scope.editUser = function(id) {
if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName;
}
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName', function() {$scope.test();});
$scope.$watch('lName', function() {$scope.test();});

$scope.test = function() {
if ($scope.passw1 !== $scope.passw2) {
$scope.error = true;
} else {
$scope.error = false;
}
$scope.incomplete = false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.lName.length ||
!$scope.passw1.length || !$scope.passw2.length)) {
$scope.incomplete = true;
}
};

});

JavaScript code parsing

Element	Bootstrap class	Definition
<div>	container	Content container
<table>	table	Table


btn-success	SuccessButton
glyphicon	glyphicon
glyphicon-pencil	Pencil icon
glyphicon-user	User icon
glyphicon-save	Save icon
form-horizontal	Horizontal form
form-group	Form group
control-label	Controller label

##Scope attributePurpose$scope.fNameModel Variables (User Name) $scope.lNameModel Variables (User Last Name) )$scope.passw1Model variable (user password 1)$scope.passw2Model variables (user password 2)$scope.usersModel variables (array of users) $scope.editSet to true when the user clicks to create a user. $scope.errorIf passw1 is not equal to passw2 set to true$scope.incompleteSet to true if each field is empty (length = 0)$scope.editUserSet model variables$scope.watchMonitor model variables$scope.testVerify the errors and integrity of model variables

← AngularJS API

AngularJS contains →