Angle with ngRouter does not work when I type in browse

1

I need to type in browse ...

  

domain.com.br/details1234

... and I need the controller to take this number 1234 and perform its task. I tried everything without success. Home NOTE: If I create an anchor within the page by hrefing the route ( <a href="#/detalhes/1234">Rodar Controller</a> ) and clicking on this link, it works normally, but I need this to work by typing in the browse. Here's my route and controller definition:

angular.module('confirmar.routers', ['ngRoute'])

.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider
    .when('/detalhes/:id', {
      controller: 'DetalhesController'
    })

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

  $locationProvider.html5Mode(true).hashPrefix('!');
}])

.controller('DetalhesController',['$routeParams', function ($routeParams) {
  console.log('Detalhes exibido sobre o código: ' + $routeParams.id);
}]);

I need it to work by typing in the browse because the client will receive an email with the link: http://www.dominio.com.br/detalhes/<seu codigo> and when he clicks on this link, he will open the browse displaying the details of the item <seu codigo>

    
asked by anonymous 04.01.2017 / 22:40

2 answers

1

If you have not implemented redirection on your server in 404 NOT FOUND cases, your application will not work.

When using HTML5 mode the browser will request the full URL to the server whenever the user directly enters the URL (or click on a link that does not belong to the application), navigate to another server or refresh the page via refresh . Since your AngularJS application is probably a SPA, it means the server will return a 404 error, since you did not attempt to load index.html .

To fix this, you must configure your server to redirect all of your requests that result in 404 to your index.html, and then deal with unexpected states in your route provider.

Source.

    
05.01.2017 / 15:17
0

I was having a problem with ngRoute in an ASP.NET MVC web application, I resolved by passing the parameters I needed for the viewbag.

public ActionResult Detalhes(int id){
      ViewBag.ClienteId = id;
      return View();

}

and in the page html step to ng-init:

...<div ng-controller="mycontroller" ng-init="getDetalhes(@ViewBag.ClienteId)>

But if your application is not ASP.NET MVC, you can try injecting the $ location into the controller:

$location.path('/myURL/').search({param: 'value'});

or by $ routeParams:

config(['$routeProvider', function ($routeProvider) {
        $routeProvider.when('/myURL/:param1', {
            templateUrl: 'path/myPage.html',
            controller: newController
            });
    }]);

And then in the controller:

var param1= $routeParams.param1;
    
05.01.2017 / 03:04