Angular JS routes

Asked

Viewed 852 times

2

good night! I’m new to single page application technology, and I’m finding it difficult to render my pages at Angular one, I have a button that when I click, fires a route, it tries to be loaded, but it doesn’t appear on the page, I already searched and tried everything, I don’t know where I’m going wrong

My module:

var modulo = angular.module("clienteCtrl", ["ngRoute"]);

My route:

    modulo.config(function($routeProvider){
  $routeProvider

  .when("/", {
        templateUrl: "view/formCadastrarCliente.html"
      })

  .when("/cadastrarCliente", {
    templateUrl: "view/formCadastrarCliente.html"
  });

});

My HTML:

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bem - Vindo</title>

<link rel="stylesheet" href="css/application.css">

<!-- Importação do Angular JS -->
<script src="libs/angular.js"></script>

<!-- Importação do ng-route angular -->
<script src="libs/angular-route.js"></script>

<!-- Importação do controller -->
<script src="js/clienteCtrl.js"></script>

<!-- Importação das rotas -->
<script src="js/rotasCliente.js"></script>

</head>

<body ng-app = "clienteCtrl">

<a href="#/cadastrarCliente">Cadastrar cliente</a>

<div ng-include = "'menu.html'"></div> 

<div ng-view></div>

<div ng-include = "'footer.html'"></div>

</body>
</html>

When you click on the link, the url looks like this: http://localhost:8080/Poc_cast/index.html#! #%2FeatureClient

But the page does not load the content.

Thanks in advance!

angularjs ngroute

  • You’ve tried to use it like this: <a href="cadastrarCliente">Cadastrar cliente</a>

  • @Sorack, yes! But doing so, when clicking on the link, the browser displays the 404 error. The strange thing is that the way I posted it, it tries to render the content, but nothing appears on the page.

  • Look, the URL is weird... try ./#/cadastrarCliente OR ./cadastrarCliente

  • @Sorack, so I edited my question with my new route, in .config... If I put to load the template on . when("/"), it is loaded as soon as the html document loads into the browser... but I didn’t understand, actually confused me more, I wanted it to render only when I clicked on the link... ;(

  • See, I was reviewing some examples... change the href for #!/cadastrarCliente

  • @Sorack, thanks for your help, really! It was the error that the friend below commented, very hard to even find out, even searching, had not found anything relative! Once again I thank you and a good night! xD

  • Opa tranquilo hehehe o @Onosendai manja bastante de Angular mesmo, can trust

  • 1

    @Sorack I don’t know, I just remember the bumps. ;)

Show 3 more comments

1 answer

2


Modify

modulo.config(function($routeProvider){
    $routeProvider

for 

modulo.config(function($routeProvider, $locationProvider) {

        $locationProvider.hashPrefix('');

        $routeProvider

Your mistake is for a change in standard behavior angular 1.6.

  • Thanks, @Onosendai! That’s it, I didn’t know about this news ... actually, I preferred the other standard angular behavior.

  • @Matheusminguini Always a pleasure to help! I went through the same problem a few weeks ago, so I remembered the cause. =)

  • thanks again! D

Browser other questions tagged angularjs ngroute

You are not signed in. Login or sign up in order to post.