Bootstrap is a popular style sheet. This chapter demonstrates how to use it with AngularJS.
Bootstrap
To include Bootstrap in your AngularJS application, add the following line to the head of your document:
<
link
rel=
"stylesheet"
href=
"http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
>
If you want to study Bootstrap, visit our Bootstrap Tutorial.
Below is a complete HTML example, with all AngularJS directives and Bootstrap classes explained.
HTML Code
<
!DOCTYPE
html
>
< html >
< link rel= "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
< script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > < /script >
< body ng-app= "myApp" ng-controller= "userCtrl" >
< div class= "container" >
< h3 >Users < /h3 >
< 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 class= "btn" ng-click= "editUser(user.id)" >
< span class= "glyphicon glyphicon-pencil" > < /span > Edit
< /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 > Create New User
< /button >
< hr >
< h3 ng-show= "edit" >Create New User: < /h3 >
< h3 ng-hide= "edit" >Edit User: < /h3 >
< form class= "form-horizontal" >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >First Name: < /label >
< div class= "col-sm-10" >
< input type= "text" ng-model= "fName" ng-disabled= "!edit" placeholder= "First Name" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Last Name: < /label >
< div class= "col-sm-10" >
< input type= "text" ng-model= "lName" ng-disabled= "!edit" placeholder= "Last Name" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Password: < /label >
< div class= "col-sm-10" >
< input type= "password" ng-model= "passw1" placeholder= "Password" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Repeat: < /label >
< div class= "col-sm-10" >
< input type= "password" ng-model= "passw2" placeholder= "Repeat Password" >
< /div >
< /div >
< /form >
< hr >
< button class= "btn btn-success" ng-disabled= "error || incomplete" >
< span class= "glyphicon glyphicon-save" > < /span > Save Changes
< /button >
< /div >
< script src = "myUsers.js" > < /script >
< /body >
< /html >
< html >
< link rel= "stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
< script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" > < /script >
< body ng-app= "myApp" ng-controller= "userCtrl" >
< div class= "container" >
< h3 >Users < /h3 >
< 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 class= "btn" ng-click= "editUser(user.id)" >
< span class= "glyphicon glyphicon-pencil" > < /span > Edit
< /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 > Create New User
< /button >
< hr >
< h3 ng-show= "edit" >Create New User: < /h3 >
< h3 ng-hide= "edit" >Edit User: < /h3 >
< form class= "form-horizontal" >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >First Name: < /label >
< div class= "col-sm-10" >
< input type= "text" ng-model= "fName" ng-disabled= "!edit" placeholder= "First Name" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Last Name: < /label >
< div class= "col-sm-10" >
< input type= "text" ng-model= "lName" ng-disabled= "!edit" placeholder= "Last Name" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Password: < /label >
< div class= "col-sm-10" >
< input type= "password" ng-model= "passw1" placeholder= "Password" >
< /div >
< /div >
< div class= "form-group" >
< label class= "col-sm-2 control-label" >Repeat: < /label >
< div class= "col-sm-10" >
< input type= "password" ng-model= "passw2" placeholder= "Repeat Password" >
< /div >
< /div >
< /form >
< hr >
< button class= "btn btn-success" ng-disabled= "error || incomplete" >
< span class= "glyphicon glyphicon-save" > < /span > Save Changes
< /button >
< /div >
< script src = "myUsers.js" > < /script >
< /body >
< /html >
Try it Yourself »
Directives (Used Above) Explained
AngularJS Directive | Description |
---|---|
<body ng-app | Defines an application for the <body> element |
<body ng-controller | Defines a controller for the <body> element |
<tr ng-repeat | Repeats the <tr> element for each user in users |
<button ng-click | Invoke the function editUser() when the <button> element is clicked |
<h3 ng-show | Show the <h3>s element if edit = true |
<h3 ng-hide | Hide the <h3> element if edit = true |
<input ng-model | Bind the <input> element to the application |
<button ng-disabled | Disables the <button> element if error or incomplete = true |
Bootstrap Classes Explained
Element | Bootstrap Class | Defines |
---|---|---|
<div> | container | A content container |
<table> | table | A table |
<table> | table-striped | A striped table |
<button> | btn | A button |
<button> | btn-success | A success button |
<span> | glyphicon | A glyph icon |
<span> | glyphicon-pencil | A pencil icon |
<span> | glyphicon-user | A user icon |
<span> | glyphicon-save | A save icon |
<form> | form-horizontal | A horizontal form |
<div> | form-group | A form group |
<label> | control-label | A control label |
<label> | col-sm-2 | A 2 columns span |
<div> | col-sm-10 | A 10 columns span |
JavaScript Code
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;
}
};
});
$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 Explained
Scope Properties | Used for |
---|---|
$scope.fName | Model variable (user first name) |
$scope.lName | Model variable (user last name) |
$scope.passw1 | Model variable (user password 1) |
$scope.passw2 | Model variable (user password 2) |
$scope.users | Model variable (array of users) |
$scope.edit | Set to true when user clicks on create user. |
$scope.error | Set to true if passw1 not equal passw2 |
$scope.incomplete | Set to true if any field is empty (length = 0) |
$scope.editUser | Sets model variables |
$scope.watch | Watches model variables |
$scope.test | Tests model variables for errors and incompleteness |