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

ng-syncano

v3.0.0

Published

An angular wrapper to intereact with the Syncano API.

Downloads

3

Readme

ng-syncano

NPM

Getting Started

Using our Angular Service is simple! After you set it up, you'll be able to use Syncano API calls within Angular without having to import syncano.js anywhere else in your code.

If this is your first time using Angular, please take a look at our blog post Intro to Angular.js or the AngularJS homepage.

This library is intended to be used with a Syncano account. If you don't already have one - you can sign up here.

Install from Bower

bower install ng-syncano --save

Install from NPM

npm install ng-syncano --save

Injecting ngSyncano

Once you have put the ng-syncano.js or ng-syncano.min.js file in your js or services folder, you'll need to import ngSyncano so you can use it's API calls and services.

In your app.js file or the file that contains code that looks something like this:

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

You'll need to insert the ngSyncano keyword in between the brackets like this:

var myApp = angular.module('myApp', ['ngSyncano']);

Setting Up The Config

Next you'll need to set up the config part of your app, so that Syncano knows what your API details are.

In that same app.js file, put the following code:

myApp.config(function (syncanoConfigProvider) {
    syncanoConfigProvider.configure({
        apiKey: 'APIKEY/ACCOUNTKEY',
        instance: 'INSTANCE'
    });
});

Be aware that if you use more than one config for ngSyncano, only the first one will be used!

Config with a User Key

Most API calls will require more authentication or a higher level API key. The one we suggest using for your public app is a public API key. This key will need a user key to provide you with access to more permissions and API calls.

We have set up the ngSyncano library so you can start your app with a username and password. The code below shows you how!

myApp.config(function (syncanoConfigProvider) {
	  syncanoConfigProvider.configure({ // enter Syncano details
		    apiKey: 'MY_PUBLIC_API_KEY',
		    instance: 'MY_INSTANCE'
		    username: 'USERNAME',
		    password: 'PASSWORD'
	  });
});

This would replace your original config function!

Using the syncanoService In Your Controller

After you have completely set up the config for ngSyncano in your app, you will need to inject the Syncano Service into your controller.

To use the Syncano API calls in your Angular controller, just include syncanoService in the function section of your controller. The syncanoService will allow you to do a few things:

  1. Get the current Syncano object (global)
  2. Add a User Key
  3. Remove a User Key

Then you just use the regular JS Library API calls to perform the rest of your Syncano API calls.

myApp.controller('SyncanoController', function ($scope, syncanoService) {
	var syncano = null; // will be used for API calls
	$scope.dataRetrievedFromSyncano = null;
	$scope.error = null;

	syncanoService.getSyncano() // gets the current Syncano object
		.then(function(res){ // uses promises
			syncano = res; // set to current Syncano Object
			
			/* TO REMOVE A USER */
			//syncanoService.removeSyncanoUser(); // returns string

			/* TO LOG IN */
			//var user = {
				//"username": "USERNAME",
				//"password": "PASSWORD"
			//};
			//syncanoService.setSyncanoUser(user)
				//.then(function(res){
					//syncano = res;
					//**** use `syncano.userDetails` to see user profile and details
				//})
				//.catch(function(err){
					//console.log(err);
				//});
		})
    .catch(function(err){
			console.log(err);
		});
});

The syncano object will contain all of your API details, so you won't need to type them in again. You'll notice that the getSyncano() call expects a promise. This is done so that you can choose to either include user info at the beginning, or leave them out, but the library will always send a promise back.

Note: All functions needing Syncano data will need to be called in the .then() of the getSyncano() call! This is because that call is asynchronous.

For more details see example.html in this repo.

Once you have imported syncanoService and have used it for an API call, the last step is to display it in the DOM or html page! That's where you get creative ;)

Look here for more examples on our JS Library API calls.

Contributors

Change Log

  • 3.0.0 - 2016-03-04
    • v1.0 Syncano JS library
  • 2.1.0 - 2016-03-04
    • User Profile is returned with UserKey
  • 2.0.0 - 2016-01-22
    • Gives user ability to add User Keys
  • 1.0.0 - 2015-11-07
    • Initial Release