Chapter 4 User InterfaCe DesIgn Reusable data or logics can be separate reusable components, which can be shared by injecting into presentation components; this can be achieved using dependency injection. Angular uses a module loader to load all components, modules, and services, rather than explicitly putting script tags into the UI (presentation) component’s template HTML. The presentation component only needs to know about its immediate dependent libraries. Dependency of imported libraries are loaded automatically. The presentation component consists of HTML (templates) and controller components. Data binding between controller and HTML enables you to synchronize application state (model) and the view. In the case of unidirectional data binding, any change in the state of the application updates the view; and in the case of two-way data binding, it binds properties and events together as a single entity so that any change in the model updates the view and vice versa. As shown in Figure 4-8, event binding makes your application respond to user input by updating the application model and data associated with the model. Property binding interpolates values that are computed from the application model into the view (HTML) DXP UI Technology Stack DXP technology stacks are a combination of different frameworks and programming languages used to create a flexible, responsive UI that is mobile and desktop compatible. Multiple technology stacks are available to implement the DXP’s presentation layer. Each layer of the application builds on the features of the one below it. Figure 4-9 shows the major building blocks of a DXP’s UI technology stack, and you can add other custom packages using a package manager, for example, NPM, Bower, etc. 132