In this update, the blogger will share with you some of the common attributes and methods of AngularJs. AngularJS was developed by Google employee Miško Hevery since 2009. This is a very good idea, the project is currently officially supported by Google, and there is a full-time development team that continues to develop and maintain this library. AngularJS is a JavaScript framework. It is a library written in JavaScript. Therefore, it will be easier for friends who have a certain JavaScript foundation to understand. Some of the usages can also refer to the usage methods of Javascript.
1. Instructions and expressions for getting started with AngularJS
AngularJS extends HTML through directives and binds data to HTML through expressions.
【Common AngularJS Directives】
1. ng-app: Declare the area under Angular. Generally written on body or html, in principle, there is only one page;
<body ng-app=""></body>
2. ng-model: Bind element values (such as the value of the input field) into the application variable.
<input type="text" ng-model="name"/>
3. ng-bind: binds the data in application variables to HTML view. The expression {{ }} can be replaced;
<div ng-bind="name"></div>
<div>{{name}}</div>4. ng-init: Initialize variables in AngularJS application.
<body ng-app="" ng-init="name=123">
5. Expression: {{}} bind expressions, which can contain literals, operators and variables. But the expression will see {{}} when the web page is loaded, so it can be usedng-bind=""Alternative
{{ 5 +""+ 5 + ',Angular'}}
【Basic Concept】
1. Directive: In AngularJS, it provides functions by extending HTML attributes. Therefore, the new attribute at the beginning of ng- is called a command
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJSgetting Started</title>
</head>
<body ng-app="" ng-init="name=123">
<input type="text" ng-model="name"/>
<div ng-bind="name+',Angular'">{{name}}</div>
<input type="text" ng-model="name"/>
<p>My first expression： {{ 5 +""+ 5 + ',Angular'}}</p>
</body>
<script src="libs/jquery-3.1."></script>
<script src="libs/"></script>
<script type="text/javascript">
// var input1 = ("input");
// var div = ("div");
//
// = function(){
// = ;
// }
// $("#input").keyup(function(){
// $("#div").html($("input").val());
// });
</script>
</html>2. MVC and scope in AngularJS
[MVC three-layer architecture]
1、Model:The part of the application that is used to process data. (Save or modify data to databases, variables, etc.). Model in AngularJS specifically refers to: data
View (view):The page seen by the user to display the data;
Controller:The part of the application that handles user interaction. Responsible for reading data from the view, controlling user input, and sending data to the model.
2、How it works: The user issues a request from the view layer. After the controller receives the request, it forwards it to the corresponding model processing. After the model processing is completed, the result is returned to the controller and feedback it to the user at the view layer.
Mainly used for CRUD applications, not suitable for game development and DOM operations
To create an Angular module, that is, the part bound to ng-app, you need to pass two parameters:
① The module name, that is, the name that needs to be bound by ng-app. ng-app="myApp"
② Array: The module name that needs to be injected, does not need to be nullable.
var app = ("myApp",[]);
On the Angular module, creating a controller controller requires passing two parameters
① Controller name, that is, the name that ng-controller needs to be bound. ng-controller="myCtrl"
② Controller constructor: The constructor can pass in multiple parameters, including $scope/$rootScope and various built-in objects in the system;
[Scope in AngularJS]
① $scope:Local scope, declared properties and methods on $scope, can only be used in the current controller;
② $rootScope:Root scope, declared properties and methods on $rootScope, can be used in any area contained in ng-app (regardless of the same Controller or in the Controller included scope).
>>> If the variables are not declared using $scope, but the variables bound directly using ng-model in html are scoped:
1. If the ng-model is in a ng-controller, this variable will be bound to the $scope of the current controller by default;
2. If the ng-model does not have an ng-controller clock, this variable will be bound to $rootScope;
("myCtrl",function($scope,$rootScope){
//$ = "name1";
$ = 14;
$ = {
name:"H51701",
num:"33"
};
});
("myCtrl1",function(){
});
3. Angular filter
In AngularJS, filters can be added to expressions and directives using a pipe character (|).
>>> System built-in filter:
currency Format numbers into currency format.
filter Select a subset from the array item.
lowercase The formatted string is lowercase.
orderBy Arrange arrays according to a certain expression.
uppercase The formatted string is capitalized.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/" rel="external nofollow" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>{{"aBcDeF"|uppercase}}</p>
<p>{{"aBcDeF"|lowercase}}</p>
<p>{{123456|currency}}</p>
<form class="form-horizontal">
</form>
<div class="form-group">
<label>Please enter filter information：</label>
<input type="text" ng-model="search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>score</th>
</tr>
</thead>
<tr ng-repeat="item in classes| filter:search | orderBy:'score'">
<td>{{}}</td>
<td>{{}}</td>
<td>{{}}</td>
</tr>
</table>
<p>{{"123456"|reverse}}</p>
</body>
<script src="libs/"></script>
<script>
("app",[])
.controller("ctrl",function($scope){
$ = [
{name:"Zhang Er",age:"12",score:"88"},
{name:"Zhang San",age:"12",score:"88"},
{name:"Li Si",age:"15",score:"78"},
{name:"Li Wu",age:"15",score:"78"},
{name:"Wang Mazi",age:"18",score:"98"},
{name:"Wang Ermazi",age:"18",score:"98"}
];
})
/*
* Custom filters
*/
.filter('reverse', function() {
return function(text) {
if(!(text)){
return "What you entered is not a string";
}else{
return ("").reverse().join("");
}
}
})
</script>
</html>4. Angular Service
【Service Service】
1. Built-in service:
>>> Using built-in services must be injected into the controller through the parameters of the function! ! ! !
$location: Returns the URL address of the current page;
$http: Server requests data, similar to AJax;
$timeout: Corresponds to the JS function.
$interval: Corresponding to the JS function.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-app="app" ng-controller="ctrl">
<pre >{{local}}</pre>
<p ng-bind="myHeader"></p>
<p ng-bind="num"></p>
<p >{{gongneng}}</p>
<p>Will255Turn to16Pricing：{{hexafy}}</p>
<p>{{123|filt}}</p>
<p>{{123|filt1}}</p>
</body>
<script type="text/javascript" src="libs/" ></script>
<script type="text/javascript">
("app",[])
.controller("ctrl",function ($scope,$location,$timeout,$interval,$hexafy) {
$=$();
$ = "Hello World!";
$timeout(function () {
$ = "How are you today?";
}, 2000);
$=0;
$interval(function () {
$++;
},1000);
$=$hexafy.$$gongneng;
$=$(255);
})
/*Custom Service*/
.service('$hexafy', function() {
this.$$gongneng = "Convert the transferred number to hexadecimal";
= function (x) {
return (16);
}
})
.filter("filt",function(){
return function(x){
return (16);
}
})
/*In the filter, call custom service*/
.filter("filt1",function($hexafy){
return function(x){
return $(x);
}
})
</script>
</html>【Custom Service Factory】
factory is a function that returns a value. Usually we use factory function to calculate or return a value. (There is not much difference between factory and service)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>
[Function]<br/>
{{gongneng}}
</p>
<p>
255Convert to16Priority as：{{num}}
</p>
</body>
<script src="libs/"></script>
<script>
("app",[])
.config()
.controller("ctrl",function($scope,hexafy){
$ = ;
$ = (255);
})
.factory('hexafy',function(){
var obj = {
gongneng : "Convert the transferred number to hexadecimal",
myFunc:function(x){
return (16);
}
};
return obj;
})
</script>
</html>【Custom service provider】
1. In AngularJS, Service and factory are all implemented based on providers.
2. In the provider, the $get() method is used to return value/service/factory. ;
3. Provider is the only one among the three custom services that can be written into the config configuration stage.
If the service must be executed during the configuration phase, then the provider must be used. Otherwise, Service or factory is generally used
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
</head>
<body ng-app="app" ng-controller="ctrl">
<p>
[Function]<br/>
{{gongneng}}
</p>
<p>
255Convert to16Priority as：{{num}}
</p>
</body>
<script src="libs/"></script>
<script>
("app",[])
/*Declare the procide service during the configuration phase! */
.controller("ctrl",function($scope,hexafy){
$ = ;
$ = (255);
})
/*Define a provider service*/
.provider('hexafy',function(){
// = "Convert the transferred number to hexadecimal"; this.$get = function(){
var obj = {
gongneng : "Convert the transferred number to hexadecimal",
myFunc : function(x){
return (16);
}
}
return obj;
}
})
</script>
</html>5. $http in Angular
$http is a core service in AngularJS that reads data from remote servers.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
</head>
<body ng-app="app" ng-controller="ctrl">
<!--<pre>
{{data}}
</pre>-->
<div class="container" style="margin-top: 50px;">
<div class="panel panel-primary" >
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">H5-1701Class information table</div>
</div>
<div class="panel-body">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>age</th>
<th>Hobby</th>
<th>Chinese scores</th>
<th>Mathematics Score</th>
<th>Total points</th>
</tr>
</thead>
<tr ng-repeat="item in data | orderBy:' + '">
<td ng-bind=""></td>
<td ng-bind=""></td>
<td ng-bind="">
<!--<span ng-repeat="a in ">{{a}}</span>-->
</td>
<td ng-bind=""></td>
<td ng-bind=""></td>
<td ng-bind=" + "></td>
</tr>
</table>
</div>
</div>
</div>
</body>
<script src="libs/"></script>
<script>
("app",[])
.controller("ctrl",function($scope,$http){
$('',{/*Passed parameter object*/})
.then(function(res){
$ = ;//data Extract the required data from the returned information. For JSON objects (array) });
})
</script>
</html>6. Select in Angular
Use arrays as data source.
Where x represents each item in the array.
By default, x will be bound directly to the option value.
The content displayed by option has the previous x for...
<select ng-model="name" ng-options=" for x in sites"> </select>
Use objects as data source.
Where (x,y) represents a key-value pair, x is a key, and y is a value.
By default, the value y will be bound to the value of option.
The content displayed by option has the previous x for...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style type="text/css">
*{
margin: 10px;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="name" ng-options="x for (x, y) in sites">
</select>
<div class="alert alert-info" style="width: 300px;">
You chose：{{name}}
</div>
<table class="table table-bordered">
<tr>
<th>Serial number</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in options">
<td>{{$index +1}}</td><!--$index Indicates the index of traversal，from0start-->
<td>{{item}}</td>
</tr>
</table>
</body>
<script src="libs/"></script>
<script>
("app",[])
.controller("ctrl",function($scope){
$ = ["Zhang San","Li Si","Wang Ermazi","Jie Xiaorui"];
$ = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
})
</script>
</html>7. DOM and Events in Angular
ng-disabled="true/false" The control is disabled when true is passed. Passing in false is, enable;
ng-show is hidden by default. It is displayed when true is passed;
ng-hide default display Passed in true is hidden;
ng-click defines click events in AngularJS.
Only properties and methods bound in Angular scope can be triggered.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style type="text/css">
*{
margin: 10px;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<input type="checkbox" ng-model="mySwitch">Do you agree that I am a handsome guy！
</label>
<button ng-disabled="!mySwitch" class="btn btn-primary">Click me!</button>
<p></p>
<label>
<input type="checkbox" ng-model="mySwitch1">Whether to display？
</label>
<button ng-show="mySwitch1" class="btn btn-primary">Click me!</button>
<p></p>
<label>
<input type="checkbox" ng-model="mySwitch2">Whether to hide？
</label>
<button ng-hide="mySwitch2" class="btn btn-primary">Click me!</button>
<p></p>
<button ng-click="count = count + 1">Click me！</button>
<p>{{ count }}</p>
<button ng-click="func()">Tell me what I think！</button>
</body>
<script src="libs/"></script>
<script>
("app",[])
.controller("ctrl",function($scope,$rootScope){
$ = 10;
$ = function(){
alert("I popped up a window!");
}
})
</script>
</html>8. Angular form and input verification
[Form Verification in AngularJS]
1. Common verification operations in the form:
$dirty The form has record
The $valid field content is legal
The content of the $invalid field is illegal
$pristine The form has no record filled in
$error Error message that the form verification fails
2. During verification, you need to set the name attribute to the form and input that needs to be verified:
After setting the name for form and input, the form form information will be bound to the $scope scope by default. Therefore, you can use the .$ verification operation to obtain the verification result:
For example: .$dirty = "true" form has been filled in
.$invalid = "true" The form input is invalid
.$ = "true" form required but not filled
The verification supported by $error is required/minlength/maxlength/pattern/email/number/date/url, etc. . .
3. To avoid conflicts, for example, when using type="email", H5 will also perform verification operations. If you only want to use AngularJS verification, you can use the <form novalidate></form> attribute to disable the H5 own verification function;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="libs/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" />
<style type="text/css">
.row{
margin-bottom: 10px;
}
.row .col-xs-5{
text-align: center;
}
.suc{
border-color: #3c763d;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.suc:focus{
border-color: #2b542c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #67b168;
}
.err{
border-color: #a94442;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.err:focus{
border-color: #843534;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
</style>
</head>
<body ng-app="app" ng-controller="ctrl">
<div class="container" style="width: 40%; margin: 50px auto; padding: 0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title" style="text-align: center;">
User registration
</div>
</div>
<div class="panel-body">
<form action="" method="get" class="form-horizontal" name="myForm" novalidate>
<div class="row" >
<div class="col-xs-3">
username：
</div>
<div class="col-xs-9">
<input type="text" class="form-control" ng-model="" name="name" ng-minlength="4" ng-maxlength="10" required ng-class="{suc:.$valid && .$dirty,err:.$invalid && .$dirty}"/>
<p style="color: red; margin: 0px;" ng-show=".$invalid && .$dirty">
<!--When there is a record that is illegal，pshow-->
<span ng-show=".$">username必须填写！！！</span>
<span ng-show=".$">username最少包含4Characters！！！</span>
<span ng-show=".$">username最多包含10Characters！！！</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">
Mail：
</div>
<div class="col-xs-9">
<input type="email" class="form-control" ng-model="" name="mail" required ng-class="{suc:.$valid && .$dirty,err:.$invalid && .$dirty}"/>
<p style="color: red; margin: 0px;" ng-show=".$invalid && .$dirty">
<!--When there is a record that is illegal，pshow-->
<span ng-show=".$">Mail必须填写！！！</span>
<span ng-show=".$">Mail格式不合法！！！</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">
password：
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="" name="pwd" pattern="^\w{6,18}$" required ng-class="{suc:.$valid && .$dirty,err:.$invalid && .$dirty}"/>
<p style="color: red; margin: 0px;" ng-show=".$invalid && .$dirty">
<!--When there is a record that is illegal，pshow-->
<span ng-show=".$">password应为6-18Bit，And only letters、number、Underline</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3">
确认password：
</div>
<div class="col-xs-9">
<input type="password" class="form-control" ng-model="rePwd" name="rePwd" required ng-class="{suc:.$dirty&&rePwd==,err:.$dirty&&rePwd!=}"/>
<p style="color: red; margin: 0px;" ng-show=".$dirty && rePwd!=">
<!--When there is a record that is illegal，pshow-->
两次password输入不一致！！！
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5">
<input type="submit" value="register" class="btn btn-success" ng-disabled="myForm.$invalid || rePwd!=" />
</div>
<div class="col-xs-5">
<input type="button" value="Reset" class="btn btn-warning" ng-click="resets()" />
</div>
</div>
</form>
</div>
</div>
<pre>
{{}}
</pre>
</div>
</body>
<script src="libs/"></script>
<script>
$ = function(){
$ = ($);
}
$();
})
</script>
</html>The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!