Angular: Adding Application Insights (Service)
Application Insights is Microsoft's flavor of what's known as an Application Performance Monitor, or APM for short. An APM is a tool that provides insights to developers and operations (DevOps) teams into how well an application and its underlying infrastructure is performing. In general, an APM is much different than something like Google Analytics. For all intents and purposes, Google Analytics is geared more towards capturing, converting, and retaining site visitors--essentially it's a marketing tool. Application Insights, on the other hand, is a functional operations tool designed for developers and site reliability engineers.
In the previous posts, we explored two ways to add Google Analytics to an application: bundling an external JavaScript file and as a service. Those same approaches can be utilized for adding Application Insights to your Angular application. However, given the nature of Application Insights, we're going to go a little bit further into development on this post. We're going to build in some tracing that provides some better insights into how the user is interacting with our application.
All source code for this post can be found in my demo GitHub repository. You may it useful for easy reference. Additionally, this post assumes you understand how to use the Angular CLI.
Angular: Adding Google Analytics (Service)
As stated in the previous post, Google Analytics is a fantastic resource when attempting to capture basic behavior from your Angular application's users. To leverage Google Analytics, you'll need to add the tracking script to your application's source. The previous post demonstrated how to add Google Analytics to your Angular application by bundling an external JavaScript file with your production build. The second approach for adding Google Analytics is to inject the required scripts as a service. The following post will focus on this second approach.
All source code for this post can be found in my demo GitHub repository. You may find it useful for easy reference. Additionally, this post assumes you understand how to use the Angular CLI.
Angular: Adding Google Analytics (External Script)
Google Analytics is a fantastic resource when attempting to capture basic visitor behavior in your Angular application. To utilize Google Analytics, you will need to add the tracking script to your application's source. Angular provides a few different mechanisms to accomplish this. The first approach it to save the tracking script to an external JavaScript file and include the file into your bundle for production releases. This approach is what the following blog post attempts to demonstrate.
Adding Font Awesome to ASP.NET Core Angular 2 Applications in Visual Studio 2017
If you're using Visual Studio 2017's SPA templates for Angular, no doubt you've wanted to add third-party libraries such as Font Awesome. You could reference these dependencies in the index.html, but it would be better for performance if they were included in the webpack bundle. If you've never worked with webpack before, this could initially be a little confusing. But, don't worry as it's actually pretty simple.
Angular2+ SafeUrl Pipe
Instead of adding a function to the JavaScript of each of your components to properly display HTML links, use an Angular2 pipe.
Create a pipe service called safe-url.pipe.ts and add the following:
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({
name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(url) {
return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
}
}
Next, inject the pipe service in your app.module.ts:
import { SafeUrlPipe } from './pipes/safe-url.pipe'; //make sure your safe-url.pipe.ts file path is matching.
And, in your Angular module declarations section:
@NgModule({ declarations: [SafeUrlPipe],...});
Now, to use in your view:
<div>
<span>Skype: <a [href]="'sip:<johndoe@contoso.com>' | safeUrl">johndoe@contoso.com</a></span>
</div>
Adding Skype and Skype for Business HTML Links
Have you ever needed to add links into a web page that enabled a visitor to click to begin a chat or phone call with a Skype or Skype for business user? If you have the necessary plug-ins enabled in the browser, a phone number may be recognized automatically, but that can't always be guaranteed. There are native URI's to ensure that, if a site visitor has Skype or Skype for Business installed, a chat or phone call will be initialized.
IoT Asset Management Starter Kit
First demonstrated at Microsoft's 2016 Ignite Conference in Atlanta, GA, the IoT Asset Management Starter Kit is a boiler plate project comprised of Node.js and Angular 2 that facilitates the quick development of an IoT project for Asset Management. The project brings all the necessary components - Azure IoT Hub, Stream Analytics, Heroku, MongoDB and Raspberry Pi 3 - together to build a working end-to-end IoT solution.
Excluding Object Properties in AngularJS's $scope.$watch
Want to $watch an object in Angular, but ignore changes on certain properties? Here's a function that will help you out:
function diff(obj1, obj2, exclude) {
var r = {};
if (!exclude) exclude = [];
for (var prop in obj1) {
if (obj1.hasOwnProperty(prop)) {
if (exclude.indexOf(obj1[prop]) == -1) {
// check if obj2 has prop
if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];
// check if prop is object, if so, recursive diff
else if (obj1[prop] === Object(obj1[prop])) {
if (obj2[prop] == undefined || obj2[prop] == null)
r[prop] = obj2[prop];
else {
var difference = diff(obj1[prop], obj2[prop]);
if (Object.keys(difference).length > 0) r[prop] = difference;
}
}
// check if obj1 and obj2 are equal
else if (obj1[prop] !== obj2[prop]) {
if (obj1[prop] === undefined)
r[prop] = 'undefined';
if (obj1[prop] === null)
r[prop] = null;
else if (typeof obj1[prop] === 'function')
r[prop] = 'function';
else if (typeof obj1[prop] === 'object')
r[prop] = 'object';
else
r[prop] = obj1[prop];
}
}
}
}
return r;
}
And here's how to use it...
$scope.$watch(function () { return vm.objectToWatch; }, function(newValue, oldValue) {
var difference = diff(newValue, oldValue,
[
newValue.ignoredProp1,
newValue.ignoredProp2,
newValue.ignoredProp3,
newValue.ignoredProp4,
]);
// If 'difference' is empty, then return
if (Object.keys(difference).length === 0) return;
// 'difference' contains properties that we DON't want to ignore so do something...
}, true);
And, finally a jsfiddle example.
Karma + Jasmine + Visual Studio (including Visual Studio Code)
I've been developing a LOT of Angular applications lately. Some of them are hybrid projects (Angular w/ MVC); some of my projects have been completely separated (Angular for client-side, with a separate project for an API). Regardless, I always want to ensure that my code has been thoroughly tested with unit tests and acceptance (E2E) tests. When developing hybrid projects, my preferred IDE is Visual Studio. When developing a pure, client-side project, my preferred IDE is Visual Studio Code as it has a lot less remnants/artifacts tied to a solution (.vs, .xproj, .csproj, etc.) eliminating the need for a ridiculously large .gitignore file. Additionally, I will use WebStorm depending on the need.
Jasmine is a great framework for providing both unit testing and end-to-end, acceptance testing. Coupled with Karma, Jasmine can monitor file changes to our client-side code and execute tests on every file change in order to ensure that all tests are always passing. In this blog post, I will demonstrate how to set up and use Karma and Jasmine in both development environments.