Whenever you reference a module by string, you need to usePLATFORM.moduleName("moduleName")to wrap the bare string. PLATFORM.moduleName is designed to teachWebpackabout Aurelia's dynamic loading behavior.
What is a globalResources?
When you create a view in Aurelia, it is completely encapsulated so you mustrequirecomponents into an Aurelia view. However, certain components are used so frequently across views that it can become very tedious to import them over and over again. To solve this problem, Aurelia lets you explicitly declare certain "view resources" as global.
What is a feature?
Sometimes you have a whole group of components or related functionality that collectively form a "feature". This "feature" may even be owned by a particular set of developers on your team. You want these developers to be able to manage the configuration and resources of their own feature, without interfering with the other parts of the app. For this scenario, Aurelia provides the "feature".
What is a plugin?
Similar to features, you can install 3rd party plugins. The main difference is that a "feature" is provided internally by your application, while a plugin is installed from a 3rd party source through your package manager.
What does setRoot() do?
Instantiates the root component and adds it to the DOM.
One of the best and most exciting changes has been made in this section.
What happened to PLATFORM.moduleName?
Aurelia 2 works with any bundler without limitation or specific configuration so I'm sure you guessed it, you don't need PLATFORM.moduleName("moduleName") anymore.
Is globalResourcesstill supported?
Yes, Any component or class you add to the applicationregister()will be globally accessible through DI.
How can I have a plugin?
If you are creating aplugin , then the usual practice is to export a configuration object. That can be registered in the client code. As a best practice, we recommend an alternate approach to registering each component individually in this way. Instead, create a folder where you keep all your shared components. In that folder, create a registry.ts module where you re-export your components. Then, import that registry module and pass it to the application's register method at startup.
// main.tsimport Aurelia from'aurelia';import { App } from'./app';import*as globalComponents from'./components/registry';Aurelia.register( globalComponents // This globalizes all the exports of the registry. ).app(App).start();
What happened to feature?
This is conceptually similar topluginso you can do the same for internal use.
Where is the setRoot()?
The app()method is equivalent of the setRoot().
Components
The Root Component
The root of any Aurelia application is a single component, which contains everything within the application, actually, the root component.
Unlike version 1, There is a convention for loading your CSS file when the name is the same as the component, just like my-app.css, so you don't need to import it manually.
To import any style, component or etc you should use import. An alternative to require in version 1. By default, the components you create aren't global. What that means is that you can't use a component within another component, unless that component has been imported.
Wrapping the whole HTML content via template is optional.
The Component Life-cycle
Every component instance has a life-cycle that you can tap into. This makes it easy for you to perform various actions at particular times
Aurelia 1 has a restriction and the community made an afterAttached plugin that is called after all child components are attached, and after all two-way bindings have completed. Theattachedlife-cycle in version 2 covers this scenario.
Which life-cycle hooks are most used?
Such cases can be summarized.
Dependency injection
A dependency injection container is a tool that can simplify the process of decomposing such a system. Oftentimes, when developers go through the work of destructuring a system, they introduce a new complexity of "re-assembling" the smaller parts again at runtime. This is what a dependency injection container can do for you, using simple declarative hints.
{% hint style="info" } In v2, if an expression return a function, that function will be use as the handler for the event. V1 only evaluates the expression. {% endhint }
Contextual Properties
General
Event
Repeater
@computedFrom
@computedFrom tells the binding system which expressions to observe. When those expressions change, the binding system will re-evaluate the property (execute the getter).
In Aurelia 2, The framework automatically computes observation without the need for any configuration or decorator.