AngularJS CDN Integration

angularjs-cdn

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 behaviour 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 angularcdn.com provides many advantages such as HTTP/2-supported servers, CORS enabled, 24 data centers, etc. and also allows you to quickly grab the most recent version of AngularJS.

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 img src attribute with CDN server paths (e.g. cdn.example.com). 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: http://ngmodules.org/modules/angular-cdn-src

RubyGem

This Ruby 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 with angularcdn.com is an easy way to speed up asset delivery and help keep your website visitors happy.

Leave A Comment?