Angular for Aurelia Transition - Some Key Questions

Question

We are thinking about using Aurelia for a new application. I come from the background of Angular 1 (with some exposure to Angular 2). Aurelia seems pretty enjoyable, and I really like the way they took charge of maintaining the developers workflow. However, I have some questions that I cannot find answers to:

1) There are two general ways (as I understand it) that a web component can be enabled on a page. This is <compose> and write a custom element. My question, coming from Angular, is of great importance for areas (i.e. that which is in scope at a specific point of the DOM). I am wondering what is in the “scope” (i.e., Accessible to bind an expression) with layout and custom elements. I mean, is the parent view model available in the child template? If so, do the child view-model properties perform hidden / shadow properties of the parent view model?

2) In Angular 2, there are recommendations on how data is transmitted and exited from components. We should not change the nonprimitives bound to the component (because this forces Angular 2 to change the detection to always go into this component branch to check all the properties).

Are there any recommendations / information for transferring data to and from components in Aurelia? I mean, from the reading I did, it sounds like I would just use value.bind to bind to all @bindable properties. It's right? Are these two-way links linked by default, or should I explicitly declare value.two-way ? Is there something wrong with changing the properties of a two-way related object?

Thank you in advance

Answer 1

Big questions are some info:

1) There are two general ways (as I understand it) that a web component can be enabled on a page. This is <compose> and write a custom element. My question, coming from Angular, is of great importance for areas (i.e. that which is in scope at a specific point of the DOM). I am interested in what is in the "volume" (i.e., Available to bind the expression) in the composition and user elements. I mean, is the parent view model available in the child template? If so, do the child view-model properties hide / shadow properties of the parent view model?

Consider the following markup:

app.html

 <template> <h1>${message}</h1> <date-picker value.bind="startDate"></date-picker> <compose view="footer.html"></compose> <template> 

<compose> retains access to the external area. When the template contained in footer.html is data bound, it will have access to what app.html bound app.html , for example, it can access the message property.

The custom item template cannot access the outside area. Custom elements are designed for encapsulation and portability. For this reason, they are not allowed access to the external area, which prevents developers from creating custom elements that are expected to be used in specific binding contexts. The main way to get data to / from a user element is through @bindable properties (similar to dependency properties in XAML).

2) In Angular 2, there are recommendations on how data is transmitted and exited from components. We should not change the nonprimitives bound to the component (because this forces Angular 2 to change the detection to always go into this component branch to check all the properties).

Are there any recommendations / information for transferring data to and from components in Aurelia? I mean from the reading I did, it sounds like I would just use value.bind to bind to all @bindable properties. It is right?

right

Are these two-way links by default or do I need to explicitly declare value.two-way ? Is there something wrong with changing the properties of a two-way related object?

Aurelia automatically selects the correct default snap mode for attributes of inline elements, such as inputs or selections. You need to specify default values ​​for custom items if you want something other than one-way . Here's how to do it:

 import {bindingMode} from 'aurelia-framework'; // or 'aurelia-binding'; export class DatePicker { @bindable({ defaultBindingMode: bindingMode.twoWay }) value; // <---- @bindable min = new Date(1900, 0, 1); @bindable max = new Date(2250, 11, 31); ... } 

Answer 2

You can use <compose> as a wildcard. So instead of declaring a web component like <my-component></my-component> , you can do

 <compose view-model.bind="variableContainingModel" model.bind="variableContainingViewModelPath"></compose> 

or simply

 <compose view-model="./my-component.html" model="./my-component.js"></compose> 

Update from Jeremy Dunyu's answer

The compose tag retains access to the external area. When a template is bound to data, it will have access to its parent properties.

A custom component sees all the properties declared in its view model. If you want to share some object of the parent view model with the component, you can use the bindable properties.

 import {bindable} from 'aurelia-framework'; export class MyComponent { @bindable propertyFromMyParent; } 

View:

 <template> <div>${propertyFromMyParent}</div> </template> //parent call <my-component propertyFromMyParent.bind="someProperty"></my-component> 

Bound properties are unidirectional by default. You can override this using:

 import {bindable, bindingMode} from 'aurelia-framework'; @bindable({ defaultBindingMode: bindingMode.twoWay }) propertyFromMyParent 

There is also a content tag that is very useful:

 <template> <content></content> </template> //parent call <my-component>Some Content Here</my-component> 

Hope this helps!