Angular

 https://angular.dev/guide/components

英文官网

中文官网

文档

CLI命令参考手册

项目文件结构

 

 

Sections	Details
what-is-angular
Understanding Angular
Templates	Interpolation （文本插值） uses the double curly braces {{ and }} as delimiters Syntax You can't use JavaScript (=, +=, -=, ... ; , ++, --,|,?,!)    Override interpolation delimiter {{}}插入符是可以通过interpolation 选项自定义成别的，在 @Component() metadata.  interpolation?:[string,string]
	Template statements (模板语句)—respond to events in your templates.
	Binding syntax—绑定语法 请注意，绑定是绑定到 disabled 这个 Property（属性），而不是 Attribute（属性）。数据绑定使用的是 DOM 元素、组件和指令的 Property，而不是 HTML Attribute    HTML attributes and DOM properties Example 1: an <input> <input type="text" value="Sarah"> 不管输入了什么，input.getAttribute('value') 永远是Sarah, 是initial value永远不会变的，输入的值会改变DOM value property,它记录 current value 是会变的。   Example 2: a disabled button <button disabled>Test Button</button>  --> 正确 <button disabled="false">Still Disabled</button> --> 错误，没有这种写法，可以直接去掉disabled attibute   Property and attribute comparison [disabled] 是特性，值为true/false [attr.disabled] 是属性，值为有还是没有 <input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null">
	Property binding—set properties of target elements or directive @Input() decorators. Attribute, class, and style bindings—set the value of attributes, classes, and styles. Event binding—listen for events and your HTML. Two-way binding—share data between a class and its template. Built-in directives—listen to and modify the behavior and layout of HTML. Template reference variables—use special variables to reference a DOM element within a template. Inputs and Outputs—share data between the parent context and child directives or components Template expression operators—learn about the pipe operator, |, and protect against null or undefined values in your HTML. SVG in templates—dynamically generate interactive graphics.

 

 

 

 

---

 

Template reference variables (#)

<input #phone placeholder="phone number" />




<!-- lots of other elements -->

<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>