Category: aurelia

Aurelia – Localization ”; Previous Next Aurelia offers i18n plugin. In this chapter, you will learn how to localize your app using this plugin. Step 1 – Install a Plugin Open the command prompt window and run the following code to install i18n plugin. C:UsersusernameDesktopaureliaApp>jspm install aurelia-i18n We also need to install backend plugin. C:UsersusernameDesktopaureliaApp>jspm install npm:i18next-xhr-backend Step 2 – Create Folders and Files In the project root folder, we need to create a locale directory. C:UsersusernameDesktopaureliaApp>mkdir locale In this folder, you need to add new folders for any language you want. We will create en with translation.js file inside. C:UsersusernameDesktopaureliaApplocale>mkdir en C:UsersusernameDesktopaureliaApplocaleen>touch translation.json Step 3 – Use a Plugin You need to use manual bootstrapping to be able to use this plugin. Check the Configuration chapter for more information. We need to add i18n plugin to the main.js file. main.js import {I18N} from ”aurelia-i18n”; import XHR from ”i18next-xhr-backend”; export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging() .plugin(”aurelia-i18n”, (instance) => { // register backend plugin instance.i18next.use(XHR); // adapt options to your needs (see http://i18next.com/docs/options/) instance.setup({ backend: { loadPath: ”/locales/{{lng}}/{{ns}}.json”, }, lng : ”de”, attributes : [”t”,”i18n”], fallbackLng : ”en”, debug : false }); }); aurelia.start().then(a => a.setRoot()); } Step 4 – Translation JSON File This is the file where you can set translation values. We will use an example from an official documentation. The de-DE folder should actually be used for translating to German language, however we will use English phrases instead, for easier understanding. translation.json { “score”: “Score: {{score}}”, “lives”: “{{count}} life remaining”, “lives_plural”: “{{count}} lives remaining”, “lives_indefinite”: “a life remaining”, “lives_plural_indefinite”: “some lives remaining”, “friend”: “A friend”, “friend_male”: “A boyfriend”, “friend_female”: “A girlfriend” } Step 5 – Set Locale We just need to import i18n plugin and set it to use JSON code from de-DE folder. app.js import {I18N} from ”aurelia-i18n”; export class App { static inject = [I18N]; constructor(i18n) { this.i18n = i18n; this.i18n .setLocale(”de-DE”) .then( () => { console.log(”Locale is ready!”); }); } } Step 6 – View There are couple of ways to translate data. We will use a custom ValueConverter named t. You can see in the following example various ways of formatting data. Compare this with the translation.json file and you will notice the patterns used for formatting. <template> <p> Translation with Variables: <br /> ${ ”score” | t: {”score”: 13}} </p> <p> Translation singular: <br /> ${ ”lives” | t: { ”count”: 1 } } </p> <p> Translation plural: <br /> ${ ”lives” | t: { ”count”: 2 } } </p> <p> Translation singular indefinite: <br /> ${ ”lives” | t: { ”count”: 1, indefinite_article: true } } </p> <p> Translation plural indefinite: <br /> ${ ”lives” | t: { ”count”: 2, indefinite_article: true } } </p> <p> Translation without/with context: <br /> ${ ”friend” | t } <br /> ${ ”friend” | t: { context: ”male” } } <br /> ${ ”friend” | t: { context: ”female” } } </p> </template> When we run the app, we will get the following output. Print Page Previous Next Advertisements ”;

Aurelia – Community ”; Previous Next Community is one of the most important factors to consider when choosing a framework. Aurelia offers fantastic support for its customers. In this chapter, you will learn how you can get help when you are stuck. Aurelia – Official Documentation You can find Aurelia docs on this link − https://aurelia.io/docs.html Aurelia Gitter – Channel If you need a fast answer, you can always submit a question to aurelia gitter channel. This channel can be found on the following link − https://gitter.im/Aurelia/Discuss Aurelia – Github You can also submit an issue to official Aurelia github repository https://github.com/aurelia Aurelia – Blog If you want to keep track of any updates and changes of Aurelia, you can follow Durandal”s official blog http://blog.durandal.io/ Aurelia – Rob Eisenberg Blog You can also follow the official blog of Rob Eisenberg, creator of Aurelia framework http://eisenbergeffect.bluespire.com/ Aurelia – Enterprise Support Aurelia offers enterprise support for teams and individuals. If you are interested, send an email to the following address − [email protected] Aurelia – Hire Dev Team You can hire Aurelia Expert Developers by sending an email to this address. [email protected] Aurelia – Training If you want Aurelia official training for your team, you can send an email to this address. [email protected] Print Page Previous Next Advertisements ”;

Aurelia – Debugging ”; Previous Next In this chapter, you will learn how to add Aurelia context debugger as a chrome extension. Note − Before adding the extension, you need to have aurelia-tools files. If you don”t have it, you can check Tools chapter. Step 1 – Open Chrome Extensions The easiest way to open chrome extensions is to run the following code in browser’s URL bar. chrome://extensions Step 2 – Add Extension Since this extension isn”t yet available from Chrome store, check developermode checkbox and click Load Unpacked Extensions. This will open a small window where you can choose the extension to add. For this example, let us choose Desktop/aurelia-projects/tools/context-debugger folder and open it. Now, we can see that the extension is loaded in the browser. We can also check the developers console. When we click elements tab, we will see aurelia-properties at the bottom right corner. Print Page Previous Next Advertisements ”;

Aurelia – Quick Guide ”; Previous Next Aurelia – Overview The best definition of the framework can be found in Aurelia official docs − Well, it”s actually simple. Aurelia is just JavaScript. However, it”s not yesterday”s JavaScript, but the JavaScript of tomorrow. By using modern tooling we”ve been able to write Aurelia from the ground up in ECMAScript 2016. This means we have native modules, classes, decorators and more at our disposal…and you have them too. Not only is Aurelia written in modern and future JavaScript, but it also takes a modern approach to architecture. In the past, frameworks have been monolithic beasts. Not Aurelia though. It”s built as a series of collaborating libraries. Taken together, they form a powerful and robust framework for building Single Page Apps (SPAs). However, Aurelia”s libraries can often be used individually, in traditional web sites or even on the server-side through technologies such as NodeJS. Aurelia – Features Components − Components are building blocks of Aurelia framework. It is composed of HTML view and JavaScript view-model pairs. Web Standards − This is one of the cleanest modern frameworks, completely focused on web standards without unnecessary abstractions. Extensible − The framework offers an easy way to integrate with the other needed tools. Commercial Support − Aurelia offers commercial and enterprise support. It is an official product of Durandal Inc. License − Aurelia is open sourced and licensed under MIT license. Aurelia – Advantages Aurelia is very clean. If you follow the frameworks conventions, you can focus on your app without the framework getting in 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. It saves you lots of time. The framework itself is directed towards web standards so you will always stay up to date with modern concepts. Aurelia doesn’t have the largest community out there, but it is very agile, knowledgeable and willing to help within short notice. Limitations There are no major limitations. The Framework is powerful and easy to work with. Aurelia – Environment Setup In this chapter, you will learn how to get started with Aurelia framework. Before you do that, you will need NodeJS installed on your system. Sr.No Software & Description 1 NodeJS and NPM NodeJS is the platform needed for Aurelia development. Checkout our NodeJS Environment Setup. Step 1 – Download Aurelia Package Before we download Aurelia package, let”s create a folder on desktop where our app will be placed. C:UsersusernameDesktop>mkdir aureliaApp Now we can download the package from official Aurelia website. Aurelia supports ES2016 and TypeScript. We will use ES2016. Extract the downloaded files inside the aureliaApp folder that we created above. Step 2 – Install the Web Server First we need to install the web server from command prompt window. C:UsersusernameDesktopaureliaApp>npm install http-server -g Step 3 – Start the Web Server To start the web server, we need to run the following code in command prompt. C:UsersusernameDesktopaureliaApp>http-server -o -c-1 We can see our first Aurelia app in the browser. Aurelia – First Application In this chapter, we will explain Aurelia starting app created in our last chapter. We will also guide you through the folder structure, so you can grasp the core concepts behind Aurelia framework. Folder Structure package.json represents documentation about npm packages installed. It also shows the version of those packages and provides an easy way to add, delete, change version or automatically install all packages when the app needs to be shared between developers. index.html is the default page of the app like in most of the HTML based apps. It is a place where scripts and stylesheets are loaded. config.js is Aurelia loader configuration file. You will not spend much time working with this file. jspm_packages is the directory for the SystemJS loaded modules. styles is the default styling directory. You can always change the place where you keep your styling files. src folder is a place where you will spend most of your development time. It keeps HTML and js files. Source Files As we already stated, the src directory is the place where your app logic will be held. If you look at the default app you can see that app.js and app.html are very simple. Aurelia allows us to use JavaScript core language for class definitions. Following default example shows EC6 class. app.js export class App { message = ”Welcome to Aurelia!”; } The message property is bound to the HTML template using ${message}syntax. This syntax represents one-way binding converted into string and showed inside the template view. app.html <template> <h1>${message}</h1> </template> As we already discussed in the last chapter, we can start the server by running the following command in the command prompt window. C:UsersusernameDesktopaureliaApp>http-server -o -c-1 Application will be rendered on the screen. Aurelia – Components Components are the main building blocks of Aurelia framework. In this chapter, you will learn how to create simple components. Simple Component As already discussed in the previous chapter, each component contains view-model which is written in JavaScript, and view written in HTML. You can see the following view-model definition. It 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 the following example. ${header}syntax will bind the defined header value from MyComponent. The same concept is applied for content. app.html <template> <h1>${header}</h1> <p>${content}</p> </template> The above code will produce the following output. Component Functions If you want to update the header and footer when the user clicks the button, you can use the following example. This time we are defining header and footer inside EC6 class constructor. app.js export class App{ constructor() { this.header = ”This is Header”; this.content = ”This is content”;

Aurelia – Bundling ”; Previous Next In this chapter, you will learn how to use bundling in Aurelia framework. Step 1 – Installing Prerequisites You can install aurelia-bundler by running the following command in the command prompt. C:UsersusernameDesktopaureliaApp>npm install aurelia-bundler –save-dev If you don”t have gulp installed, you can install it by running this code. C:UsersusernameDesktopaureliaApp>npm install gulp You can also install require-dir package from npm. C:UsersusernameDesktopaureliaApp>npm install require-dir Step 2 – Create Folders and Files First, create gulpfile.js file in apps root directory. C:UsersusernameDesktopaureliaApp>touch gulpfile.js You will need the build folder. In this directory, add another folder named tasks. C:UsersusernameDesktopaureliaApp>mkdir build C:UsersusernameDesktopaureliaAppbuild>mkdir tasks You need to create bundle.js file inside tasks folder. C:UsersusernameDesktopaureliaAppbuildtasks>touch bundle.js Step 3 – Gulp Use gulp as the task runner. You need to tell it to run the code from buildtasksbundle.js. gulpfile.js require(”require-dir”)(”build/tasks”); Now, create the task that you need. This task will take the app, create dist/appbuild.js and dist/vendor-build.js files. After the bundling process is complete, the config.js file will also be updated. You can include all files and plugins you want to inject and minify. bundle.js var gulp = require(”gulp”); var bundle = require(”aurelia-bundler”).bundle; var config = { force: true, baseURL: ”.”, configPath: ”./config.js”, bundles: { “dist/app-build”: { includes: [ ”[*.js]”, ”*.html!text”, ”*.css!text”, ], options: { inject: true, minify: true } }, “dist/vendor-build”: { includes: [ ”aurelia-bootstrapper”, ”aurelia-fetch-client”, ”aurelia-router”, ”aurelia-animator-css”, ], options: { inject: true, minify: true } } } }; gulp.task(”bundle”, function() { return bundle(config); }); The command prompt will inform us when bundling is complete. Print Page Previous Next Advertisements ”;

Aurelia – Forms ”; Previous Next In this chapter, you will learn how to use forms in Aurelia framework. Text Input First, we will see how to submit an input form. The view will have two input forms for username and password. We will use value.bind for data binding. app.html <template> <form role = “form” submit.delegate = “signup()”> <label for = “email”>Email</label> <input type = “text” value.bind = “email” placeholder = “Email”> <label for = “password”>Password</label> <input type = “password” value.bind = “password” placeholder = “Password”> <button type = “submit”>Signup</button> </form> </template> The signup function will just take the username and password values from the inputs and log it in the developer’s console. export class App { email = ””; password = ””; signup() { var myUser = { email: this.email, password: this.password } console.log(myUser); }; } Checkbox The following example will demonstrate how to submit a checkbox with Aurelia framework. We will create one checkbox and bind the checked value to our view-model. app.html <template> <form role = “form” submit.delegate = “submit()”> <label for = “checkbox”>Checkbox</label> <input type = “checkbox” id = “checkbox” checked.bind = “isChecked”><br/> <button type = “submit”>SUBMIT</button> </form> </template> Form submitting will just log the checked value in the console. app.js export class App { constructor() { this.isChecked = false; } submit() { console.log(“isChecked: ” + this.isChecked); } } Radio Buttons The following example will demonstrate how to submit radio buttons. The syntax repeat.for = “option of options” will repeat through an array of objects and create a radio button for each object. This is a neat way of dynamically creating elements in Aurelia framework. Rest is the same as in the previous examples. We are binding the model and the checked values. app.html <template> <form role = “form” submit.delegate = “submit()”> <label repeat.for = “option of options”> <input type = “radio” name = “myOptions” model.bind = “option” checked.bind = “$parent.selectedOption”/> ${option.text} </label> <br/> <button type = “submit”>SUBMIT</button> </form> </template> In our view-model, we will create an array of objects this.options and specify that the first radio button is checked. Again, the SUBMIT button will just log in the console which radio button is checked. app.js export class PeriodPanel { options = []; selectedOption = {}; constructor() { this.options = [ {id:1, text:”First”}, {id:2, text:”Second”}, {id:3, text:”Third”} ]; this.selectedOption = this.options[0]; } submit() { console.log(”checked: ” + this.selectedOption.id); } } If we check the third radio button and submit our form, the console will show it. Print Page Previous Next Advertisements ”;

Aurelia – History ”; Previous Next In this chapter, you will learn how to use aurelia-history plugin. Step 1 – Install the Plugin This plugin is already available as a part of the standard configuration. If you have set aurelia.use.standardConfiguration() as a part of a manual configuration, you are ready to go. main.js export function configure(aurelia) { aurelia.use .standardConfiguration() .developmentLogging(); aurelia.start().then(() => aurelia.setRoot()); } Step 2 – Using the History We will use an example from the last chapter (Aurelia – Routing). If we want to set the functionality for navigating back or forward, we can use the history object with back() and forward() methods. We will add this after a router configuration. app.js export class App { configureRouter(config, router) { config.title = ”Aurelia”; config.map([ { route: [””,”home”], name: ”home”, moduleId: ”./pages/home/home”, nav: true, title:”Home” }, { route: ”about”, name: ”about”, moduleId: ”./pages/about/about”, nav: true, title:”About” } ]); this.router = router; } goBack() { history.back(); } goForward() { history.forward(); } } Now, let”s add two buttons to our view. app.html <template> <nav> <ul> <li repeat.for = “row of router.navigation”> <a href.bind = “row.href”>${row.title}</a> </li> </ul> </nav> <button click.delegate = “goBack()”></button> //The button used for navigationg back… <button click.delegate = “goForward()”></button> //The button used for navigationg forward… <router-view></router-view> </template> The users can navigate back and forward by clicking the buttons we added. Print Page Previous Next Advertisements ”;

Aurelia – Tools ”; Previous Next In this chapter, you will learn how to set up and use aurelia-tools. Step 1 – Root Folder Let”s create a root folder where we will keep all Aurelia apps. C:UsersusernameDesktop>mkdir aurelia-projects Step 2 – Aurelia Tools Inside aurelia-projects folder, we will clone aurelia-tools repository from github. C:UsersusernameDesktopaurelia-projects>git clone https://github.com/aurelia/tools.git Step 3 – Create a New Project To start a new Aurelia project, the recommended way is to use one of the aurelia-skeletons. Let”s clone Aurelia skeletons from git. C:UsersusernameDesktopaurelia-projects>git clone https://github.com/aurelia/skeleton-navigation.git We also need to install packages, modules, and dependencies. You can choose between various skeleton apps. We will use skeleton-es2016. C:UsersusernameDesktopaurelia-projectsskeleton-navigationskeleton-es2016>npm install C:UsersusernameDesktopaurelia-projectsskeleton-navigationskeleton-es2016>jspm install Finally, we need to run the following code to build the development environment. C:UsersusernameDesktopaurelia-projectsskeleton-navigationskeleton-es2016>gulp build-dev-env Step 4 – Update Update local repositories using the following command. C:UsersusernameDesktopaurelia-projectsskeleton-navigationskeleton-es2016>gulp update-own-deps Step 5 – Pull We can also pull Aurelia dependency without building. C:UsersusernameDesktopaurelia-projectsskeleton-navigationskeleton-es2016>gulp pull-dev-env Print Page Previous Next Advertisements ”;

Aurelia – Event Aggregator ”; Previous Next Event aggregator should be used when your events need to be attached to more listeners or when you need to observe some functionality of your app and wait for the data update. Aurelia event aggregator has three methods. The publish method will fire off events and can be used by multiple subscribers. For subscribing to an event, we can use the subscribe method. And finally, we can use the dispose method to detach the subscribers. The following example demonstrates this. Our view will just have three buttons for each of the three functionalities. app.html <template> <button click.delegate = “publish()”>PUBLISH</button><br/> <button click.delegate = “subscribe()”>SUBSCRIBE</button><br/> <button click.delegate = “dispose()”>DISPOSE</button> </template> We need to import eventAggregator and inject it before we are able to use it. app.js import {inject} from ”aurelia-framework”; import {EventAggregator} from ”aurelia-event-aggregator”; @inject(EventAggregator) export class App { constructor(eventAggregator) { this.eventAggregator = eventAggregator; } publish() { var payload = ”This is some data…”; this.eventAggregator.publish(”myEventName”, payload); } subscribe() { this.subscriber = this.eventAggregator.subscribe(”myEventName”, payload => { console.log(payload); }); } dispose() { this.subscriber.dispose(); console.log(”Disposed!!!”); } } We need to click the SUBSCRIBE button to listen for data that will be published in future. Once the subscriber is attached, whenever new data is sent, the console will log it. If we click the PUBLISH button five times, we will see that it is logged every time. We can also detach our subscriber by clicking the DISPOSE button. Print Page Previous Next Advertisements ”;

Aurelia – Events ”; Previous Next In this chapter, you will learn about Aurelia events. Event Delegate Even delegation is a useful concept where the event handler is attached to one top level element instead of multiple elements on the DOM. This will improve the application memory efficiency and should be used whenever possible. This is a simple example of using event delegation with Aurelia framework. Our view will have a button with click.delegate event attached. app.html <template> <button click.delegate = “myFunction()”>CLICK ME</button> </template> Once the button is clicked, myFunction() will be called. app.js export class App { myFunction() { console.log(”The function is triggered…”); } } We will get the following output. Event Trigger There are some cases when you can”t use delegation. Some JavaScript events don’t support delegation; IOS supports it for some elements. To find out which events allow delegation, you can search for a bubble property of any event here. In these cases, you can use trigger() method. The same functionality from the above example can be created with click.trigger. app.html <template> <button click.trigger = “myFunction()”>CLICK ME</button> </template> app.js export class App { myFunction() { console.log(”The function is triggered…”); } } Print Page Previous Next Advertisements ”;