We have touched on the templates of Angular in the previous chapters, and in this article we will cover the syntax use of Angular in detail.
The template plays the role of a view, which is simply the part that is shown to the user.
HTML
Interpolation expression
Template expression
Template statement
Binding syntax
Property binding
HTML attribute,
classandstylebindingEvent binding
Use
NgModelperform two-way data bindingBuilt-in instruction
\ *andTemplate reference variable
Input and output attributes
Template expression operator
1.8.1. HTML ¶
HTML is the “language” of Angular templates, except
elementsare disabled except for other elementsHTMLelements are supported, such as:<h1>My first Angular applicationh1>
1.8.2. Interpolation expression ¶
The syntax format of the interpolation expression is:
{{ ... }}.The interpolation expression can insert the evaluated string into HTML, or it can be used as an attribute value.
<h3> {{title}} <img src="{{imageUrl}}" style="height:30px"> h3>
1.8.3. Template expression ¶
{{ ... }}is actually a template expression that Angular evaluates and converts to string output.The following example is the addition of two numbers:
The sum of 1 + 1 is {{1 + 1}}
We can use
getVal()to get the value of this expression:[mycode3 type="html"]{{1 + 1 + getVal()}}
Template expressions are similar to JavaScript’s language, and many JavaScript expressions are legal template expressions, but not all of them.
The following JavaScript expressions are prohibited:
-
Assignment expression(
=,+=,-=…) -
New operator
-
With
;or'the connection expression of -
Self-increasing and self-subtracting operations (
++and--other noteworthy things that differ from Javascript syntax include: -
The bit operator is not supported
|and&) -
Operators for template expressions, such as
|and?., etc., has been given a new meaning
1.8.4. Property binding ¶
The attribute binding of the template can set the property of the view element to the template expression.
The most common attribute binding is to set the property of the element to the value of the property in the component. In the following example,
imageof the elementsrcproperty will be bound to the component’simageUrlattribute:<img[src]="imageUrl">
When the component is
isUnchangeddisable a button when (unchanged):<button[disabled]="isUnchanged">The button is disabledbutton>
Set the properties of the instruction:
<div[ngClass]="classes">[ngClass]Bind to classes attributediv>
Set the properties of a custom component (this is an important way to communicate between parent and child components):
<user-detail[user]="currentUser">user-detail>
1.8.5. HTML attribute (Attribute),
classandstylebinding ¶Template syntax provides a special form of one-way data binding for scenarios that are not suitable for attribute binding.
Attribute, binding ¶
Use the HTML tag (Attribute) to bind when the element has no attributes to bind.
Consider ARIA, SVG, and table
colspan/rowspanetc. (Attribute). They are pure attributes. They have no corresponding properties to bind.The following example will report an error:
<tr><tdcolspan="{{1 + 1}}">Three-Fourtd>tr>
We will get this error:
Template parse errors: Can't bind to 'colspan' since it isn't a known native property Template parsing error: cannot bind to 'colspan' as it is not a known native property
As the hint says,
element has no colspanproperty. But interpolation expressions and property bindings can only set properties, notAttribute, so the HTML tag is requiredAttributebinding to createsomething similar to bindingAttribute.The HTML tag feature binding is syntactically similar to attribute binding, but the part in square brackets is not the attribute name of an element, butis represented by a
attr.and the name of the HTML tag attribute, andthen set the value of the HTML tag attribute through an expression that evaluates to a string. Such as:<table border=1> <tr><td [attr.colspan]="1 + 1">One-Twotd>tr> <tr><td>Fivetd><td>Sixtd>tr> table>
Css class binding ¶
With the CSS class binding, we can derive from the element’s
classadd and remove CSS class names on the.CSS class binding is syntactically similar to property binding. But the part in square brackets is not the attribute name of an element, but includes a class prefix, followed by a dot.
(.)followed by the name of the CSS class The latter two parts are optional. For example:[class.class-name].The following example shows how to add and remove the “special” class through the css class binding class:
Bad curly specialBad curlyThis style is quite uniquestylestyle binding ¶With style binding, you can set inline styles. Style binding syntax is similar to attribute binding, but the part in square brackets is not the attribute name of an element, style binding includes a
style.followedby the property name of the css style, for example:[style.style-property].Style attributes can be centerline naming (font-size) or hump naming (fontSize).
1.8.6. Event binding ¶
In event binding, Angular responds to the corresponding data flow by listening for user actions, such as keyboard events, mouse events, touch screen events, and so on-from the view target to the data source.
The syntax for event binding consists of the target event in parentheses to the left of the equal sign and the template declaration in quotation marks on the right.
For example, the following example is the click event of the event binding listener button. Whenever you click the mouse, the component will be called.``onSave()`` method.
<button(click)="onSave()">Savebutton>
The name in parentheses– such as (click)– marks the target event. In the following example, the target is the button
clickevents.<button(click)="onSave()">Savebutton>
You can also use the
on-form of prefix:<buttonon-click="onSave()">On Savebutton>
1.8.7. Use
NgModelperform two-way data binding ¶When developing a data entry form, the expected result is that you can both display the component’s data on the form and update the component’s data when the user modifies it.
The following is a pass
[(NgModel)]to implement two-way binding:<input[(ngModel)]="currentUser.firstName">
[]Realize the data flow from component to template()realizes the combination of data flow from template to component.[()]Two-way binding is implemented.Use syntax in the form of a prefix:
<inputbindon-ngModel="currentUser.firstName">
1.8.8. Built-in instruction ¶
The built-in instructions for Angular are
NgClass、NgStyle、NgIf、NgFor、NgSwitch, etc.NgClass¶By binding to the
NgClassdynamically add or remove CSS classes.<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" > This div is in large size. div>
NgStyle¶NgStyleBy binding it to akey:valuecontrolling the form of the object allows us to set many inline styles at the same time.setStyles() { let styles = { // CSS Property Name 'font-style': this.canSave ? 'italic' : 'normal', // italic 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal 'font-size': this.isSpecial ? '24px' : '8px', // 24px }; return styles; }By adding a
NgStyleproperty binding, let it call thesetStylesand style the element accordingly<div [ngStyle]="setStyles()"> The style of this div is italic, normal weight, and extra large (24px). div>
NgIf¶By putting
NgIfdirective binds to a truth expression that adds an element and its child elements to theDOMin the tree.<div\*ngIf="currentUser">Hello,{{currentUser.firstName}}div>
Instead, binding to a false value expression will start from the
DOMremoves the element and its child elements from the tree. Such as:NgSwitch¶When you need to display one of them conditionally from a set of possible element trees, you need
NgSwitch. Angular will add only the selected elements to theDOM. Such as:<span [ngSwitch]="userName"> <span *ngSwitchCase="'Zhang San'">Zhang Sanspan> <span *ngSwitchCase="'Li Si'">Li Sispan> <span *ngSwitchCase="'Wang Wu'">Wang Wuspan> <span *ngSwitchCase="'Zhao Liu'">Zhao Liuspan> <span *ngSwitchDefault>Longdaspan> span>
As a parent instruction
NgSwitchbind to an expression that returns a switch value, which in this case is a string, but it can be any type of value. Parent instructionNgSwitchcontrol a groupchild elements. Every one of them.is either hung on an expression that matches the value, or is marked as the default. At any time, thesespanat most one of the will appear in DOM. If thisspanthe matching value is equal to the switch value, and Angular2 takes thisadd to DOM. If there are nospanon the match, Angular2 willset the defaultspanadd to DOM. Angular2 removes and destroys all otherspan.Three directives for mutual cooperation:
-
ngSwitch:Bind to an expression that returns a switch value -
ngSwitchCase:Bind to an expression that returns a matching value -
ngSwitchDefaultattribute used to mark the default element Note: don’tngSwitchpre-use*instead, you should bind with properties, butngSwitchCaseandngSwitchDefaultto put it in the front.*.
NgFor¶This directive is required when you need to display a list of multiple items. As in the following example, it is applied to a HTML block
NgFor.<div\*ngFor="let user of users">{{user.fullName}}div>
NgForcan also be applied to a component element, such as:<user-detail\*ngFor="let user of users"[user]="user">user-detail>
ngFordirective supports an optionalindexthe index grows from 0 to the length of the array during the iteration.You can capture this by entering variables from the template
indexand apply it to the template The following example putsindexcaptured a man namediin the variable.<div *ngFor="let user of users; let i=index">{{i + 1}} - {{user.fullName}}div>
NgForTrackBy¶ngForinstructions sometimes perform poorly, especially in large lists. A small change, removal, or addition to an entry can lead to cascadingDOMoperation.For example, when the address book is refreshed from the server, the refreshed list may contain many, if not all, previously displayed contacts. But in Angular’s view, it doesn’t know what has existed before, and can onlyclean up the old list and discard those.
DOMelement and use the newDOMelement to recreate a new list.To solve this problem, you can avoid this hassle by tracking functions. The tracking function tells Angular: we know that two have the same `` user.id``is with the same contact. Such as:
trackByUsers(index: number, user: User){return user.id}
Then, put
NgForTrackBythe instruction is set to that tracking function:<div *ngFor="let user of users; trackBy:trackByUsers">({{user.id}}) {{user.fullName}}div>
The tracking function does not exclude all
DOMchange. If the attribute used to determine whether it is the same contact has changed, it will be updatedDOMelement, otherwise it will leave this.DOMelement. The list interface becomes smoother and more responsive.1.8.9. Template reference variable ¶
The template reference variable is a reference to the
DOMa reference to an element or instruction.It can be used in the original
DOMelement and can also be used with Angular components– in fact, it works with any custom Web component.We can reference template reference variables in the same element, sibling element, or any child element.
Here are two examples of creating and using template reference variables:
The (#) prefix of “phone” means we are going to define a
phonevariable.- 1. Geographical Information Systems in the World Wide Web Era 4
- 2. Basic technology of WebGIS 4
- 3. Geographic Web Services 5
- 4. aggregation of geographical information 4
- 5. mobile GIS 5
- 6. Geographic information portal 3
- 7. New generation national spatial data infrastructure and GIS 4
- 8. Application of WebGIS in E-Commerce 3
- 9. Application of WebGIS in E-government 3
- 10. Hotspots and frontiers of WebGIS 2
- 1. Angularjs2 8
- 1. SVG tutorial 19
- 1. Memcached 20
- 1. C# tutorial 61
- 1. Sqlite 47
- 2. Go 43
- 2. Docker 59
- 2. Vue3 19
- 2. Servlet 21
- 3. React 23
- 3. SOAP tutorial 10
- 3. Android 18
- 3. Mongodb 44
- 3. Kotlin 18
- 4. Lua 31
- 4. MySQL tutorial 34
- 4. Appml 12
- 5. Perl 45
- 5. Postgresql 41
- web 15
- 5. Web Services tutorial 6
- 6. Ruby 41
- 6. Design-pattern 35
- 7. Django 18
- 7. Rust 22
- 6. WSDL tutorial 8
- 8. Foundation 39
- 9. Ios 43
- 8. Css3 26
- 9. Swift 43
- 11. HTML tutorial-(HTML5 Standard) 54
- 12. Http 6
- 13. Regex 6
- 14. Regexp 7
Principles, Technologies, and Methods of Geographic Information Systems
102In recent years, Geographic Information Systems (GIS) have undergone rapid development in both theoretical and practical dimensions. GIS has been widely applied for modeling and decision-making support across various fields such as urban management, regional planning, and environmental remediation, establishing geographic information as a vital component of the information era. The introduction of the “Digital Earth” concept has further accelerated the advancement of GIS, which serves as its technical foundation. Concurrently, scholars have been dedicated to theoretical research in areas like spatial cognition, spatial data uncertainty, and the formalization of spatial relationships. This reflects the dual nature of GIS as both an applied technology and an academic discipline, with the two aspects forming a mutually reinforcing cycle of progress.
- 1. Introduction to Geographic Information Systems 6
- 2. From the Real World to the Bit World 3
- 3. Spatial Data Model 7
- 4. Spatial Reference Systems and Map Projections 5
- 5. Data in GIS 4
- 6. Spatial data acquisition 2
- 7. Spatial Data Management 6
- 8. Spatial analysis 8
- 9. Digital Terrain Model (DTM) and Terrain Analysis 5
- 10. Spatial modeling and spatial decision support 6
- 11. Spatial data representation and map making 6
- 12. 3S Integration Technology 5
- 13. Network Geographic Information System 4
- 14. Examples of Geographic Information System Application 8
- 15. Organization and Management of Geographic Information System Application Projects 10
- 16. Geographic Information system Software Engineering Technology 7
- 17. Geographic Information System Standards 3
- 18. Geographic Information System and Society 3
- 19. Earth Information Science and Digital Earth 4