AngularJS: the first basic AngularJS knowledge and the first angularjs

AngularJS: the first basic AngularJS knowledge and the first angularjs

AngularJS learns about commands, filters, and other related content.

Command

AngularJS commands are extended HTML attributes with the prefix ng-

1. ng-app:

Defines the root element of AngularJS applications;
The ng-app command automatically directs (automatically initializes) the application when the webpage is loaded;

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

2. ng-init:

Defines the initial values for AngularJS applications;
Generally, we use a controller or module to replace it;

<Div ng-app = "Demo" ng-init = "firstName = 'john'"> <p> my name is: {firstName }}</p> </div>

3. ng-model:

Bind HTML elements to Application Data
You can also:
Provide type verification (number, email, and required) for application data );
Provide status (invalid, dirty, touched, and error) for application data );
Provides CSS classes for HTML elements;
Binds HTML elements to HTML forms;

<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:Each item in the Set (in the array) is cloned with an HTML element.

<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 controllers to applications. See the following example:

<Div ng-app = "Demo"> 

<Div ng-app = "Demo" ng-controller = "personCtrl"> name: <input type = "text" ng-model = "firstName"> <br> 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 with items output cyclically 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:Command to directly bind application data 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:Command to hide or display an HTML element.
<Div ng-app = ""> <p ng-show = "true"> I am visible. </P> <p ng-show = "false"> I am invisible. </P> </div>
9. ng-click:The command 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 command to include HTML content.
Filter
Add a pipe character (|) to expressions and instructions
Common expressions:
Currency: format the number as a currency;
Filter: select a subset from the array;
Lowercase: The formatted string is lowercase;
OrderBy: sorts arrays based on an expression;
Uppercase: format the string in uppercase;

<Div ng-app = "Demo" ng-controller = "DemoCtrl"> <p> name: {lastName | uppercase }}</p> </div>
<div ng-app="Demo" ng-controller="DemoCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'">  {{ x.name + ', ' + x.country }} </li> </ul></div>
Service
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 over 30 built-in services;
Custom Service

app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});
var app = angular.module('Demo', []);app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl();}); 
Common built-in services

1. $ http: 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 = angular. module ('Demo', []); app. controller ('democtrl ', function ($ scope, $ http) {$ http ({url: 'Data. json', method: 'get', params: {'username': 'tan '}}). success (function (data, header, config, status) {// response successful }). error (function (data, header, config, status) {// failed to process response });});
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 command. The value defined by rootscope can be used in each controller.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.