AngularJS Bootstrap
AngularJS's preferred stylesheet is Twitter Bootstrap, which is the most popular front-end framework at present.
Check out the Bootstrap tutorial.
Bootstrap
You can add Twitter Bootstrap to your AngularJS application, and you can add the following code to your <head> element:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
If the site is in the country, it is recommended to use Bootstrap of Baidu's static resource library, 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><h3>Users</h3><table> <thead> <tr> <th>Edit</th> <th>Name</th> <th>Last</th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> <button ng-click="editUser(user.id)"> <span></span>Edit</button> </td> <td>{{ user.fName }}</td> <td>{{ user.lName }}</td> </tr> </tbody></table><hr><button ng-click="editUser('new')"><span></span>Create a new user</button><hr><h3 ng-show="edit">Create a new user:</h3><h3 ng-hide="edit">Editor user:</h3><form> <div> <label>Name:</label> <div> <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="name"> </div> </div> <div> <label>Subject:</label> <div> <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="last"> </div> </div> <div> <label>Password:</label> <div> <input type="password" ng-model="passw1" placeholder="password"> </div> </div> <div> <label>Repeat password:</label> <div> <input type="password" ng-model="passw2" placeholder="repeat password"> </div> </div></form><hr><button ng-disabled="error || incomplete"><span></span>Modify</button></div><script src="myUsers.js"></script></body></html>Running results:
Instruction analysis
| AngularJS directive | describe |
|---|---|
| <html ng-app | Define an application for the <html> element (unnamed) |
| <body ng-controller | Define a controller for the <body> element |
| <tr ng-repeat | Loops the array of users objects, each user object is placed in the <tr> element. |
| <button ng-click | Call the function editUser() when clicking the <button> element |
| <h3 ng-show | If edit = true displays the <h3> element |
| <h3 ng-hide | If edit = true hides the <h3> element |
| <input ng-model | Bind <input> elements for the application |
| <button ng-disabled | If an error occurs or ncomplete = true disables the <button> element |
Bootstrap class analysis
| element | Bootstrap class | definition |
|---|---|---|
| <div> | container | Content container |
| <table> | table | sheet |
| <table> | table-striped | Table with 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 | Level table |
| <div> | form-group | Form Group |
| <label> | control-label | Controller tags |
| <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.$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 Properties | use |
|---|---|
| $scope.fName | Model variable (user name) |
| $scope.lName | Model variables (user last name) |
| $scope.passw1 | Model variable (user password 1) |
| $scope.passw2 | Model variables (user password 2) |
| $scope.users | Model variables (user's array) |
| $scope.edit | Set to true when the user clicks to create a user. |
| $scope.error | If passw1 does not equal passw2 is set to true |
| $scope.incomplete | If each field is empty (length = 0) is set to true |
| $scope.editUser | Set model variables |
| $scope.watch | Monitor model variables |
| $scope.test | Verify errors and integrity of model variables |
The above is a compilation of AngularJS Bootstrap information. We will continue to add it later. I hope that students who can help program AngularJS.