Aurelia Interview Questions for freshers experienced :-
1. What is Aurelia?
Aurelia is an open source UI framework which is used for web and mobile app development.
This framework is focused on web standards and follows simple conventions.
2. What are the features of Aurelia?
There are 5 Features of Aurelia:
- Components
- Web Standards
- Extensible
- Commercial Support
- License
3. What are the advantages of Aurelia?
Advantages of Aurelia are:
- It is very clean
- Easily extensible
- It is very easy to use
- It is directed towards web standards
4. What are the component life cycle methods of Aurelia?
The component life cycle methods of Aurelia are:
- constructor()
- created(owningView, myView)
- bind(bindingContext, overrideContext)
- attached()
- detached()
- unbind()
5. What is eventAggregator() plugin in Aurelia?
The eventAggregator() plugin is used for cross-component communication.
This plugin is also used to handle subscribing and publishing to messages or channels inside your app.
6. What are the types of Official Plugins used in Aurelia?
Types of Official Plugins used are:
i18n()
fetch()
dialog()
animatorCSS()
validation()
animator-velocity()
ui-virtualization()
7. What are the types of Standard Plugins used in Aurelia?
Types of Standard Plugins used are:
Router()
History()
eventAggregator()
defaultResources()
defaultBindingLanguage()
8. What is Throttle in Aurelia?
Throttle: It is used to slow down the rate of updating input view-model.
9. What is Debounce in Aurelia?
Debounce: It will update the binding after the user has stopped typing. It is almost the same as throttle.
10. Which command is used to install i18n plugin in Aurelia?
Command used is: C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n
11. What is fetch() plugin in Aurelia?
fetch(): This plugin is used for handling HTTP requests. You can also use some other AJAX library.
12. What is i18n() plugin?
i18n() Plugin is used for internalization and localization.
13. What is animator-velocity() in Aurelia?
animator-velocity(): It is the standard plugin of Aurelia.
Here, you can use velocity animation library instead of CSS animations.
14. What is ui-virtualization() in Aurelia?
ui-virtualization(): This plugin is a useful library for handling large performance heavy UI tasks.
15. What are the types of data bindings used in Aurelia?
There are two types of bindings used in Aurelia are:
- Simple Binding
- Two-Way Binding
16. What is the significance of index.html in Aurelia?
index.html is deafult page of the app like in most of the HTML based apps. It is a place where scripts and stylesheets are loaded.It looks as under
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia‐app=”src/main”>
<script src=”scripts/system.js”></script>
<script src=”scripts/config‐typescript.js”></script>
<script src=”scripts/aurelia‐core.min.js”></script>
<script>
System.import(‘aurelia‐bootstrapper’);
</script>
</body>
</html>
We can also configure the programming language selection.Let’s adjust our programming language. The default is pointing to TypeScript.
<script src=”scripts/config‐typescript.js”></script>
However, we will choose ESNext. So we need to change that to <script src=”scripts/config‐esnext.js”></script>
So our index.html will now look like
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia‐app=”src/main”>
<script src=”scripts/system.js”></script>
<script src=”scripts/config‐esnext.js”></script>
<script src=”scripts/aurelia‐core.min.js”></script>
<script>
System.import(‘aurelia‐bootstrapper’);
</script>
</body>
</html>
17. Explain the components Of Aurelia?
Components are main building blocks of Aurelia framework.
Simple Component :
Each component contains view-model which is written in JavaScript and view, written in HTML. You can see our view-model definition below. This is an ES6 example but you can also use TypeScript.
app.js
export class MyComponent
{
header = “This is Header”;
content = “This is content”;
}
We can bind our values to the view as shown in example below. ${header} syntax will bind the defined header value from MyComponent. The same concept is applied for content.
app.html
${header}
${content}