The first article of AngularJS learning is to learn about instructions, filters and other related content.
instruction
AngularJS directive is an extended HTML attribute with a prefix ng-
1、 ng-app：
Defines the root element of the AngularJS application;
The ng-app directive will automatically boot (auto-initialize) the application when the web page is loaded;
<div ng-app="Demo"></div>
2、 ng-init：
Defines the initial value for the AngularJS application;
Normally, we use a controller or module instead;
<div ng-app="Demo" ng-init="firstName='John'">
<p>My name is：{{ firstName }}</p>
</div>
3、 ng-model：
Bind HTML elements to application data
Also:
Provide type verification (number, email, required) for application data;
Provide status (invalid, dirty, touched, error) for application data;
Provide CSS classes for HTML elements;
Bind HTML elements to HTML form;
<div ng-app="Demo" ng-init="firstName='John'">
<p>Name：<input type="text" ng-model="firstName"></p>
<p>My name is：{{ firstName }}</p>
</div>
4、ng-repeat：HTML elements are cloned once for each item in the collection (in an array).
<div ng-app="Demo" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ + ', ' + }}
</li>
</ul>
</div>
5、ng-controller：Add controllers for the application. Please learn from the following example:
<div ng-app="Demo">
<h1 ng-controller="DemoCtrl">{{name}}</h1>
<h1 ng-controller="DemoCtrl2">{{lastName}}</h1>
</div>
<script>
// $scope represents the action area, pointing to the current controller // Each application has a $rootScope, which can be used in all HTML elements contained in the ng-app directive. Values defined with rootscope can be used in each controller. var app = ('Demo', []);
('DemoCtrl', function($scope, $rootScope) {
$ = "Volvo";
$ = "Tom";
});
</script>
<div ng-app="Demo" ng-controller="personCtrl">
name: <input type="text" ng-model="firstName">
<br>
surname: <input type="text" ng-model="lastName">
<br>
surnamename: {{fullName()}}
</div>
<script>
var app = ('Demo', []);
('personCtrl', function($scope) {
$ = "John";
$ = "Doe";
$ = function() {
return $ + " " + $;
}
});
</script>
6、ng-options：Create a drop-down list, and the list items are output loop through objects and arrays.
<div ng-app="Demo" ng-controller="DemoCtrl">
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<script>
var app = ('myApp', []);
('myCtrl', function($scope) {
$ = ["Google", "W3Cschool", "Taobao"];
});
</script>
7、ng-disabled：Directives bind application data directly to the disabled attribute of HTML.
<div ng-app="" ng-init="mySwitch=true">
<button ng-disabled="mySwitch">Click me!</button>
<input type="checkbox" ng-model="mySwitch"/>Button
{{ mySwitch }}
</div>
8、ng-show：Directive hides or displays an HTML element.
<div ng-app=""> <p ng-show="true">I'm visible。</p> <p ng-show="false">I'm invisible。</p> </div>
9、ng-click：The directive defines an AngularJS click event.
<div ng-app="Demo" ng-controller="myController">
<button ng-click="count = count + 1">Click me！</button>
<p>{{ count }}</p>
</div>
10、ng-include：Use the ng-include directive to include HTML content.
Filter
Add to expressions and directives using a pipe character (|)
Common expressions:
currency: Format numbers into currency format;
filter: Select a subset from the array item;
lowercase: formatted strings in lowercase;
orderBy: arrange arrays according to a certain expression;
uppercase: formatted string in uppercase;
<div ng-app="Demo" ng-controller="DemoCtrl">
<p>Name is {{ lastName | uppercase }}</p>
</div>
<div ng-app="Demo" ng-controller="DemoCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ + ', ' + }}
</li>
</ul>
</div>
Serve
In AngularJS, a service is a function or object that can be used in your AngularJS application;
In AngularJS you can create your own services or use built-in services;
AngularJS has more than 30 built-in services;
Custom Services
('hexafy', function() {
= function (x) {
return (16);
}
});
var app = ('Demo', []);
('customersCtrl', function($scope, $location) {
$ = $();
});
Commonly used built-in services
1. $http: is a core service in AngularJS. The service sends a request to the server, and the application responds to the data transmitted by the server;
var app = ('Demo', []);
('DemoCtrl', function($scope, $http) {
$http({
url:'',
method:'GET',
params:{
'username':'tan'
}
}).success(function(data,header,config,status){
//Response successfully }).error(function(data,header,config,status){
//Processing response failed });
});
2. $location: The service corresponds to the function.
3. $timeout: The service corresponds to the function.
4. $interval: The service corresponds to the function.
5. $rootScope: It can be used in all HTML elements contained in the ng-app directive. Values defined with rootscope can be used in each controller.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.