03_Data Binding数据绑定

关注

翻译最新推荐文章于 2025-09-25 14:01:06 发布 440 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

在Angular应用程序中的数据绑定是在模型和视图组件之间的数据的自动同步。Angular实现数据绑定的方式是让你们处理模型在你的应用程序中作为单一可信的来源。视图是模型在任何时候的投影。当模型改变了，视图也会反应变化，反之亦然。

DataBinding in Classical Template Systems

数据绑定在经典模板系统

Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

大多数模板系统的数据绑定只是单一方向的：他们合并模板和模型组件传入一个视图。在合并发生后，更改模型或视图的相关部分将不会自动反映在视图中。更糟的是，用户对视图的任何更改都不会反映在模型中。这意味着，开发人员不得不经常去编写模型与视图和试图与模型同步的代码。

DataBinding in Angular Templates

在Angular模板中的数据绑定

Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state,greatly simplifying the programming model for the developer. You can think ofthe view as simply an instant projection of your model.

Angular模板的工作方式不同。首先，模板（连同任何额外的标记或指令的未编译的HTML）编译在浏览器上。编译过程产生了一个实时的视图。视图中的任何更改被立即反映到模型上，模型中的任何更改将传播到视图上。模型是单一可信的来源对于应用程序的状态，对于开发者来说极大地简化了编程模型。你可以认为视图能够简化的作为你的模型的一个即时投影。

Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

因为视图只是一个模型的投影，所以控制器能够从视图完全分离出来并且不清楚视图。这使得测试变得轻而易举，因为它很容易单独测试你的控制器在没有视图和DOM/浏览器依赖的情况下。

Related Topics