Angular on Thorsten Hans

KISS  Angular apps a bit more framework agnostic

Tue, 07 Mar 2017 00:00:00 +0000

More and more developers are jumping on the Angular train in these days. Angular is awesome 💚🤘🏼 but it’s just a framework, a framework that may be replaced at some point in time by the next big thing.

Hopefully, the next big thing will also be an Angular thing 😀

But to be honest, nobody can tell. Fast forward a few years and you’ll find yourself being responsible for migrating an existing old Angular 4.0.0 app to the cool, new kid. As soon as this will happen, you’ll hopefully remember this post. I’m going to share small, easy to adopt steps to make your Angular apps a bit more framework agnostic.

Electron CrashReporter - stay up to date if your app fucked up!

Fri, 03 Mar 2017 00:00:00 +0000

Every one of us knows about those situations. You ship your app to production and you’re instantly losing 10 pounds of weight 💪🏼 if nothing bad happens in the first 24 hours. You’re finally able to get some sleep, customers are happy, the manager is happy, you are happy!

But at some point in time your app will crash! It will definitely crash. No matter how professional you are, there are bugs! Customers will find them! And that’s okay.

Integrating Angular and Electron using ngx-electron

Fri, 24 Feb 2017 00:00:00 +0000

GitHub Electron makes crafting cross-platform desktop applications really simple. You can take any existing website or Single Page Application (SPA) and just wrap it into a native container. Those containers (powered by Chromium and Node.js) could easily be distributed to all major desktop operating systems like Windows, macOS or Linux.

On the other side is Angular as a full-blown application framework for building robust SPAs. Angular makes building SPAs fun and provides a rich set of APIs to get everything done, inside of the client. However, sometimes you need a deeper integration. For example, you want to call into Electron’s main-process to execute some Node.js script like reading files from a directory or do some other processing using Node.js. In those cases, you could utilize Electron’s APIs.

Standard Angular Pipes and ng-translate

Thu, 23 Feb 2017 00:00:00 +0000

Of course is Angular itself shipping with some i18n (internationalization) APIs, but ng-translate has become the new default for many developers to provide translations within Angular apps.

Personally, I prefer ng-translate over built-in i18n APIs because it is fast, easy to explain and it allows to run multilingual apps without having the requirement to have dedicated hosting for each language.

One of the disadvantages is, that ng-translate doesn’t provide Pipes as Angular does. Angular ships twelve useful Pipes, including things like DecimalPipe, DatePipe or the CurrencyPipe. Some of those standard Pipes offer a simple way to format values directly within HTML templates.

HTML5 notifications in electron apps with Angular

Fri, 22 Jul 2016 00:00:00 +0000

Within Electron apps, you can use HTML5 Notification API to keep users posted about events happened. Electron is bridging incoming calls to HTML5 Notification API to native notification APIs offered by all supported platforms.

Create a notification

Creating new notifications is straightforward. An instance of the Notification class is all you need. In the most basic shape, notification consists of a title. Additional metadata could be provided by providing an object as the second parameter to the Notification constructor, as demonstrated below with body.

Using Augury inside of Electron Apps

Sat, 02 Jul 2016 00:00:00 +0000

Writing apps using GitHub’s Electron is a reasonably easy task. The framework and community-driven tools are taking away much pain from you as a developer. Nevertheless, it is essential to have powerful debugging tools working in every environment. Augury (created by Rangle.IO) is currently the most powerful debugging tool for Angular developers. It’s a Chrome Extension that works perfectly inside of the Browser, in this post, you’ll learn how to use Augury inside of your Electron apps.

Angular Quickie - Why can't I compile my Angular app anymore

Mon, 15 Feb 2016 00:00:00 +0000

Staying on top of the technology stack is sometimes really hard. The Angular core team tries to do it’s best to keep breaking changes as seldom as possible. Because Angular is still in beta, breaking changes may happen. I was facing some issues while catching up latest betas. If you’re also facing TS2304 while transpiling your app, this article may help.

After pulling a remote branch from git this morning, I tried to start a simple Angular project by invoking our Gulp.JS tasks. However, suddenly the script crashed and printed tons of errors from the TypeScript Compiler (short tsc). After some short discussion, I decided to dig deeper into the issue and tried to fix the issue and understand why this has happened.

Angular and Electron - The definitive guide

Sun, 14 Feb 2016 00:00:00 +0000

Building cross-platform apps for desktop operating systems became simple compared to the past. With GitHub’s Electron is a framework available that takes away the pain for abstracting all common platform APIs from us as web developers.

Electron makes it easy to host Single Page Applications (short SPAs) within a native application container which is available for macOS, Linux, and Windows. When looking at Electron’s architecture, you will find two main counterparts.

Angular Quickie - Async Routes

Tue, 09 Feb 2016 00:00:00 +0000

Angular ships with its component router. The router makes it easy to compose complex applications from a bunch of components. Multiple routers could easily be nested to achieve almost every requirement for a SPA. When using regular routes, all files from your SPA are transferred to the client as soon as RouteConfig is interpreted by the JavaScript engine of your browser.

With growing apps, you may change this behavior. Clients should only download those files that are required for the current use case. Alternatively, you would initially transfer only those files required to make the core functionality of your app work. Optional components and templates should only be transferred if users request those components explicitly.

Pug-up your Angular markup

Fri, 05 Feb 2016 00:00:00 +0000

Can you imagine the combination of Angular and Pug (previously known as Jade) is super awesome and timesaving? If not, read the following lines and reconsider!

When building SPAs using Angular or AngularJS, you use custom HTML markup extensions (aka directives) to instrument Angular how to render your SPA or how the different building blocks of your app should correspond to user interaction. Using those directives is smooth and well known in the Angular Community.

Angular Quickie — ViewEncapsulation.Native in all browsers

Wed, 03 Feb 2016 00:00:00 +0000

A few days ago I wrote about Angular ViewEncapsulation . The sample I’ve created for that post only works if you’re using Google Chrome. In this article, I’ll explain why the sample only works in Google Chrome and how you can take the example one step further to work and behave as expected in all modern browsers.

Angular is using ViewEncapsulation.Emulated by default, to render components. Emulated means you’re not using native ShadowDOM features; instead Angular does some refactoring to both, your template and your styles, to encapsulate those from the rest of your app and render everything as expected. (see the linked article above for more details).

Testing Angular Apps with Jasmine and TypeScript

Mon, 01 Feb 2016 00:00:00 +0000

Unit-Testing Angular applications made me crazy during Beta time. In this post, I’ll share how to set up unit testing for Angular applications. The samples below were tested on Angular 2 Beta 2 and Beta 3. There are many resources available on the web that explain how unit-testing should work in Angular beta. Unfortunately, none of them worked for me from front to end. The official documentation is also lacking a fully working example with SystemJS while I’m writing this article. Things may change over time, so you should check out the latest documentation on https://angular.io .

Angular Quickie - Component ViewEncapsulation and WebComponents

Fri, 08 Jan 2016 00:00:00 +0000

“Component” is perhaps the most overloaded term when it comes to JavaScript frameworks these days. Every single framework has its definition of what precisely a component is, also Angular.

Components are the building blocks of Angular apps. By default, Angular embeds components into the DOM. When Angular renders your component, the entire contents of your template (string or loaded from the given URL) goes inbetween the component’s selector.

There are two different ways how Angular is injecting the view for a given component. ViewEncapsulation is responsible for defining how Views are injected. If you create a component like this:

Angular Quickie - Local template variables

Thu, 07 Jan 2016 00:00:00 +0000

Local template variables in Angular can be used to reference HTML elements easily and use their properties either on sibling or child nodes.

It’s pretty easy to create and use those local template variables. Let’s say you have got an input file for dealing the first name of someone.

<input type="text" placeholder="your name please" required maxlength="25" />

You can make the HTMLInputField available to sibling or child nodes using the # symbol.

Angular Quickie — Elvis is in tha house

Thu, 07 Jan 2016 00:00:00 +0000

Another Angular quickie for today!😉 Angular introduces the Elvis operator ?. is used in templates.

CoffeeScript Developers may know this as “Existential Operator” which can easily be used to check if a variable has a value.In combination with *ngFor and *ngIf this makes a good toolbelt for rapidly building UIs within *Angular *Apps.

The official Angular documentation gives you a few examples of how to use the Elvis operator.

Angular Quickie — How to structure your projects

Thu, 07 Jan 2016 00:00:00 +0000

When building large Angular Apps, you’ve to care about how to structure your project. I can imagine, John Papa will, of course, provide a new style guide soon 🙂 (no pressure here, we’ve our own for Angular.JS and Angular).

But already in those early days, you’ve to care about the project structure. Refactoring an entire project structure is hard 💩. So think about it, before you start coding.

Building an electron app using Angular Beta0 in TypeScript

Thu, 07 Jan 2016 00:00:00 +0000

You can build Angular apps using plain old JavaScript and TypeScript. I’ve been using plain JavaScript for the past Angular demonstrations, because I felt in love again with JavaScript after spending years with CoffeeScript (But that’s a different story). However, teams at Google and Microsoft were working together in these days to marriage Angular and TypeScript. If you don’t know TypeScript yet, go and learn it. It will change the way how you write Frontend stuff in the upcoming years. You can think of it as todays *JavaScript on steroids. It makes you more productive, it makes your code more robust, you’ve to write less plumbing because the TypeScript Compiler (TSC) generates all the good parts of JavaScript and knows about the edge-cases.

Angular goes cross platform with GitHub Electron

Mon, 16 Nov 2015 00:00:00 +0000

A while ago I’ve posted a sample on how to write an electron app using Angular 1.x with ES2015 and JSPM .

Now having more than 100 stars on GitHub, it seems to be quiet important for the community. That’s why I’ve decided to take this sample to another level.

Angular2 is becoming more severe with each day. That’s why I’ve decided to publish another electron sample targeting Angular2. Go and visit the repo right here on GitHub

Packaging Electron apps as ASAR archive using Gulp.js

Tue, 05 May 2015 00:00:00 +0000

A couple of weeks ago I open-sourced a sample on how to build an electron app using Angular and ES6. The sample has become popular on Github, so I sat down and updated the sample a bit. All changes are about distributing the electron app.

https://github.com/ThorstenHans/electron-angular-es6

Instead of writing down all the bits, I’ve started Camtasia and recorded a short webcast.

I’ll explain all the required steps from 0 to the final app.asar package in these 11 minutes. Enjoy

Writing an Electron app using Angular and ES6

Mon, 04 May 2015 00:00:00 +0000

If you haven’t heard of Electron (formerly known as Atom Shell) you should check out it’s official website here .

In this post, I will not provide an introduction for all the different tools and frameworks. It’s more a walkthrough that should give you some hints on how to get things up and to run with the following stack.

Electron
Angular.JS
ES6 using Babel as transpiler
SystemJS as module-loader

Getting started

First of all, you’ve to ensure that all dependencies are installed on your system and a simple folder structure has been created for the sample project.