Angular Js — Wrap Third Party Plugins

Have you ever faced the problem, you find an awesome plugin but you couldn’t use it with your Angular JS app? I’m sure, you have.

There is a very easy shortcut to use 3rd Party plugins with Angular JS, take a look at my example that wraps Alertify JS.

Load Alertify CSS

<!-- Alertify CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css"/>
<!-- Alertify Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/default.min.css"/>

Load Alertify JS

<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>

Create ngAlertify module and factory that returns with the raw alertify instance.

angular.module("ngAlertify", []).factory("alertify", function() {

    return alertify;

});

Don’t forget to add the dependencies to your App/Controller!