AngularJS Twitter Bootstrap: Bootstrap is very popular when it comes to styling applications. In this chapter, we will discuss how this can be used together with the AngularJS. For Bootstrap to be used together with the AngularJS, one has to include it in the head of their application.
AngularJS Twitter Bootstrap
This can be done as shown below:
<link rel="stylesheet" href="http://maxcd -n.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
To use Bootstrap classes and Angular JS Directives Together Example
Consider the HTML file is given below, which has all of the Bootstrap classes and the AngularJS directives included. You will learn how to use these together.
<!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"myApplication" 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.firstName}}</td> user.firstName }}</td>
<td>{{user.lastName }}</td>
</tr></t body>
</table>
<hr>
<button class="btn btn-success" ng-click="edit User('new')"> User('new')">
<span class="glyphicon glyphicon-user"></span> Add a New User
</button>
<hr>
<h3 ng-show="edit">Add a 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">LastName:</label>
div class "col-sm-10">
<input type="text" ng-model="lastName" ng-disabled-"ledit" 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
</button>
</div>
<script src="users.js"></script>
</body>
</html>
Just write the program as it has been written and then run it.
To use Bootstrap classes and Angular JS Directives Together Example Output
Observe the output that you get, and it should be as follows:
Javascript Code to Add New Users
We have our form there for the addition of new users. We have combined the features of both the Angularjs and the Bootstrap. The buttons themselves have embraced the features of bootstrap. The input fields together with the placeholders are features of the Bootstrap. You have now learned how to use the two features together.
Javascript Code to Add New Users Example
The Javascript code should be as shown below:
angular.module('myApp', []).controller('userCtrl',
function($scope) {
$scope.firstName ";
$scope.lastName ";
$scope.password1 = ";
$scope.password2 = ";
$scope.users = [
{id:1, firstName:John', lastName:"Joel"},
{id:2, firstName:"John', lastName:"Pesh" },
{id:3, firstName:Salim', lastName:"Smith" },
{id:4, firstName: Jackson', lastName:"Joel" } ,
{id:5, firstName:"John', lastName:"Junior" },
{id:6, firstName:'Peter',lastName:"Khan"}
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false;
$scope.edit User = function(id) {
if (id == 'new') [
$scope.edit = true;
$scope.incomplete = true;
$scope.firstName =";
$scope.lastName =";
} else {
$scope.edit = false;
$scope.firstName = $scope.users[id-1].first-
Name;
$scope.lastName $scope.users[id-1].last-
Name;
}
};
$scope.$watch('password 1',function()
{$scope.test();});
$scope.$watch('password2',function()
{$scope.test();});
$scope.$watch('first Name', function()
{$scope.test();});
$scope.$watch('lastName', function()
{$scope.test();});
$scope.test function() {
if ($scope.password1 !== $scope.password 2) {
$scope.error true;
} else {
$scope.error = false;
}
$scope.incomplete false;
if ($scope.edit && (!$scope.fName.length ||
!$scope.1Name.length ||
if ($scope.password 1.length || !$ scope.pass-word 2 .length )) {
$scope.incomplete = true;
}};
});
That is how it should be. With Bootstrap combined with the AngularJS, the web pages which have been developed will be responsive, meaning that they will fit on the screens of devices with different sizes by adjustment.