In a single page application (SPA) like Aurelia, shared state is one of those important things every developer mostly encounters. Sharing the current state of a logged in user or sharing a shopping cart’s contents throughout the app.
Fortunately, Aurelia makes it easy to build applications with shared state.
By default a class in Aurelia is a singleton. If you create a service called UserService and inject it throughout different parts of your app, provided you’re injecting it without telling Aurelia to do anything non-standard, it will be a singleton.
When it comes to adding in on-page functionality in the form of custom selects, autocomplete fields and more, jQuery UI is still an undisputed popular choice amongst some developers and using it within Aurelia is super simple.
Because Aurelia does not replace your HTML or parse it any differently than your browser does without Aurelia, it allows you to use any third party library or plugin inside of your Aurelia application without worrying about it messing with anything.
I have been a member of Wiselike for quite sometime now, before it was even called Wiselike I was a member of CareerDean which preceded it. I have been so busy that I kind of forgot about it until recently. I realised that a lot of people asked me questions and it is kind of addicting.
If you want to ask me anything, head on over to my Wiselike page and ask away. I am planning on being as active as I possibly can be. It is a good chance to not only ask code-related questions, but also my views on things and other stuff.
While the default Aurelia convention of a view model looks for a matching HTML file in the same directory is what you want a lot of the time, sometimes you might want to load views from a centralised location like a views directory or ask the server to render you some HTML.
In an application recently some components which have a bit of user-focused data in them populated by the server had to be implemented. I could have duplicated them, but it seemed to be a waste of code when I could render the Razor partials in my Aurelia application instead.
There is a lot of contention in the brewing community when it comes to cooling down your wort with ice. Yes, using ice can introduce contaminants if you go about it the wrong way. But ice can be the most cost efficient way to cool down your brew wort and fast as well.
I am a hobbyist brewer and I just so happen to live in a tropical client here in Queensland, Australia. We get hot summers in the 30 – 40 Celsius range during summer, some parts even hotter. There is nothing like a nice cold glass of beer to drink to beat the heat.
When it comes to progressively enhancing an application we already have enhance API which allows us to progressively enhance a page on first load, but what about enhancing a page with dynamically added elements after everything has loaded? Perhaps your application dynamically inserts HTML into your page.
If you have experience working with AngularJS, you might be familiar with the ability to dynamically compile HTML using $compile which works for dynamically inserted HTML and other things that occur after the initial bootstrapping phase is done.
If you are using the TypeScript Skeleton application provided by the Aurelia team, then at the time of writing this, the project is still using TSD (well it has a tsd.d.ts file in the typings folder). The TypeScript Definition Manager as of a few hours ago of writing this post has been deprecated in favour of Typings instead which is a considerably more flexible and easier to use type management tool.
If you are a TypeScript user like me, then you most likely used TSD aka TypeScript Definition manager for DefinitelyTyped. Now that TSD has officially been deprecated, you can either stick with TSD for the moment or upgrade to Typings now.
Firstly, lets uninstall TSD. You might have it installed locally and globally depending on your setup: npm uninstall tsd and npm uninstall tsd -g
Now keep in mind your typings folder will be completely changed to accommodate the new structure that Typings uses in comparison to TSD. If you have any custom typings in your folder either created by you or manually copied/pasted, back them up somewhere.
Recently in my Aurelia application I needed to handle some keypress events when the user hit the enter and escape keys. Fortunately Aurelia doesn’t abstract Javascript too much, so adding in keypress support is easy. You don’t really see things like this documented anywhere, so this is for my reference just as much as it is yours.
export class SomeClass { constructor() { this.myKeypressCallback = this.keypressInput.bind(this); } activate() { window.addEventListener('keypress', this.myKeypressCallback, false); } deactivate() { window.removeEventListener('keypress', this.myKeypressCallback); } // This function is called by the aliased method keypressInput(e) { console.log(e); } } The best practice here is to ensure that the ViewModel has instantiated itself so we can register our event listener, then make sure in our deactivate method we remove the event listener to clean up memory usage.
With the beta release of Angular 2 in mid-December after almost 2 years in development, high hopes have been placed upon the framework who in its absence of release has seen other competitors such as ReactJS mature and Aurelia release into beta.
I have seen and heard some ambitious things being said about Angular 2. It appears as though everyone is making the assumption that because the Angular brand is so well known and people are falsely under the impression it is a first-class Google project (even though Google offers no support).