Category: aurelia

Aurelia – Dependency Injections ”; Previous Next In this chapter, you will learn how to use Aurelia dependency injection library. First, we need to create new file dependency-test.js inside src folder. In this file, we will create a simple class DependencyTest. This class will be later injected as a dependency. src/dependency-test.js export class DependencyTest { constructor() { this.test = “Test is succesfull!!!”; } } Inject In our app.js file, we are importing inject library and DependencyTest class that we created above. To inject the class we are using @inject() function. Our App class will just log it to the developer console. import {inject} from ”aurelia-framework”; import {DependencyTest} from ”./dependency-test”; @inject(DependencyTest) export class App { constructor(DependencyTest) { console.log(DependencyTest); } } We can check the console to see that the DependencyTest class is injected. There will more examples of Aurelia dependency injection in the next chapters. Print Page Previous Next Advertisements ”;

Aurelia – Binding Behavior ”; Previous Next In this chapter, you will learn how to use behaviors. You can think of binding behavior as a filter that can change the binding data and display it in a different format. Throttle This behavior is used to set how often should some binding update take place. We can use throttle to slow down the rate of updating input view-model. Consider the example from the last chapter. The default rate is 200 ms. We can change that to 2 sec by adding & throttle:2000 to our input. app.js export class App { constructor() { this.myData = ”Enter some text!”; } } app.html <template> <input id = “name” type = “text” value.bind = “myData & throttle:2000″ /> <h3>${myData}</h3> </template> Debounce debounce is almost the same as throttle. The difference being, debounce will update the binding after the user has stopped typing. The following example will update the binding if the user stops typing for two seconds. app.js export class App { constructor() { this.myData = ”Enter some text!”; } } app.html <template> <input id = “name” type = “text” value.bind = “myData & debounce:2000″ /> <h3>${myData}</h3> </template> oneTime oneTime is the most efficient behavior performance wise. You should always use it when you know that data should be bound only once. app.js export class App { constructor() { this.myData = ”Enter some text!”; } } app.html <template> <input id = “name” type = “text” value.bind = “myData & oneTime” /> <h3>${myData}</h3> </template> The above example will bind the text to the view. However, if we change the default text, nothing will happen since it is bound only once. 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 ”;