Home > Developer > Web Develop
AngularJS Bootstrap
AngularJS's preferred style sheet is Twitter Bootstrap, Twitter Bootstrap is currently the most Popular Front-end framework
Bootstrap
You can add Twitter Bootstrap to your AngularJS app, and you can include the following code in your <link rel= "stylesheet" href= "//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >
The following is a complete HTML instance, using the AngularJS directive and the Bootstrap class.
<! DOCTYPE html>
<link rel= "stylesheet" href= "Http://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>
<body ng-app= "myApp" ng-controller= "Userctrl" >
<div class= "Container" >
<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>
<button class= "btn btn-success" ng-click= "Edituser (' new ')" >
<span class= "Glyphicon glyphicon-user" ></span> Create New User
</button>
<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>
<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>
Instruction parsing
<body Ng-controller> defines a controller for the <body> element
<tr ng-controller> Loop the Users object array, with each user object placed in the <tr> element
<button ng-click> Call Function Edituser () when clicking on the <button> element
<input ng-model> for application bindings <input > elements
<button ng-disabled> If an error occurs or ncoplete= true disables the <button> element
Bootstrap class parsing
<div> Container Content Container
<table> Table Tables
<table> table-striped table with striped background
<button> btn Button
<btton> btn-success Success Button
<span> Glyphicon Glyph Icons
<span> glyphicon-pencil pencil icon
<span> glyphicon-user User icon
<span> Glyphicon-save Save icon
<form> form-horizontal Level table
<div> form-group Form Groups
<label> Control-label Controller Label
<label> col-sm-2 across 2 columns
<div> col-sm-10 across 10 columns
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;
}
};
});
JavaScript Code Parsing
$scope. FName model variable (user name)
$scope. Iname model variable (user name)
$scope. PASSW1 model variables (user password 1)
$scope. PASSW2 model variables (user password 2)
$scope. Users model variable (array of user)
$scope. Edit set to True when the user clicks Create user.
$scope. Error if PASSW1 does not equal passw2 to true.
$scope. Incomplete if each field is empty (length = 0) set to True
$scope. Edituser Setting Model variables
$scope. Watch Monitor Model variables
$scope. Test verifies the error and integrity of model variables
AngularJS contains
In Angularjs, you can include HTML files in HTML.
Include HTML files in HTML
Service side contains
Most service scripts support the Include file feature
Client contains
There are many ways to include HTML files in HTML through JavaScript.
Usually we use HTTP request (AJAX) to get the data from the server, the returned data we can write to the HTML element by using InnerHTML.
<div class= "Container" >
<div ng-include= "' myusers_list.htm '" ></div>
<div ng-include= "' myusers_form.htm '" ></div>
</div>
Create an HTML list
<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>
AngularJS Animation
AngularJS provides animated effects that can be used with CSS
AngularJS using animations requires the introduction of Angular-animate.min.js
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js" ></script>
You also need to use model Nganimate in your app:
<body ng-app= "Nganimate" >
What is an animation?
Animation is a dynamic change effect that is generated by changing HTML elements.
Tick the check box to hide the div instance:
<body ng-app= "Nganimate" >
Hide div <input type= "checkbox" ng-model= "MyCheck" >
<div ng-hide= "MyCheck" ></div>
</body>
Animation in the application should not be too much, but the appropriate use of animation can increase the richness of the page, but also easier for users to understand.
What did Nganimate do?
The Nganimate model can add or remove CALSS.
The nganimate model does not animate with HTML elements, but nganimate detects events like hiding HTML elements
If an event occurs, Nganimate uses the predefined class to animate the HTML element.
AngularJS Add/Remove class instructions
Ng-shwo
Ng-hide
Ng-class
Ng-view
Ng-include
Ng-repeat
Ng-if
Ng-switch
The Ng-show and Ng-hide directives are used to add or remove values from the Ng-hide class.
Other instructions will add the Ng-enter class to the DOM, and removing the DOM will add the Ng-leave attribute.
The Ng-repeat directive can also add Ng-move classes when the location of the HTML element changes.
Also, after the animation is complete, the collection of classes for the HTML element is removed. For example: The ng-hide instruction adds a class:
Ng-animate
Ng-hide-animate
Ng-hide-add (if the element will be hidden)
Ng-hide-remove (if the element is displayed)
Ng-hide-add-active (if the element will be hidden)
Ng-hide-remove-active (if the element is displayed)
Using CSS Animations
We can use CSS transition (transitions) or CSS animations to animate HTML elements,
CSS Transitions
CSS transitions allow us to smoothly modify one CSS property value to another:
Instance:
<style>
div {
Transition:all linear 0.5s;
Background-color:lightblue;
height:100px
}
. ng-hide{
height:0;
}
</style>
CSS Animations
CSS animations allow you to modify CSS property values smoothly:
When the. Ng-hide class is set in the DIV element, the Mychange animation executes, smoothing the height from 100px to 0:
<style>
@keyframes Mychange {
from {
height:100px;
} to {
height:0;
}
}
div {
height:100px;
Background-color:lightblue;
}
Div.ng-hide {
Animation:0.5s Mychange;
}
</style>
Angularjs Foundation (eight)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
