AngularJS CDN Integration

Updated on March 4, 2019

What is AngularJS?

AngularJS is a framework for building dynamic web apps that allows you to extend HTML's syntax. Traditionally, many static documents and dynamic applications are integrated together with the help of a library or a framework. Angular takes a different approach by creating HTML constructs in the effort to minimize the impedance mismatch. AngularJS does this in a few ways by using what they call directives, which have the ability to:

Data bind, as in {{}}.
DOM control structures for repeating, showing and hiding DOM fragments.
Support forms and form validation.
Attach new behavior to DOM elements (e.g. such as DOM event handling).
Group HTML into reusable components.

AngularJS CDN integration

The AngularJS library can be downloaded and stored locally on your server, however it is more efficient to deliver the files via an AngularJS CDN integration. Referencing Angular libraries from KeyCDN provides many advantages such as HTTP/2-supported servers, CORS, a large network of data centers, etc.

This method allows the AngularJS library to be retrieved from the most optimal CDN server instead of from your origin server. The following provides a collection of resources on how to setup a AngularJS CDN integration.

AngularJS module

This module is able to prepend the CDN server paths (e.g. cdn.example.com) to the <img> tag src attribute. This AngularJS CDN integration method allows for your images to be easily delivered via a CDN instead of locally from the origin server. The below snippet demonstrates the required configuration within your app to use this module. Check out the module demo for more information.

<!-- Include AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

<!-- Include angular-cdn-src -->
<script src="angular-cdn-src.min.js"></script>

<script>
    // Configure an AngularJS app (myApp)
    // Set 'lvp.cdnSrc' as a dependency for your app
    angular.module('myApp', ['lvp.cdnSrc'])

    // Configure angular-cdn-src
    .config(function(cdnSrcConfigurationProvider) {
        // List your CDN server prefixes
        cdnSrcConfigurationProvider.setCdnServers([
            '//cdn.example.com',
        ]);
    });
</script>

Link: https://github.com/levpolevoy/angular-cdn-src

RubyGem

This gem adds AngularJS CDN support for angularjs-rails projects. Some of its features include:

Ability to support multiple CDNs
AngularJS version is automatically detected, however can be overridden
Automatic fallback to bundled AngularJS when the CDN is down / unavailable or you are working offline.

Link: https://rubygems.org/gems/angularjs-rails-cdn

Drupal module

The Drupal module allows for easy integration between the Drupal CMS and AngularJS. The module pulls version 1.0.8 of AngularJS from Google's CDN, however this can be modified by going to the administration page.

Link: https://www.drupal.org/project/angularjs

The benefits of using an Angular CDN integration

Delivering AngularJS assets via a CDN is beneficial for a variety of reasons.

Users will benefit from improved downloading times as the assets will be delivered via the closest available CDN server
Since the assets are delivered via a CDN, this reduces the amount of load on the origin server
Integration is easy and in most cases can be done in just a few minutes.

Referencing AngularJS libraries via a CDN like KeyCDN is an easy way to speed up asset delivery and help keep your website visitors happy.

Support