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.

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.

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