Angular ngRoute not working

electron
#1

I’m using angular-route in my application, I configured my routes like fallowing code:

angular.module('myApp', ['ngRoute'])
	;

angular.module('myApp')
	.config(ngConfig)
	.controller('MainCtrl', MainCtrl)
	;

ngConfig.$inject = ['$routeProvider', '$locationProvider']
function ngConfig($routeProvider, $locationProvider) {
	$routeProvider
		.when('/', {
			templateUrl: 'templates/index.html'
		})
		.when('/client', {
			templateUrl: 'templates/clients/list.html'
		})
		;

When I start up my application, it can load my default template (templates/index.html), but when I click the link to redirect client page, is returning a blank page, but has no any error in console.

Link to redirect:
<a href="client">Client</a>

How to can I use angular-route in Electron?

#2

Your href is wrong, the correct way to navigate is using #/client rather than just client.

Because you technically only stay on one page Angular routing all takes place in the hash part of the URL.

The reason the link to client fails, is because it’ll be looking for a client.html page in the parent directory, rather than firing a reroute in Angular.

#3

Great! Is working for me now.
So, the problem was not between Electron and ngRoute, is in my href.

Thanks you so so much!

1 Like
#4

I have a similar problem, electron navigates to an empty window without showing any errors.

This is the Config for ngroute:

app.config(['$locationProvider', '$routeProvider',
    function config($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix('!');

        $locationProvider.html5Mode({enabled: false, requireBase: false});

        $routeProvider.when('/settings', {
            template: '<settings></settings>' 
        }).otherwise('/'), {
            template: '<db-test></db-test>'

        };
    }

]);

This is index.html:

<body>
<nav-bar></nav-bar>
<div layout="column">
    <div>Ng view start</div>
    <div ng-view></div>
    <div>Ng view end</div>

</div>

</body>

And thoese are the links I’m trying (inside the template:

Current Location is: {{$ctrl.currentLocation}}
<a href="/!#/settings/">Settings</a>
<a href="!/settings/">Settings</a>
<a href="/!#/settings">Settings</a>
<a href="!/settings">Settings</a>

Sadly it also doesn’t pick up the .otherwise(’/’) clause…
This is what I get when I start up the app

electron_2016-10-09_19-21-35.jpg1779×742 64.6 KB

And when I press one of the links, I just get an empty page without any errors.

Can anyone help me figure out what am I doing wrong?

#5

I’ve not used them before, but is it not an issue with your hashPrefix?

In your example you’re either using a lone ! or a !#, when I think what you actually need to do is #!. The # still needs to be before whatever it is that you’re doing, otherwise you’re going to a index.html/! using hash /settings, rather than index.html/ with a hash of !/settings

As for otherwise, that’s a different issue. It looks like you don’t have a '/' path to begin with, so when this is being resolved it’s silently failing and ignoring it. As in, the page it’s redirecting to doesn’t exist in your routing to be redirected to, so it’s not. On a side note, your {template: foo} is outside of the parameter brackets, so that’s being ignored, if you expect that to be doing anything.

1 Like
#7

Thank YOU!

I’ve changed the link to:

href="#!/settings"

And now it works!

I’ve also changed the otherwise statment to:

.otherwise({
            template: '<db-test></db-test>'

        })

And it works as well!

Thank you again!

1 Like
#8

Hey, actually I’m facing the same issue.
My page is not loading further after I click the links.

Here’s the code (I’m using Visual Studio Code):
var obj= angular.module(“myApp”, [“ngRoute”]);

        obj.config(function($routeProvider){

            $routeProvider

            .when("/", {

            templateUrl: "main.htm"

            })

            .when("/red", {

                templateUrl: "bankdetails.htm"

            })

            .when("/blue", {

                templateUrl: "23nov.htm"

            })

            .when("/green", {

                templateUrl: "31oct1.htm"

            });

        });

and this:

red

    <a href="#!/blue">blue</a>

    <a href="#!/green">green</a>

Looking forward to get a solution to this. Thank you.