AngularJS Learn the first basic knowledge of AngularJS

AngularJS Learn Part 1 for instructions, filters, and more.

Instruction

The AngularJS instruction is an extended HTML attribute with the prefix ng-

1. ng-app:

Defines the root element of AngularJS application;
The ng-app directive automatically boots (automatically initializes) the application when the web page is loaded;

<div ng-app="Demo"></div>

2. ng-init:

Initial values are defined for AngularJS applications;
Usually, we use a controller or module instead of it;

<div ng-app="Demo" ng-init="firstName='John'">
 <p> My name is: {{ firstName }}</p>
</div>

3. ng-model:

Binding HTML elements to application data
You can also:
Provide type validation for application data (number, email, required);
Providing status for application data (invalid, dirty, touched, error);
Provides the CSS class for the HTML element;
Bind an HTML element to an 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: The HTML element is cloned once for each item in the collection (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">
    {{ x.name + ', ' + x.country }}
   </li>
 </ul>
</div> 

5. ng-controller: Add a controller to the application. Please follow the following example:

<div ng-app="Demo">
 <h1 ng-controller="DemoCtrl">{{name}}</h1>
 <h1 ng-controller="DemoCtrl2">{{lastName}}</h1>
</div>
<script>
 // $scope Represents the active area and points to the current controller
 //  Every app has 1 A $rootScope Which can act on  ng-app  Directive contains all  HTML  Element. Use  rootscope  Defined values, which can be specified in each  controller  Use in. 
 var app = angular.module('Demo', []);
 app.controller('DemoCtrl', function($scope, $rootScope) {
  $scope.name = "Volvo";
  $rootScope.lastName = "Tom";
 });
</script>

<div ng-app="Demo" ng-controller="personCtrl">
  Name : <input type="text" ng-model="firstName">
 <br>
  Last name : <input type="text" ng-model="lastName">
 <br>
  Name : {{fullName()}}
</div>
<script>
 var app = angular.module('Demo', []);
 app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
   return $scope.firstName + " " + $scope.lastName;
  }
 });
</script>

6. ng-options: Create a drop-down list, and the list items are output 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 = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
 $scope.names = ["Google", "W3Cschool", "Taobao"];
});
</script>

7. ng-disabled: Directive directly binds application data to the disabled property of HTML.

<div ng-app="" ng-init="mySwitch=true">
 <button ng-disabled="mySwitch"> Order me !</button>
 <input type="checkbox" ng-model="mySwitch"/> Button 
 {{ mySwitch }}
</div> 

8. ng-show: Directive hides or displays 1 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 instruction defines an AngularJS click event.

<div ng-app="Demo" ng-controller="myController">
 <button ng-click="count = count + 1"> Order me! </button>
 <p>{{ count }}</p>
</div>

10. ng-include: Use the ng-include directive to include HTML content.

Filter

Add 1 pipe character () to expressions and instructions
Common expressions:
currency: Formatting numbers in currency format;
filter: Select 1 subset from the array items;
lowercase: Formats string to lowercase;
orderBy: Arranges arrays according to an expression;
uppercase: Formats string to uppercase;

<div ng-app="Demo" ng-init="firstName='John'">
 <p> My name is: {{ firstName }}</p>
</div>

0

<div ng-app="Demo" ng-init="firstName='John'">
 <p> My name is: {{ firstName }}</p>
</div>

1

Services

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 service

<div ng-app="Demo" ng-init="firstName='John'">
 <p> My name is: {{ firstName }}</p>
</div>

2

var app = angular.module('Demo', []);
app.controller('customersCtrl', function($scope, $location) {
 $scope.myUrl = $location.absUrl();
}); 

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;

<div ng-app="Demo" ng-init="firstName='John'">
 <p> My name is: {{ firstName }}</p>
</div>

4

2. $location: The service corresponds to the window. location function.

3. $timeout: The service corresponds to the window. setTimeout function.

4. $interval: The service corresponds to the window. setInterval function.

5. $rootScope: It can act on all HTML elements contained in the ng-app directive. Values defined with rootscope can be used in various controller.