+44 7459 302492
info@uplatz.com
Aurelia Framework
Aurelia is a JavaScript framework geared towards developers looking for a consistent, clear, well-supported framework for modern browser environments.
A modern architecture, combining adaptive databinding, extensible HTML, full routing capability, broad language support, a strong DI container and testable code; Aurelia is not just another alternative in the framework marketplace, but has quickly become a leading choice amongst some established players.
The Aurelia Framework course provides developers with a broad, rounded, hands-on course, and is fitting for those for which Aurelia may be the first JS framework they have encountered.
-----------------------------------------------------------------------------------------------------------------------------------------------
Who will the Course Benefit?
The Aurelia Framework course is aimed at web developers that wish to use the Aurelia Framework to build modern, testable, extensible web applications.
-----------------------------------------------------------------------------------------------------------------------------------------------
Course Objectives
By the end of the course delegates should be able to:
- Set up an Aurelia Application
- Define and describe IoC/DI in Aurelia
- Develop a web application using the Aurelia framework
- Extend Aurelia with Templating
- Understand Routing in Aurelia
- Call HTTP Services from an Aurelia Application
- Understand Pub/Sub Events in Aurelia
- Secure an Aurelia Web Application
- Understand the Testing of Aurelia Applications
- Build, Bundle and Run Aurelia Applications
----------------------------------------------------------------------------------------------------------------------------------------
Course Description
Aurelia Framework online course get started with core concepts of Aurelia Framework. Aurelia Framework online course intention is to provide a demonstration the core concepts of Aurelia Framework.
Aurelia Framework online course will allow the participants to learn the benefits of implementing core concepts and set up Aurelia Framework.
Aurelia Framework online course is ideally developed for web developers who wants to expertise in web or application server administration.
In the Aurelia Framework online training course, Uplatz provides an in-depth online training for the participants or learners to gain knowledge in improving the web performance and scalability issues. Uplatz provides appropriate teaching and expertise training to equip the participants for implementing the learnt concepts in an enterprise.
Aurelia Framework online training course curriculum covers instalment of Aurelia Framework, custom elements and attributes, aurelia application routing.
With the help of Aurelia Framework online course, the learners can:
-
Inhouse Terminology and concepts related to the Aurelia Framework
-
Set up an Aurelia application
-
Install and configure plugins
-
Use Dependency Injection
-
Bind web components
Uplatz provides an in-depth training to the learners to accelerate their knowledge and skill set required for an Aurelia web developer.
----------------------------------------------------------------------------------------------------------------------------------------
This is an Aurelia Framework course by Uplatz.
Aurelia Framework
Aurelia Framework Training Course
Course Introduction
- Administration and Course Materials
- Course Structure and Agenda
- Delegate and Trainer Introductions
Session 1: INTRODUCTION TO AURELIA
- SPA (Single Page Application) Architecture
- Transpilers and Polyfills
- ECMAScript 2015 and 2016
- About TypeScript and Flow
- Classes
- Modules
- Inheritance
- Modules with Multiple Exports
- Promises
- ES-Next: Decorators & Class Properties
Session 2: USING AURELIA
- Aurelia Overview and Features
- Licensing and Benefits
- Browser Compatibility
- A First Application
- The Aurelia Bootstrapping Process
- Customizing Application Startup
- The Aurelia Skeleton Navigation Starter App
- The Webpack Skeleton Navigation Starter App
- Using Aurelia CLI
- Bundle and Minify
- Using NPM and JSPM
- Contact Manager Tutorial
- Globalising Resources
- Organistion the App with Features
- Leveraging Progressive Enhancements
- Customising Conventions
- Logging
- Integrating Other Technology: Polymer
Session 3: PLUGINS
- Installing Plugins
- Validating Input
- Using the Validation Plugin
- I18N
- Dialog Service Plugin
- Dialing Service and Modal Dialogs
Session 4: CREATING COMPONENTS
- Creating Components
- Component Instantiation with DI
- The Component Lifecycle
Aurelia Framework Training Course
Session 5: IMPLEMENTING MVVM
- MVVM Key Concepts
- MVVM Approaches
- Using the Compose Element to Set Up an MVVM Hierarchy
- Leveraging Compose Element Options
- Implementing Composite View Hierarchies with the Compose Element
- Override View Resolution Conventions
Session 6: USING DEPENDENCY INJECTION
- Object Lifetime, Child Containers, Default Behaviours
- Containers
- Purpose of Dependency Injection and Related Patterns
- Inversion of Control/Dependency Injection: Problem and Solution
- Using the 'inject' Decorator
- Declaratively Registering Lifetime of Instances
- Using Lifetime Management Decorators
- Explicitly Registering Types and Instances
- Using Framework Configuration to Explicitly Register Types
- Using Resolvers
- Lazy Loading and Plugin Instancing
- Registering Global Dependencies
Session 7: AURELIA DATA BINDING
- Data Binding Overview
- Aurelia Data Binding Overview
- Aurelia's Adaptive Data Binding System
- Primary Data Binding Syntax
- A Walk Through the Data Binding so Far
- Binding with innerHTML and textContent
- Data Binding Modes
- Controlling Data Flow with Data Binding Modes
- Event Bindings
Session 8: ADVANCED DATA BINDING
- Using if, show, and ref Bindings
- Using Advanced repeat.for Capabilities
- Specialized Bindings: Style and CSS Bindings
- Using Style and CSS Bindings
- Setting up for Data Input
- Using Select, Radio, and Checkbox Bindings
- Avoiding Dirty Checking
- Using computedFrom Decorator
- Binding with ValueConverters
- Transforming Data with ValueConverters
- Extending Data Binding with Binding Behaviours
- Using updateTrigger, throttle, and debounce Binding Behaviours
- Using the Signal Binding Behaviour
- Custom Binding Behaviours
Aurelia Framework Training Course
Session 9: TEMPLATING: EXTENDING AURELIA
- Templating Basics
- HTML Behaviours Introduction
- Content Projection
- Dynamic Projection
- Dynamic UI Composition
- Custom Elements
- Turning a View and ViewModel into a Custom Element
- Tapping into the Lifecycle of a Custom Element
- Controlling the Name and Container of a Custom Element
- Implementing Replacable Parts in a Custom Element
- Custom Attributes
- Simple Single Valued Custom Attributes
- Passing Multiple Parameters to a Custom Attribute
- Implementing an 'if' Custom Attribute
- Implementing a TemplateController
Session 10: AURELIA ROUTING
- Routing Overview
- Defining and Configuring Routes
- Removing Unnecessary ViewModels
- Defining and Using Basic Routes
- Routing to Multiple Views and Dynamically Generating Nav Menus
- Building out The Client Services Layer of an App
- Passing and Consuming Parameters in Routing
- Using URL Parameters
- Generating Route URLs from Routing Configuration
- Using Query String Parameters
- Programmatic Controlling Navigation
Session 11: FURTHER AURELIA ROUTING
- Screen Activation Lifecycle
- Returning Promises from the Activate Method
- Rejecting Navigation with CanActivate
- Handling Unfinished Actions Before Navigation
- Sibling Navigation Panes with ViewPorts
- Sibling Navigation Panes with ViewPorts
- Child Routing
- Activation Strategies
- Reusing ViewModels with Activation Strategies
- Enabling PushState in Client Addressing
- Custom Navigation Pipeline Steps
- Implementing Custom Navigation Pipeline Steps
Aurelia Framework Training Course
Session 12: HTTP SERVICES
- Overview
- RESTful Services Overview
- Using JSON/XML
- Calling HTTP Services
- Aurelia Simple HTTP Client
- Aurelia Fetch Client
Session 13: PUB/SUB EVENTS
- Pub/Sub Events and EventAggregator
- Using Pub/Sub Events
Session 14: SECURING AURELIA APPLICATIONS
- Introduction to Web Security
- Authentication and Authorisation
- Validation and Sanitization
- Secret Data
Session 15: TESTING
- Testing Components
- End-to-End Testing
- Testing Applications and Frameworks
- Defining and Running Unit Tests
- Defining and Running End-to-End Tests
Session 16: AURELIA PRE-PRODUCTION
- Overview
- Building the Application
- Using the Skeleton Navigation Sample App's Build Infrastructure
- Bundling Applications
- Preparing Code for Build, Bundle, and Run
- Bundling App Modules and Aurelia Libraries
Aurelia Framework online certification course with the help of expert professionals training is recognized across the globe. Because of the increased adoption of the Aurelia Framework in various companies the participants are able to find the job opportunity easily. The leading companies hire aurelia web developer considering their skill of understanding concepts of aurelia web administration. Aurelia Framework online certification course is known for their knowledge in developing interactive websites. After pursuing Aurelia Framework online certification course the participants can become as a web developer, Javascript coder, front-end web developer, web administrative developer and can pursue a wide range of career paths.
-------------------------------------------------------------------------------------------------------------
Aurelia Framework Interview Questions
-------------------------------------------------------------------------------------------------------------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) In Aurelia, What Does System.js Contains?
The scripts/system.js is a modern JavaScript module loader. Since Aurelia itself is written as modules, it encourages to create code in a modular fashion. To use modules in ES 2016, we need a loader for understanding modular code. That is the purpose of SystemJS. It locates modules, understands their dependencies and ensures that everything is properly loaded at runtime.
17) Explain The Purpose Of Constructor() In Aurelia?
Constructor method is used for initializing object created with a class. This method is called first. If we don't specify this method, the default constructor will be used.
For example
export class App
{
constructor()
{
this.counter = 1;
}
}
here we are initializing teh counter property to 1 inside the constructor. Later we can use this in the view and display the value as 1 like
${counter}
18) Explain System.import('aureliabootstrapper'); In Aurelia
The SystemJS module loader provided the SystemJS object. Its has a method import which tells the loader to load/import a module aureliabootstrapper which resides in the aureliacore.min.js. Using this module, Aurelia load the framework, configure and run the application.
19) What DoesSignifies?
On the body tag, there's an aureliaapp attribute targeting to src/main. This tells Aurelia's bootstrapper to load the app viewmodel and it's view and also the host HTML element where the application will be rendered.
20) What Are The Aurelia Advantages?
- Aurelia is very clean. If you follow the frameworks conventions, you can focus on your app without the framework getting on your way.
- It is also easily extensible. You can add or remove any tools that the framework offers and you can also add any other tools that aren't part of the framework.
- Aurelia is very easy to work with. It is directed towards developers experience. This will save you lots of time and headaches on the road.
- The framework itself is directed towards web standards so you will always stay up to date with modern concepts.
- Aurelia don't have the largest community out there, but it is very agile, knowledgeable and willing to help in the short notice.
21) What Are The Aurelia Advantages?
There is no any true limitations. Framework is powerfull and easy to work with. Someone could think that smaller community might couse some problems on the road, but we didn't have those kind of issues.
22) How To Create Custom Elements In Aurelia?
Aurelia offers a way to add components dynamically. You can reuse single component on different pars of your app without need for including HTML multiple times.
Step 1 - Create custom component
Let's create new components directory inside src folder.
C:UsersusernameDesktopaureliaAppsrc>mkdir components
Inside this directory we will create custom-component.html. This component will be inserted later on our HTML page.
custom-component.html
This is some text from dynamic component...
Step 2 - Create main component
We will create simple component in app.js. It will be used to render header and footer text on screen.
app.js
export class MyComponent
{
header = "This is Header";
content = "This is content";
}
Step 3 - Add custom component
Inside our app.html file, we need to require the custom-component.html to be able to insert it dynamically. Once we do that, we can add new element custom-component.
app.html
${header}
${content}
23) How To Convert Currency In Aurelia?
Convert Currency : This is an example of currency formatting. First we need to install numeral library from command prompt.
C:UsersusernameDesktopaureliaApp>jspm install numeral
Converter will set currency format.
converters.js
import numeral from 'numeral';
export class CurrencyFormatValueConverter
{
toView(value)
{
return numeral(value).format('($0,0.00)');
}
}
View-model will just generate random number. We will use this as currency value and update it every second.
app.js
export class App
{
constructor()
{
this.update();
setInterval(() => this.update(), 1000);
}
update()
{
this.myCurrency = Math.random() * 1000;
}
}
Our view will show the randomly generated number transformed as a currency.
app.html
${myCurrency | currencyFormat}
24) Explain About Event Delegate?
Even delegation is useful concept where event handler is attached to one top level element instead of multiple elements on the DOM. This will improve application memory efficiency and should be used whenever possible.
This is simple example of using event delegation with Aurelia framework. Our view will have a button with click.delegate event attached.
app.html
Once the button is clicked, myFunction() will be called.
app.js
export class App
{
myFunction()
{
console.log('The function is triggered...');
}
}
25) Explain About Event Trigger?
Event Trigger : There are some cases when you can't use delegation. Some JavaScript events doesn't support delegation, IOS supports it for some elements. To find out which events allows delegation you can search for a bubble property of any event here. In these cases you can use trigger() method.
The same functionality from example above can be created with click.trigger.
app.html
app.js
export class App
{
myFunction()
{
console.log('The function is triggered...');
}
}
-------------------------------------------------------------------------------------------------------------
