2

pessoal estou com um problema relacionado ao ui router do angular sempre quando o uso não consigo fazer com ele funcione, eu copio o codigo exatente da forma como esta no git do uiRouter e ele não funciona, pois os link não ficam referenciaveis , quando passo o mouse por cima do link o formato do mouse fica como se estivesse passando-o por cima de um texto normal e não de um link. Alguém poderia por favor ajudar ? agradeço desde já

<html>
  <head>
   <script src="node_modules/angular.js"></script>
   <script src="node_modules/angular-ui-router.js"></script>
   <script src="helloworld.js"></script>

   <style>.active { color: red; font-weight: bold; }</style>
</head>

<body ng-app="helloworld">
   <a ui-sref="hello" ui-sref-active="active">Hello</a>
   <a ui-sref="about" ui-sref-active="active">About</a>

   <ui-view></ui-view>

var myApp = angular.module('helloworld', ['ui.router']);

myApp.config(function($stateProvider) {
   var helloState = {
   name: 'hello',
   url: '/hello',
   template: '<h3>hello world!</h3>'
  }

  var aboutState = {
     name: 'about',
     url: '/about',
     template: '<h3>Its the UI-Router hello world app!</h3>'
   }

  $stateProvider.state(helloState);
  $stateProvider.state(aboutState);
 });
1
  • 1
    A pergunta foi respondida? Precisa que a resposta seja melhorada?
    – Jéf Bueno
    30/06/2017 às 18:10

1 Resposta 1

1

Não tem absolutamente nada de errado com o código, verifique se os arquivos JavaScript estão sendo incluídos corretamente.

O único problema que existe aí (existia antes da edição) é que a primeira âncora do HTML está usando um atributo ui-ref que deveria ser ui-sref.

Veja um exemplo funcional, usando o seu próprio código, apenas com a correção no HTML e referenciando CDN's ao invés de arquivos locais.

Código do exemplo

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
   <script src="helloworld.js"></script>

   <script type="text/javascript">
        var myApp = angular.module('helloworld', ['ui.router']);
        myApp.config(function($stateProvider) {
            var helloState = {
                name: 'hello',
                url: '/hello',
                template: '<h3>hello world!</h3>'
            };
            var aboutState = {
                name: 'about',
                url: '/about',
                template: '<h3>Its the UI-Router hello world app!</h3>'
            };
            $stateProvider.state(helloState);
            $stateProvider.state(aboutState);
        });
   </script>

   <style>.active { color: red; font-weight: bold; }</style>
</head>

<body ng-app="helloworld">
   <a ui-sref="hello" ui-sref-active="active">Hello</a>
   <a ui-sref="about" ui-sref-active="active">About</a>

   <ui-view></ui-view>
</body>
</html>
3
  • Certo eu corrigi esse erro, porem o que estou um tanto quanto em duvida é em como ele funciona quando esta instalado na maquina, pois quando o utilizo importando via cdn ele funciona normalmente 5/06/2017 às 17:10
  • 2
    Então é porque você colocou o caminho errado.
    – Jéf Bueno
    5/06/2017 às 17:11
  • certo dei uma olhada e realmente havia feito um erro de caminho, muito obrigado. 5/06/2017 às 17:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .