Home » Posts tagged "angular"

Angular Ionic and Angular CLI

As you might have noticed from last week’s post, I’ve shifted my focus from pure Angular to learning Angular Ionic.  And while last week’s post focused more on just getting Ionic setup on a Windows environment, this post will focus more on integrating Ionic and Angular CLI to work together.

If you are familiar with Ionic, you should already know that it provides its own CLI that allows you to scaffold out a new application using a basic template.  This CLI is also used to help register the project with the Ionic Dashboard and scaffold out a limited number of file types if you use Ionic 3.  However, there are several problems I have with using the Ionic CLI.  First, and probably most important to me, is there is no test scaffolding!  Second, it neither follows the standard naming convention for files nor does it comply with the Angular Style Guide when it comes to directory structure.

My first attempt at correcting the problem was to try to add Ionic to an existing Angular CLI project.  I almost had that working, but I got stuck trying to get the SCSS implementation working.  I finally gave up once I realized that Ionic seems to load files on demand, including SCSS files and templates.  I might come back to this once I’ve gained more experience with Ionic and have a better idea of how it works under the hood.

So, my second thought was to just add the Angular CLI to an existing Ionic CLI project.  It turns out this was much easier to get working.  This allows me to use the standard ng commands to scaffold out my components, services, interfaces, etc… and because I’m using the Angular CLI scaffolding, the tests also get scaffold out for me.

Angular Ionic and Angular CLI
Photo credit: Internet Archive Book Images via VisualHunt.com / No known copyright restrictions

Continue reading “Angular Ionic and Angular CLI”

Model View Presenter, Angular, and Testing

While testing Components is possible, it is not easy and is often pointless.  Using the Model View Presenter pattern, or a variation of it, solves the problem.

Here’s the deal. Long time readers of my blog know I’ve been a proponent of Unit Testing for a very long time. While I was learning React, I went through the exercise of trying to write test as I was learning.  Now, the great thing about Angular and React is that it is possible to test your components.  The problem with testing components is that you are either testing that your HTML ended up in the right spot, that Angular directives did what they should, or you are evaluating the DOM to verify that component logic worked.  In most cases, putting tests that do any of these at the component level is the wrong way to test.

Model View Presenter, Angular, and Testing
Photo credit: Tamworth Borough Council via Visualhunt.com / CC BY

Continue reading “Model View Presenter, Angular, and Testing”

How to Upgrade NgRX to 4.x

This week, I discovered that NgRX 4 had released. Yeah, we skipped over version 3 here too to get in sync with the Angular version numbering.

There is a pretty complete upgrade guide that you can find here.  But, the upgrade guide assumes that you are creating Actions by instantiating a new Action object rather than returning a literal as I’ve been instructing.

So, in this week’s post, I plan to cover the exact steps I recommend going through to upgrade to NgRX 4, why I don’t think instantiating an Action if the right way to create new actions, and some possible enhancements you can make once you’ve upgraded to the new version.

How to Upgrade NgRX to 4.x
Photo credit: Sean MacEntee via VisualHunt.com / CC BY

Continue reading “How to Upgrade NgRX to 4.x”

Angular Observable Secrets Revealed

If you’ve been programming JavaScript based applications for any length of time, you’ve probably already made the progression from callback hell to promises, but just to recap.  Whenever we make any kind of asynchronous call in JavaScript, we need to provide a callback function to the call so that, when the call completes, the function can be called with any resulting data.  Function calls you may typically make that need this kind of feature are setTimeout(), setInterval(), and AJAX calls using the various libraries that support this.

The problem with using callbacks is that you can end up with “Callback Hell” where you have callbacks inside of other callbacks.  Our code becomes messy and difficult to reason about.

To try to flatten this situation out, promises were created.  Instead of creating a callback function and passing it into the asynchronous function, the asynchronous function returns a promise that has a function we can pass our function into.  This function can return yet another promise.  The result is that instead of having nested callbacks, all of our callbacks live at the same level.

However, in the process, we lost the ability to cancel an asynchronous function using callbacks.  Most of the time, this was not a huge concern, but in the case of AJAX calls, we did end up making more request than we really needed to.  Most people never even recognized this as an issue.  But if you go and take a look at some of your older code, you will see that you have several places where the code would work more efficiently if you were able to cancel a call that was being superseded by a new call.

Meanwhile, some additional functions were added to JavaScript Arrays.  Maybe you’ve seen some of them?  map(), reduce(), and filter() are three of the more common functions.

What?  You haven’t seen these?  If you have and you know how they work, you can skip this next section.  But, if you haven’t, pay careful attention because this next section is critical to understanding how Observables work.

Angular Observable Secrets Revealed
Photo via VisualHunt.com

Continue reading “Angular Observable Secrets Revealed”

Upload an Image as a File in Angular

This past week, I needed to be able to upload an image in my application to the server as a file so that I could crop it and upload it.

Now, uploading an image that you pulled up using the file upload control is relatively straight forward.  But, in our case, the image we want to be able to upload didn’t always come from the user’s file system.  This causes two problems.

First, you can’t crop an image you retrieved from a different URL using the HTML Canvas because of Cross Origin restrictions and second, you can’t upload the file using the standard file upload mechanism because you didn’t get it from the file system.

Upload an Image as a File in Angular
Photo via Visual Hunt

Continue reading “Upload an Image as a File in Angular”