Problem with URL in AngularJS

Question

Problem with URL in AngularJS

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I'm running a system running locally, done in Spring Java boot on the back end and Angular on the front end. But I have a problem occurring on the front end that is as follows:

When I raise my application and access the localhost/clinica/ I'm redirected to my index that loads my home.html ; So far so good. The page loads neatly with menus and information. The url looks like this: http://localhost/ultravitae/#!/

In the menu I have a Profile option; When I click I should list the profiles but nothing appears. It's on the same previous page. However the url changes, thus: http://localhost/ultravitae/#!/#%2Fperfil

As far as I can see, it's like concatenating the url. Has anyone experienced this and knows how to solve it?

My index.js looks like this:

'use strict';

angular.module('clinica',['ngRoute'])
.config(function($routeProvider){

    $routeProvider
    .when('/', {
        templateUrl: 'src/home/home.html',
        controller: 'HomeCtrl'
    })
    .when('/perfil', {
        templateUrl: 'src/perfil/perfil.html',
        controller: 'PerfilCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

My home.js like this:

'use strict';

angular.module('clinica')
  .controller('HomeCtrl', function() {
  });

And my profile.js like this:

'use strict';

angular.module('clinica')
.controller('PerfilCtrl', function($scope, $http){
    $scope.perfils = [];

    $http.get('http://localhost:8080/api/private/perfil').then(function(response){
            $scope.perfils = response.data;
        });
});

In my index.html I have a div that should display the content

<div id="main">
    <ng-view />
</div>

The folder structure looks like this: ultravitae (arquivos: index.html e index.js)

|-> src
|-> home (arquivos: home.html e home.js)
|-> perfil (arquivos: perfil.html e perfil.js)

Note: I did the following test. In index.js I put for my index to call perfil.html instead of home.html and listed the profiles right: angular.module ('clinic', ['ngRoute']) .config (function ($ routeProvider) {

    $routeProvider
    .when('/', {
        templateUrl: 'src/perfil/perfil.html',
        controller: 'PerfilCtrl'
    })
    .when('/perfil', {
        templateUrl: 'src/home/home.html',
        controller: 'HomeCtrl'

    })
    .otherwise({
        redirectTo: '/'
    });
});

angularjs

asked by anonymous 11.07.2017 / 12:41

3 answers

ArrayIterator Flags Increase the source of the list in Data Validation

score 0 · Answer 1

Have you tried $urlRouteProvider ? I seem to run a different, basically assisted call while $routeProvider runs everything internally, here is an example that worked for me in a past project ...

.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/home') //Página principal

  $stateProvider

  .state('home', {

    url: '/home',
    templateUrl: 'templates/home/home.html'

  })

  .state('detalhes', {

    url: '/detalhes/:resId',
    templateUrl: 'templates/conteudo/detalhes.html',
    controller: 'detalhesCtrl'

  })

})

score 0 · Answer 2

You have to put the base tag href="/" in the index or home.html and put the $ locationProvider parameter inside the config function in the route and call the parameter like this:

$locationProvider.html5Mode(true);

so the # will no longer be shown.

score 0 · Answer 3

I know the topic is old, but it's always good to help others.

Anyway, you can use in your href="#! / profile" do not use href="# / profile" because it will pick up from the ASCII table% 2 which is the space.

And leave your .config just the way you are! just change your link in HTML.

.when ('/ profile', { templateUrl: 'src / home / home.html', controller: 'HomeCtrl' '