The basic operating process of templates and data is as follows:
User request application start page
The user's browser initiates an http connection to the server, and then loads the index.html page, which contains the template
Angular is loaded into the page, waiting for the page to load, and looking for the ng-app directive to define the bounds of the template.
angular traversal templates, find the specified and bound relationships, and will trigger some column actions: register the listener, perform some DOM operations, and obtain initialization data from the server. Finally, the application will be launched and the template will be converted into a DOM view
Connect to the server to load other data that needs to be displayed to the user
Show text
One uses the form {{}}, such as {{greeting}} The second type ng-bind="greeting"
Use the first type, unrendered pages may be seen by users. It is recommended to use the second type of index page, and the remaining pages can use the first type
Form input
The code copy is as follows:
<html ng-app>
<head>
<title>Form</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded); //changes of watch model
}
</script>
</head>
<body>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> //Calling the function when changing
Recommendation: {{funding.needed}}
</form>
</body>
</html>
In some cases, we do not want to make moves immediately when there is a change, but we have to wait. For example:
The code copy is as follows:
<html ng-app>
<head>
<title>Form</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);//watch monitors an expression, and when this expression changes, a callback function will be called
$scope.requestFunding = function() {
window.alert("Sorry,please get more customers first.")
};
}
</script>
</head>
<body>
<form ng-submit="requestFunding()" ng-controller="StartUpController"> //ng-submit
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
<button>Fund my startup!</button>
</form>
</body>
</html>
Non-form submission interaction, take click as an example
The code copy is as follows:
<html ng-app>
<head>
<title>Form</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate',computeNeeded);
$scope.requestFunding = function() {
window.alert("Sorry,please get more customers first.")
};
$scope.reset = function() {
$scope.funding.startingEstimate = 0;
};
}
</script>
</head>
<body>
<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
<button ng-click="requestFunding()">Fund my startup!</button>
<button ng-click="reset()">Reset</button>
</form>
</body>
</html>
Lists, tables, and other iterative elements
ng-repeat will return the currently referenced element number through $index. The sample code is as follows:
The code copy is as follows:
<html ng-app>
<head>
<title>Form</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript">
var students = [{name:'Mary',score:10},{name:'Jerry',score:20},{name:'Jack',score:30}]
function StudentListController($scope) {
$scope.students = students;
}
</script>
</head>
<body>
<table ng-controller="StudentListController">
<tr ng-repeat='student in students'>
<td>{{$index+1}}</td>
<td>{{student.name}}</td>
<td>{{student.score}}</td>
</tr>
</table>
</body>
</html>
Hide and show
The ng-show and ng-hide functions are equivalent, but the operation effect is exactly the opposite.
The code copy is as follows:
<html ng-app>
<head>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function DeathrayMenuController($scope) {
$scope.menuState = {show:false };// If you change to menuState.show = false, the effect will not be displayed. In the future, put the variables in {}
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
</script>
</head>
<body>
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
</div>
</body>
</html>
css class and style
Both ng-class and ng-style can accept an expression, and the result of the expression execution may be one of the following values:
String representing the css class name, separated by spaces
css class name array
Mapping of css class name to boolean value
The code example is as follows:
The code copy is as follows:
<html ng-app>
<head>
<style type="text/css">
.error {
background-color: red;
}
.warning {
background-color: yellow;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function HeaderController($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = "Error!!!"
$scope.isError = true;
$scope.isWarning = false;
}
$scope.showWarning = function() {
$scope.messageText = "Warning!!!"
$scope.isWarning = true;
$scope.isError = true;
}
}
</script>
</head>
<body>
<div ng-controller="HeaderController">
<div ng-class="{error:isError,warning:isWarning}">{{messageText}}</div>
<button ng-click="showError()">Error</button>
<button ng-click="showWarning()">Warning</button>
</div>
</body>
</html>
Mapping of css class name to boolean value
The sample code is as follows:
The code copy is as follows:
<html ng-app>
<head>
<style type="text/css">
.selected {
background-color: lightgreen;
}
</style>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function Restaurant($scope) {
$scope.list = [{name:"The Handsome",cuisine:"BBQ"},{name:"Green",cuisine:"Salads"},{name:"House",cuisine:'Seafood'}];
$scope.selectRestaurant = function(row) {
$scope.selectedRow = row;
}
}
</script>
</head>
<body>
<table ng-controller="Restaurant">
<tr ng-repeat='restaurant in list' ng-click='selectRestaurant($index)' ng-class='{selected: $index==selectedRow}'> // Map of css class name to boolean value. When the value of the model attribute selectedRow is equal to $index in ng-repeat, the selectd style will be set to that line
<td>{{restaurant.name}}</td>
<td>{{restaurant.cuisine}}</td>
</tr>
</table>
</body>
</html>