npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-frontload-data

v3.0.0

Published

Bundle your mostly immutable remote data into angular constant(s) at build-time

Downloads

7

Readme

angular-frontload-data

Bundle your mostly immutable remote data sources into angular constant(s) at build-time.

Basically allows your app to pre-load dynamic constant data at runtime, avoiding any race conditions during the bootstrap phase.
It outputs a non-minified (prettified) version of the file by default, unless explicitly turned off.

Install

$ npm install angular-frontload-data --save-dev

Usage

var frontLoad = require('angular-frontload-data');

frontLoad({
  example: {
    url: 'http://www.test.com/example.json',
    method: 'GET'
  }, {
    filename: 'example.js',
    moduleName: 'example'
  }, function() {
    console.log('Done!');
  });
});

Full Example

gulpfile.js

var gulp = require('gulp');
var frontLoad = require('angular-frontload-data');

gulp.task('frontload', function(done) {
  frontLoad({
    example: {
      url: 'http://www.test.com/example.json',
      method: 'GET'
    }, {
      filename: 'example.js',
      moduleName: 'example'
    }, done
  });
});

Sample Result Output - example.js

angular.module('example')
  .constant('example', {
    hai: 'hello world!',
    bai: 'kthx'
  });

Include this file in your app and AngularJS will automatically inject all of its constants before anything else.

Note: this plugin will not create a new AngularJS module by default, but use a module called templates. If you would like to create a new module, set options.moduleDeclaration to true.

Hack nice with Grunt

module.exports = function (grunt) {
  var frontLoad = require('angular-frontload-data');

  grunt.registerTask('frontload', function() {
    var done = this.async();

    frontLoad({
      example: {
        url: 'http://www.test.com/example.json',
        method: 'GET'
      }, {
        filename: 'example.js',
        moduleName: 'example'
      }, done
    });
  });
};

API

frontLoad(constants, [options], [callback]);

constants

Required
Type: object

A map of Request objects plus some additional options.
See this page for a list of all available options.

options

Type: object

options.filename

Type: string
Default: "./constants.js"

The output filename.

options.moduleName

Type: string
Default: "constants"

The angular.module to which the data is attached.

options.moduleDeclaration

Type: boolean
Default: false

Allow module to be initialized as standalone or whether it is defined elsewhere in the app.

options.strictMode

Type: boolean
Default: false

If true, 'use strict'; is prepended to the beginning of the file.

options.moduleSystem

Type: string
Default: strict

Wrap the templateCache in a module system.
Currently supported systems: RequireJS, Browserify and IIFE (Immediately-Invoked Function Expression).

options.beautify

Type: boolean, object, string Default: true

JS Beautifier configuration. Boolean or Object is passed directly to the js-beautifier. String value is assumed to be the path to a configuration file.
See supported options and defaults here

options.quoteMark

Type: string
Default: "single"

Quotation marks to be used when wrapping strings.
Accepted values: "single", "double"

options.templateHeader

Type: string
Default: "angular.module('<%= name %>'<%= standalone %>)"

A lodash template for the fileHeader.

  • name: options.moduleName
  • standalone: options.moduleDeclaration ? ', []', : ''

options.templateFooter

Type: string
Default: ";"

A lodash template for the file's footer.

options.templateBody

Type: string
Default: ".constant('<%= key %>', <%= value %>)"

A lodash template populated repeatedly with the result of each successful request.

  • key: Object.keys(constants).forEach
  • value: {transformed} response of each request made

options.logLevel

Type: string
Default: "normal"

The granularity of messages logged to the console.

License

MIT © Rahul Doshi