Tips for implementing $routeProvider's resolve function in electron-angular-boilerplate

I am encountering an issue with loading JSON data before entering the main controller in my project.

Using this project as a template, I made alterations to only dist/app/home/home.js where the changes were implemented:

angular.module('WellJournal', ['uiGmapgoogle-maps', 'ngRoute'])
    .config(function (uiGmapGoogleMapApiProvider, $routeProvider) {
        uiGmapGoogleMapApiProvider.configure({
            libraries: 'geometry,visualization,places'
        });

        $routeProvider.when('/', {
            templateUrl: 'index.html',
            controller: 'MainController',
            resolve:  {
                markers: ['$http', function ($http) {
                    return $http.get('http://address/api/markers/').then(function (result) {
                        console.log(result.data);
                        return result.data;
                    });
                }]
            }
        });

        $routeProvider.otherwise({ redirectTo: '/' });
    })
    .controller('MainController', function ($scope, $uibModal) {
    //trying to access $scope.markers here
    }

The issue is that 

markers: ['$http', function ($http) {...}]
is not being triggered. Upon checking the address of the default page being loaded (window.location.href), it appears as 
file:///home/myuser/path/to/project/dir/views/index.html
(relevant code can be found here).

It seems that there is no server set up and just opening a local file (I assume?).

How can I ensure that the $routeProvider.when(...) clause is triggered? Is this even possible?

Thank you.

javascriptangularjsresolve

Answer №1

If encountering a similar issue with someone else, I have found the following method to be effective:

angular.module('HealthTracker', ['uiGmapgoogle-maps'])
        .run(function($http, $rootScope){
            $http.get('http://endpoint/api/locations/').
            success(function(data, status, headers, config) {
                $rootScope.locations = data;
                $rootScope.$broadcast('locations-fetched');
            }).
            error(function(data, status, headers, config) {
                // handle error
                alert('error');
            });
        })
        .factory('locations', function ($rootScope) {
            var locations;
            $rootScope.$on('locations-fetched', function(){
                locations = $rootScope.locations;
            });
            return {
                data: locations
            }
        })
        .config(function (uiGmapGoogleMapApiProvider) {
            uiGmapGoogleMapApiProvider.configure({
                libraries: 'weather,geometry,visualization,places'
            });
        })
        .controller('MainController', function ($scope, $uibModal, $http, $rootScope, locations) {
        // access data using locations parameter
        //Note: Data loading may cause slight visual delay on page load
        //This approach minimizes the delay while ensuring data availability 
        }

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

Exploring the Relationship between Parent and Child Scopes in AngularJS

point 1 I'm perplexed as to why I couldn't access the child controller property using {{$scope.parentcities}}. However, when I simply use {{parentcities}}, it works. Why is it that we cannot write $scope dot and then property name? <div ng-a ...

angularjs

How to locate the duplicate elements within an array using JavaScript

There are two different sets of numbers Numbers1=[ 0, 1, 2, 0, 2 ]; Numbers2=[ 0, 0, 1, 2, 2 ]; The goal is to determine the index of each element in Numbers2 from Numbers1 and create a new array like [0,3,1,2,4]; If you would like to see the code I wr ...

javascriptarrays

Steps for Displaying Data from API Response in Vue.js

Immediately rendering the following template, without waiting for the API call to complete. I came up with a solution using v-if to prevent elements from rendering until the data is available. However, this seems to go against the DRY principle as I have ...

javascriptvuejs2vue.js

Working with iFrames through Splinter/Selenium in Python

Just a heads up: I can work with either Selenium or the Splinter API wrapper for Selenium! I've encountered some hurdles while trying to navigate iframes on Twitter.com using the Python Splinter API. For instance, with Browser('firefox', ...

javascriptpythonseleniumiframesplinter

Having trouble retrieving data when updating a user in ExpressJS

Trying to update an experience array in the User model with new data, but facing issues with saving the data in the exec function. As a result, unable to push the new data to the array on the frontend. Here is the current code snippet: router.post('/ ...

javascriptnode.jsexpress

Is it possible for me to retrieve/load a <datalist> element from a different file?

I'm in the process of developing a Google Chrome extension that essentially consists of a dropdown menu and an input box with datalists. The user can change their selection in the dropdown menu, which will then switch the datalist being used by the in ...

javascripthtmlhtml-datalist

Vite deciding to generate its own node_modules directory within the workspace rather than depending on a monorepo

I have organized a monorepo for a fullstack webapp with the directory structure outlined below: . ├── client │ ├── index.html │ ├── package.json │ ├── src │ └── vite.config.ts ├── node_modules ├── p ...

javascriptnpmvitemonoreporeact-fullstack

AngularJS: Customize form elements based on model type

I need to work with an Angular model that contains ConfigValues. This is essentially a Dictionary object passed from C# which looks something like this: { Name: "Config Name", Value "True", Type: 0 // boolean } Some of these values are boolean, ...

javascriptangularjs

Angular-maps-google search bar

I have a specific directory structure as follows: myFolder myApp.coffee index.html searchbox.tpl.html Within myApp configuration, I've set the following: $scope.searchbox = {template: "searchbox.tpl.html"} While trying to implement this example, ...

angularjsangular-google-maps

Creating a typewriter effect with Vue Js

Hey there, I'm having some trouble with the code below while working on my Vue project. It seems to be functioning correctly, but for some reason it's not working in my Vue environment. const text = document.getElementById("text"); const phrase ...

javascriptvue.jsvuejs3

Having difficulty with printing a particular div

I need help with printing a specific div containing checkboxes using jQuery. The checkboxes are initially checked based on data from a database, but when I try to print the div, the checkboxes remain unchecked in the print view. Below is the code snippet ...

javascripthtmlcsscheckboxprinting

VueJS error: Trying to access properties of undefined object ('$refs') is unsuccessful

Parent Component: ... <v-stepper-step :rules="[()=>isValid(1)]" > MyStep </v-stepper-step> <v-stepper-content> <Mytag ref="MyReference" /> </v-stepper-content> ... methods: { isValid(number){ ...

javascriptvue.js

Starting service upon startup in Angularjs

I am looking to retrieve configuration data from the server and store it in the global scope within my AngularJS application. My app operates in multiple modes such as development and production, with different external services being used depending on the ...

javascriptangularjs

Navigating the conundrum of Express routing in HTML5 style without using HASHBangs can be challenging when using Angular JS and Ye

Starting a new project from scratch and diving into the world of Yeoman's modern workflow tools for front-end development with AngularJS. The backend will be written in Node.js using Express, with a focus on serving all content statically to the clien ...

node.jsangularjsexpressgruntjsyeoman

Having trouble enabling push notifications on Android with ngCordova

Having trouble with push notifications through the ngCordova plugin. Followed the sample code from (with a slight change - no deviceready listener, code inside ionicPlatform.ready listener) Below is the code snippet: angular.module('myApp', [& ...

javascriptangularjscordovaionic-framework

Difficulty dealing with Firestore using get() followed by add()

Recently started learning Vue.js and Firestore, facing a challenge with what should be a simple task. 1) I am trying to fetch default values from an existing template document in my Firestore database. 2) The goal is to use these default values to create ...

javascriptvue.jsgoogle-cloud-platformgoogle-cloud-firestore

Exploring the power of recursive Angular directives

Recursion in angular directives is necessary for creating a left menu. The code provided without recursion does not achieve the desired menu structure. Implementing recursion is key to generating the left menu recursively. Uncertain about the recursion ...

angularjsangularjs-directive

Tips on arranging JSON elements based on the sequence of another JSON

Currently, I am facing a challenge with sorting a list of parks (park_list) based on both distance and area. The code snippet below successfully sorts the list by distance: sortList(index){ return function(a, b){ return (a[index] === b[index] ? 0 : ...

javascriptarraysjsonangularionic3

Trouble invoking npm package.json scripts

The package.json file in my projects directory contains the following scripts section: "scripts": { "seed": "node bin/seed", "test": "echo \"Error: no test specified\" && exit 1" }, Executing $ npm test results in the followin ...

javascriptjsonnode.jsnpm

Denied the execution of the inline script due to a violation of the CSP by the Chrome extension

We've been working on integrating Google Analytics into our Chrome extension, and here are the steps we've taken: We updated our manifest.json with the following line: "Content-Security-Policy": "default-src 'self'; script-src 'n ...

javascriptgoogle-analyticscontent-security-policy