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-api

v1.1.3

Published

Route based API service for AngularJS

Downloads

7

Readme

What is angular-api?

It is a module that helps in creating a service to deal with all your api calls within the angular application. It uses the module routes to attach handlers to your api routes.

The module exposes the Initiator class that can be used to add your base api url along with routes and route handlers. If a route handler is not specified, a standard route handler is used.

API

The module returns the Initiator class with the following methods defined on it.

addRoute

Add a route with a handler on an Initiator instance. If the handler is not defined, the _standardRouteHandler is used. Look at the example below for handler function's signature.

serve

Returns a constructor function to be used by module.service as a constructor for the service. The serve function is basically a closure.

How to use it?

angular-api is simple to use.

api.js

Create a module that returns a constructor function for services to be created with.

// filename: api.js
// Require modules
var ApiInititor = require('angular-api');

// Create an instance of the Initiator, passing in your api's base url
var API = new ApiInitiator('http://www.myapi.com');

// Add some routes
API.addRoute(':reqType//books');      // Use built-in standard handler
API.addRoute(':reqType//books/:id');  // Use built-in standard handler
// :reqType is important, that way, you can specify what type of request it is
// and the built-in standard handler takes care of making of a request of that type.

// Define a route with custom handler
API.addRoute('/books/:id/update', 
  
  // Custom handler for route
  // @params  {string}    url     e.g /books/8/update
  // @params  {object}    match   consult [routes](https://www.npmjs.com/package/routes) docs for match format
  // @params  {object}    data    data/payload/params for PUT and POST requests
  function(url, match, data) {
    // The 'this' object has http($http) and q($q) defined on it

    // since it is a custom handler, you will have to make the http request yourself
    // the built-in handler takes care of the folowing step and more
    return this.http.put(self.api + url, data) // Return a promise
  }
);

// Create Api Service constructor using the 'serve' function
// The 'serve' function returns a constructor function to be used by angular for instantiation
// of a service
module.exports = API.serve();

app.js

// filename: app.js
// Create Angular App

var angular = require('angular');
var api = require('./api.js');

var app = angular.module('MyApp', []);

app.service('ApiService', ['$http', '$q', api]);
// Don't forget to pass in $http, $q in that order

// Use the Api Service to make a request to one of the defined routes
app.controller('AppCtrl', ['ApiService', function(ApiService) {
  // Make Api request using the service
  ApiService.request('GET//books') // Returns a promise
  .then(function(data) {
    console.log(data);  // Data returned by request to api
  });

  // Make POST Api request with some params
  ApiService.request('POST//books', {name: 'ngBook', author: 'Google'}) // Returns a promise
  .then(function(data) {
    console.log(data);  // Data returned by request to api
  });

}]);

The current practice is to return a promise that gets resolved when an http response is received. To keep things consistent, return a promise in all your custom handlers using this.q or just this.http which itself returns a promise.

The initiator code, i.e adding routes can go in a separate angular module and added as a dependency to your angular application.

What is left?

  • Adding authentication for auth based routes.