The $dbServiceProvider in AngularJS, Sqlite, Electron seems to be unrecognized

I am currently working on an electron app that is supposed to display and retrieve items from a SQL database I created. However, I keep encountering an unknown provider error.

Despite trying various solutions found online, the issue persists and I am unable to pinpoint where I might be going wrong.

Below is my angular service for connecting to the database (dbService.js)

app.factory("dbService", function ($http) {
    var sqlite = require('sqlite-sync');
    var db = sqlite.connect('model/database.db');
    return db;
});

Next, here is my controller (salesController.js)

app.controller("salesController", function ($scope, $location, $dbService) {
    $scope.sub = {
        'title': 'Sales Management'
    }

    $scope.listSales = function () {
        dbService.runAsync("SELECT * FROM sales WHERE active = 1", function (data) {
            $scope.sales = data;
        });
    }

});

And this is my module (app.js)

var app = angular.module('bpApp', ['ui.router', 'angularUtils.directives.dirPagination']);

Finally, I have added code to display data in my table (sales.html)

....
<tbody>
 <tr class="bz-tablecell" dir-paginate="sale in   sales|filter:search|itemsPerPage:8">
     <td id="table-checkbox"><input type="checkbox"></td>
                <td style="font-weight: 600">{{sale.name}}</td>
                <td>{{sale.amount}}</td>
                <td>{{sale.quantity}}</td>
                <td><a href="#">{{sale.customer}}</a></td>
                <td>{{sale.date}}</td>
                <td class="export-ignore"><span class="approved" style="border-radius: 0 !important;">{{sale.status}}</span></td>
                <td class="export-ignore"><a href="#">Manage</a></td>
            </tr>
        </tbody>
...

All necessary files are included in index.html, which loads sale.html via ui-view. The view loads successfully, but data is not being retrieved from the database, leading to the following error:

Error: [$injector:unpr] Unknown provider: $dbServiceProvider <- $dbService <- salesController

If anyone can offer guidance on resolving this issue, it would be greatly appreciated...

Answer №1

Consider revising the declaration of your controller to

app.controller("salesController", function ($scope, $location, dbService) {

Your dbService factory is not following the AngularJS API naming convention, which requires a $ prefix for services.

For more information, you can visit https://docs.angularjs.org/guide/concepts#angular_namespace

Naming Convention with '$' Prefix Angular uses a '$' prefix for its built-in services and Scope methods to avoid naming collisions. When creating your own services or models, it's recommended not to use the '$' prefix to prevent conflicts.

Angular Namespace To prevent potential collisions with other libraries, Angular prefixes certain objects with names that could clash with $. Avoid using the $ prefix in your code to steer clear of any unintended clashes with Angular functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to modify the sub/child divs within a draggable parent div and assign them a different class?

Greetings, after being a long-time reader, I have finally decided to post for the first time. In the process of creating a webpage with jQuery drag and drop divs, I am curious about how to change the class of a child div within a draggable div once it is d ...

When receiveMessage is triggered, the FCM push notification fails to refresh the view

After following this helpful tutorial on Push Notifications with Angular 6 + Firebase Cloud Messaging, everything is working perfectly. I am able to receive notifications when using another browser. To ensure that my notification list and the length of no ...

Is there a way to determine if a property contains a string value?

In my main.js file, I have a function called $scope.onError which is triggered when there is an error while uploading an attachment. The function logs the error message received from the server and assigns it to the variable $scope.errorMessage. If the val ...

Determine whether an object exists within another object and merge its value into the formatted object

When filling out a form, I have a formattedData object that holds a deep copy of the original data object. If a field in the form is changed, I must update the formatted data object with properties from the values object. To simulate this scenario, I crea ...

Issue with displaying content in AngularJS view set by a service

I'm currently facing a challenge in accessing the view with an expression that doesn't seem to be working correctly. Here is my Service: angular.module('myApp', []).service('myService', function($timeout){ this.sayHello = ...

Local cross-origin requestsORCross-origin requests within local

I'm having an issue with a simple setup that I can't seem to figure out: This is my index.html file: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>SyriLab</title> <link rel="stylesheet" ...

Managing and updating arrays in VueJS2: Conditionally push new items and update only if their properties have changed

I am currently facing an issue with my form where each time a user updates a value in an input field, a new array element is created and added to the form results. I'm looking for a way to update the properties of the existing array element without cr ...

Activate a drop-down feature to refresh the page with a link attached

When I click on a different language, the drop down does not change to that specific language. My code was functioning properly until I added an href attribute to it. Here, you can see my JavaScript function which handles the language selection logic: $(d ...

Is there a way to prevent the rendering of the defining tag within an ng-repeat loop?

Imagine you have a basic loop like <div ng-repeat="item in items">{{item.foo}}<br></div> or <div ng-repeat="item in items" ui-view="itemView"></div> Is there a way to avoid including the defining tag (div) and achieve this ...

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

Ways to trigger a server function in JavaScript upon closing a browser tab or the entire browser

How can I trigger a server function when closing a browser tab or window using JavaScript? Similar to this image //Below is the code for my server-side function: public ActionResult DeleteNotPostedImage(string folder , string PostID) { folder ...

Managing changes to object properties in Angular

I am encountering a situation where I have an object containing both an 'id' and 'name' property, structured like this: function format(id){ return '(' + id + ')'; } function MyObject(id){ this.id = id; this. ...

Updating specific fields when using Put method with Restify and SQLite3

I am currently utilizing Restify alongside a SQLite3 database. Here is what I have implemented for my put method: server.put('/users/:userid', function(req, res, next) { bcrypt.hash(req.body.password, 10, function(err, hash) { if (err) { ...

Seeking advice on removing the initial blank space from a dropdown value in Angular.js

I have a deeply thought-out logic that I would like to illustrate with an example. However, in order to present it effectively, I am looking for suggestions on how to simplify the process without relying too heavily on the controller. <select class="fo ...

React Router is not compatible with ReactJS app version 18

After using the command npx create-react-app, I've just set up a new ReactJS app which I think is running on React version 18 (feel free to correct me if I'm mistaken). Now, as I attempt to implement a router for this app, I find myself hesitati ...

Resize a div within another div using overflow scroll and centering techniques

Currently, I am working on implementing a small feature but am facing difficulties with the scroll functionality. My goal is to zoom in on a specific div by scaling it using CSS: transform: scale(X,Y) The issue I am encountering lies in determining the c ...

Determine the horizontal movement of x and z on a flat surface while accounting for

Using HammerJS, I am able to manipulate a 3D object within an augmented reality environment. Everything functions properly unless I physically move my phone (which serves as the camera)... const newTranslation = new THREE.Vector3(this._initTranslation.x ...

The process of departing a SocketIO room and switching to a different room logic

I am wondering how I can leave the Room when I click on a new Room Here is what my page looks like: https://i.sstatic.net/vuwv0.png The list on the left side is from the MySQL Server and it displays a list of my chats. Each Room name has an id value whi ...

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

How can you personalize the background color of a Material-UI tooltip?

Is there a way to customize the hover tooltip with a "? icon" for users providing input guidance in a text field? I prefer the design to have white background with grey text and larger font size, as opposed to MUI's default style which is grey with wh ...