Menu

AngularJS integration

Find out how to integrate JSQL with AngularJS

Stack requirements

The JSQL AngularJS library will not work without an account in the JSQL cloud, a backend application (API) integrated with JSQL and integration with the tasks of the runner. To learn more see overview.

Installation

Install via NPM

npm install jsql-angular1

To include library in your project include library in your HTML or include into your tasks runner configuration.

<script src="jsql-angular.min.js"></script>

Configuration

First of all, you need to inject jsql-angular module into your AngularJS app:

var app = angular.module('app', ['jsql-angular'])

Then you can set JSQL configuration using jsqlProvider provider:

app.config(['jsqlProvider', function (jsqlProvider) {

  jsqlProvider.setConfig({
    host: 'https://mysite.com'
  });

}]);

You can pass additional configuration parameters into setConfig function.

See details about creating JSQL object
Full configuration of you application can look like:
'use strict';

var app = angular.module('app', ['ui.router', 'ngRoute', 'ngSanitize', 'ngAnimate', 'jsql-angular'])

    .config(['$httpProvider', '$provide', function ($httpProvider) {

        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common["X-Requested-With"];
    }])

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {

        $stateProvider.state('home', {
            url: '/',
            templateUrl: 'app/controllers/home/home.html',
            controller: 'HomeController',
            controllerAs: 'vm',
            data: {}
        });

        $urlRouterProvider.otherwise('/');

    }])

    .config(['jsqlProvider', function (jsqlProvider) {

         jsqlProvider.setConfig({
            host: 'https://mysite.com'
         });

    }]);

Usage

To usa JSQL in your AngularJS project you need to inject the jsql service into your controller, service, factory or whatever you want:

angular.module('app')
.controller('ExampleController', ['$scope',  'jsql', ExampleController]);

function ExampleController($scope, jsql){
// Your controller function
}

Then you can execute operational functions as on example below:

Example select usage

angular.module('app')
.controller('ExampleController', ['$scope',  'jsql', ExampleController]);

function ExampleController($scope, jsql){

 jsql.select('select * from person')
 .then(function(result){
 // Query result
 })
 .catch(function(error){
 // Database errors
 })
 .finally(function(){
 // Always executed
 });

}

For details on using other methods like delete, update, insert and binding parameters, see the documentation.

See JavaScript API Docs

Promises naming

Each implementation of the JSQL library for the framework has a slightly different promises structure.

For AngularJS we use Angular $http default convention using then and catch and finally names instead of default then and catch and always.

Example promise naming

jsql.select('select * from person')
.then(function(result){
// Query result
})
.catch(function(error){
// Database errors
})
.finally(function(){
// Always executed
});
Close Menu