最近几年来,地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持,如城市管理、区划、环境整治等等,地理信息成为信息时代重要的组成部分之一; “数字地球”概念的提出,更进一步推动了作为其技术支撑的GIS的发展。 与此同时,一些学者致力于相关的理论研究,如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面,并且这两个方面构成了相互促进的发展过程。
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. Angularjs2 8
- 1.2. Angular 2 JavaScript environment configuration
- 1.7. Angular 2 form
- 1.4. Angular 2 architecture
- 1.6. Angular 2 user input
- 1.3. Angular 2 TypeScript environment configuration
- > 1.8. Angular 2 template syntax
- 1.5. Angular 2 data display
- 1.1. Angular 2 tutorial
- 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 35
- 4. Appml 12
- 5. Perl 45
- 5. Postgresql 41
- web 15
- 5. Web Services tutorial 6
- 6. Ruby 42
- 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 44
- 11. HTML tutorial-(HTML5 Standard) 54
- 12. Http 6
- 13. Regex 6
- 14. Regexp 8
- 1. Introduction to geographic information system 6
- 2. From the Real World to the Bit World 3
- 3. Spatial Data Model 7
- 4. 空间参照系统和 地图投影 5
- 5. Data in GIS 3
- 6. Spatial data acquisition 2
- 7. Spatial Data Management 6
- 8. Spatial analysis 8
- 9. 数字地形模型( DTM )与地形分析 5
- 10. 空间建模与 空间决策支持 6
- 11. Spatial data representation and map making 6
- 12. 3S Integration Technology 5
- 13. 网络地理信息系统 3
- 14. Examples of Geographic Information System Application 8
- 15. Organization and Management of Geographic Information System Application Projects 9
- 16. Geographic Information system Software Engineering Technology 6
- 17. Geographic Information System Standards 3
- 18. Geographic Information System and Society 3
- 19. Earth Information Science and Digital Earth 3