Angularjs Bootstrap
Angularjs's preferred style sheet is Twitter Bootstrap, and Twitter Bootstrap is the most popular front-end framework at the moment.
View the bootstrap tutorial.
Bootstrap
You can add a Twitter Bootstrap to your ANGULARJS application, and you can include the following code in your
<link rel= "stylesheet" href= "//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >
If the site in the domestic, the proposed use of Baidu static resource library bootstrap, the code is as follows:
<link rel= "stylesheet" href= "//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" >
The following is a complete HTML instance, using the ANGULARJS directive and the Bootstrap class.
HTML Code
<! 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> 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 a 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"> Name: </ label>
<div class = "col-sm-10">
<input type = "text" ng-model = "fName" ng-disabled = "! edit" placeholder = "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"> Duplicate password: </ label>
<div class = "col-sm-10">
<input type = "password" ng-model = "passw2" placeholder = "duplicate password">
</ 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>
Run Result:
Instruction parsing
Angularjs directives |
Description |
|
Define an application for the |
<body Ng-controller |
Define a controller for the <body> element |
<tr Ng-repeat |
Loops the Users object array, with each user object placed in the <tr> element. |
<button Ng-click |
Call function Edituser when clicking on <button> element () |
|
If Edit = True displays |
|
If Edit = True hides |
<input Ng-model |
Binding <input> Elements for Applications |
<button ng-disabled |
If an error occurs or Ncomplete = True disables the <button> element |
Bootstrap class parsing
element |
Bootstrap class |
definition |
<div> |
Container |
Content container |
<table> |
Table |
Form |
<table> |
table-striped |
A table with a striped background |
<button> |
Btn |
Button |
<button> |
Btn-success |
Success Button |
<span> |
Glyphicon |
Glyph icon |
<span> |
Glyphicon-pencil |
Pencil icon |
<span> |
Glyphicon-user |
User icon |
<span> |
Glyphicon-save |
Save icon |
<form> |
Form-horizontal |
Horizontal table |
<div> |
Form-group |
Form Group |
<label> |
Control-label |
Controller label |
<label> |
Col-sm-2 |
Spanning 2 columns |
<div> |
Col-sm-10 |
Spanning 10 columns |
JavaScript Code
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
Scope Property |
Use |
$scope. FName |
Model variable (user 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 the user clicks on the Create user. |
$scope. Error |
If PASSW1 is not equal to PASSW2 set to True |
$scope. Incomplete |
Set to True if each field is empty (length = 0) |
$scope. Edituser |
Set up model variables |
$scope. Watch |
Monitor model variables |
$scope. Test |
Validating model variables for errors and integrity |
Above is the Angularjs Bootstrap data collation, follow-up continue to supplement, hope to help programming angularjs students.