Problem with uiRouter

Question

Problem with uiRouter

Navigation

#1 by (1 votes)

2

I have a problem with my router when i use it i can not make it work, i copy the exact code as it is in git from uiRouter and it does not work, because the links are not referable, when I hover the mouse over the link the format of the mouse is as if you were passing it over normal text and not a link. Could someone please help? Thank you in advance.

<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);
 });

javascript angularjs ui-router

asked by anonymous 05.06.2017 / 18:51

1 answer

Flexbox: Is it possible to force 100% width on a div with space-between daughter in parent? Overflow in menu off canvas?

score 1 · Accepted Answer

There's absolutely nothing wrong with the code, make sure that the JavaScript files are being included correctly.

The only problem that exists there (existed before editing) is that the first HTML anchor is using a ui-ref attribute that should be ui-sref .

See a functional example, using your own code, only with the correction in HTML and referencing CDN's instead of local files .

Example code

<html>
  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script><scriptsrc="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>