[angular] 第1868天 怎样区分Angular表达式和JavaScript表达式？

[haizhilin2013]

第1868天 怎样区分Angular表达式和JavaScript表达式？

3+1官网

我也要出题

[llccing]

区分Angular表达式和JavaScript表达式的问题主要针对AngularJS（1.x）。在AngularJS 1.x中，Angular表达式和JavaScript表达式的区别更为显著。

AngularJS（1.x）中的区别

Angular表达式

• 语法：Angular表达式通常使用双花括号{{ }}包裹，如{{ expression }}，也可以在指令中使用如ng-if="expression"。
• 限制：
  • 不能使用控制流语句（如if、for）。
  • 不能访问全局对象（如window、document）。
  • 安全性设计，防止执行潜在危险的代码。
• 特性：自动监视并更新视图（通过脏检查机制）。

JavaScript表达式

• 语法：标准JavaScript语法，没有特定的包裹符号。
• 功能：
  • 可以执行任何JavaScript代码，包括控制流语句。
  • 可以访问和操作全局对象和浏览器API。
• 使用场景：在控制器、服务、指令等Angular组件中。

Angular（2+）中的区别

在Angular 2及其后续版本中，这种区分变得不再那么明显。Angular（2+）主要使用的是模板语法，而不再是传统的AngularJS表达式。Angular模板语法更接近于标准的HTML，并且使用了绑定语法和指令来实现数据绑定和视图更新。

模板语法

• 语法：使用模板绑定语法，如插值绑定{{ expression }}和属性绑定[property]="expression"。
• 限制：模板表达式中的语法是JavaScript的一个子集，不能包含复杂的逻辑或控制流语句。
• 安全性：同样设计为安全，防止执行潜在危险的代码。
• 特性：通过Angular的变更检测机制（结合Zone.js和其他技术）自动更新视图。

示例对比

AngularJS（1.x）

Angular表达式：

<div>
  <p>{{ message }}</p>
  <p ng-if="isVisible">{{ info }}</p>
</div>

JavaScript表达式：

$scope.message = "Hello, World!";
$scope.isVisible = true;
$scope.info = "Some information";

if ($scope.isVisible) {
  console.log($scope.info);
}

Angular（2+）

模板表达式：

<div>
  <p>{{ message }}</p>
  <p *ngIf="isVisible">{{ info }}</p>
</div>

JavaScript表达式：

export class AppComponent {
  message: string = "Hello, World!";
  isVisible: boolean = true;
  info: string = "Some information";
}

总结

• AngularJS（1.x）：区分明确，Angular表达式用于模板中，JavaScript表达式用于控制器和其他逻辑中。
• Angular（2+）：模板语法更接近于标准HTML和JavaScript的结合体，区分不再显著，但模板表达式仍然有其安全性和功能限制。

希望这些信息能帮助您更好地理解在不同版本的Angular中如何区分和使用表达式。