Category: aurelia

Aurelia – Plugins ”; Previous Next When you start building your app, most of the time you will want to use some additional plugins. In this chapter, you will learn how to use plugins in Aurelia framework. Standard Plugins In the last chapter, we saw how to use default configuration in Aurelia framework. If you are using default configuration, standard set of plugins will be available. defaultBindingLanguage() − This plugin offers an easy way to connect view-model with view. You already saw one-way data-binding syntax (${someValue}). Even though you could use some other binding language, it is a recommended practice to use default binding language. defaultResources() − Default resources give us some primitive constructs such as if, repeat, compose, etc. You can even build these constructs on your own, but since they are so commonly used, Aurelia already created it inside this library. Router() − Most of the applications use some kind of routing. Hence, Router is a part of the standard plugins. You can check more about routing in a subsequent chapter. History() − History plugin is usually used together with router. eventAggregator() − This plugin is used for cross-component communication. It handles publishing and subscribing to messages or channels inside your app. Official Plugins These plugins aren”t part of the default configuration but are frequently used. fetch() − Fetch plugin is used for handling HTTP requests. You can use some other AJAX library if you want. animatorCSS() − This plugin offers a way of handling CSS animations. animator-velocity() − Instead of CSS animations, you can use Velocity animation library. These plugins enable us to use Velocity inside Aurelia apps. dialog() − Dialog plugin offers a highly customizable modal window. i18n() − This is the plugin for internalization and localization. ui-virtualization() − Virtualization is a useful library for handling large performance heavy UI tasks. validation() − Use this plugin when you need to validate your data. All plugins explained above are officially maintained by the Aurelia Core Team at the moment of writing this tutorial. There will be some other useful plugins added in future. Following example shows how to configure your app to use plugins. Installing Plugins If, for example, we want to use animator-css and animator-velocity, we need to install it first. C:UsersusernameDesktopaureliaApp>jspm install aurelia-animator-css C:UsersusernameDesktopaureliaApp>jspm install aurelia-animator-velocity In the last chapter, you learnt how to use manual configuration. We can add our plugins in main.js file. main.js export function configure(aurelia) { aurelia.use .defaultBindingLanguage() .defaultResources() .developmentLogging() .router() .history() .eventAggregator() .plugin(”aurelia-animatorCSS”) .plugin(”aurelia-animator-velocity”) aurelia.start().then(() => aurelia.setRoot()); } Print Page Previous Next Advertisements ”;

Aurelia – Overview ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Aurelia – Animations ”; Previous Next In this chapter, you will learn how to use CSS animations in Aurelia framework. Step 1 – View Our view will have one element that will be animated and a button to trigger the animateElement() function. app.html <template> <div class = “myElement”></div> <button click.delegate = “animateElement()”>ANIMATE</button> </template> Step 2 – View-model Inside our JavaScript file, we will import CssAnimator plugin and inject it as a dependency. The animateElement function will call the animator to start animation. The animation will be created in the next step. import {CssAnimator} from ”aurelia-animator-css”; import {inject} from ”aurelia-framework”; @inject(CssAnimator, Element) export class App { constructor(animator, element) { this.animator = animator; this.element = element; } animateElement() { var myElement = this.element.querySelector(”.myElement”); this.animator.animate(myElement, ”myAnimation”); } } Step 3 − Style We will write CSS inside styles/styles.css file. .myAnimation-add is the starting point of an animation while .myAnimation-remove is called when the animation is complete. styles.css .myElement { width:100px; height: 100px; border:1px solid blue; } .myAnimation-add { -webkit-animation: changeBack 3s; animation: changeBack 3s; } .myAnimation-remove { -webkit-animation: fadeIn 3s; animation: fadeIn 3s; } @-webkit-keyframes changeBack { 0% { background-color: #e6efff; } 25% { background-color: #4d91ff; } 50% { background-color: #0058e6; } 75% { background-color: #003180; } 100% { background-color: #000a1a; } } @keyframes changeBack { 0% { background-color: #000a1a; } 25% { background-color: #003180; } 50% { background-color: #0058e6; } 75% { background-color: #4d91ff; } 100% { background-color: #e6efff; } } Once the ANIMATE button is clicked, the background color will be changed from light blue to a dark shade. When this animation is complete after three seconds, the element will fade to its starting state. Print Page Previous Next Advertisements ”;

Discuss Aurelia ”; Previous Next Aurelia is a modern, open source UI framework for web and mobile app development. It allows you to write clean, modular JavaScript. The framework follows simple conventions and is focused on web standards. Print Page Previous Next Advertisements ”;

Aurelia – First Application ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Aurelia Tutorial PDF Version Quick Guide Resources Job Search Discussion Aurelia is a modern, open source UI framework for web and mobile app development. It allows you to write clean, modular JavaScript. The framework follows simple conventions and is focused on web standards. Audience This tutorial is designed for developers who didn”t have a chance to work with this framework before. The tutorial contains simple, easily understandable examples. These examples can be used as a reference for future projects. Prerequisites Since Aurelia is promoting pure JavaScript, you will need to know the language prior to learning the framework. We will use EcmaScript2016 syntax. You will also need to have previous experience working with HTML. Print Page Previous Next Advertisements ”;

Aurelia – Custom Elements ”; Previous Next Aurelia offers a way to add components dynamically. You can reuse a single component on different parts of your app without the need to include HTML multiple times. In this chapter, you will learn how to achieve this. Step 1 – Create the 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 in the HTML page. custom-component.html <template> <p>This is some text from dynamic component…</p> </template> Step 2 – Create the 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 the 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 a new element custom-component. app.html <template> <require from = “./components/custom-component.html”></require> <h1>${header}</h1> <p>${content}</p> <custom-component></custom-component> </template> Following is the output. Header and Footer text is rendered from myComponent inside app.js. The additional text is rendered from the custom-component.js. Print Page Previous Next Advertisements ”;

Aurelia – Environment Setup ”; Previous Next 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. Print Page Previous Next Advertisements ”;

Aurelia – Best Practices ”; Previous Next Aurelia is a new framework hence, the best practices are yet to be established. In this chapter, you will find some useful guidelines to follow. Starting a New Project Aurelia offers aurelia-skeletons. There are a couple of skeletons to choose from. The team behind Aurelia is actively supporting the skeletons, and they are always up-to-date with the newest version of the framework. Aurelia Skeletons skeleton-es2016-webpack allows you to write ES2016 code and use npm for package management and webpack for bundling. skeleton-es2016 allows you to write ES2016 code and use jspm for package management and SystemJS for loading and bundling. skeleton-typescript-webpack allows you to write TypeScript code and use npm for package management and webpack for bundling. skeleton-typescript allows you to write TypeScript code and use jspm for package management and SystemJS for loading and bundling. skeleton-typescript-asp.net5 allows you to write TypeScript code and use jspm for package management and SystemJS for loading and bundling. The ASP.NET backend is also integrated. skeleton-es2016-asp.net5 allows you to write ES2016 code and use jspm for package management and SystemJS for loading and bundling. The ASP.NET backend is integrated. You can clone all skeletons from GitHub. The installation instructions can be found inside README.md files for each skeleton. C:UsersusernameDesktop>git clone https://github.com/aurelia/skeleton-navigation.git Folder Structure You are free to use any folder structure you want. If you are not sure where to start, you can use the following folder structure. The image represents files and folder in the src directory. Web Standards Aurelia is a framework oriented to web standards. This was one of the main goals of the team behind it. They will make sure that the framework always follows modern web. This is extremely good for the developers, since we can rely on the usability of the framework in the future. It also helps us be up-to-date with the browsers and the web. EcmaScript 6 This is a good practice not just for Aurelia but for any other JavaScript framework. ES6 offers new functionalities that can help in the development process. You can also use TypeScript, if you like strongly typed languages. Print Page Previous Next Advertisements ”;

Aurelia – Useful Resources ”; Previous Next The following resources contain additional information on Aurelia. Please use them to get more in-depth knowledge on this. Useful Video Courses JavaScript Masterclass: ES6 Modern Development 71 Lectures 4.5 hours Frahaan Hussain More Detail JavaScript fundamentals Course for Beginners: JavaScript ES6 37 Lectures 2 hours Laurence Svekis More Detail JavaScript Training Course – Practice building 5 applications 32 Lectures 2 hours Laurence Svekis More Detail JavaScript Objects and OOP Programming with JavaScript 23 Lectures 1.5 hours Laurence Svekis More Detail JavaScript Advanced Course – Useful methods to power up your code 26 Lectures 2 hours Laurence Svekis More Detail JavaScript Course for Beginner to Expert: Data Visualization Best Seller 77 Lectures 6 hours Metla Sudha Sekhar More Detail Print Page Previous Next Advertisements ”;