Problem with howling

Question

Problem with howling

Asked 7 years, 5 months ago

Viewed 46 times

2

personal I’m having a problem related to angular router ui always when the use cannot make it work, I copy the code exactly the way it is in the git of uiRouter and it does not work, because the links are not referential , when I pass the mouse over the link the format of the mouse is as if I were passing ito over normal text and not over 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);
 });

1

Has the question been answered? You need the answer to be improved?

– Jéf Bueno

2017/06/30 at 18:10

1 answer

Browser other questions tagged javascript angularjs ui-router

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

by Jéf Bueno • **67,331** points · Answer 1 · 2017-06-05T17:06:00+00:00

There’s absolutely nothing wrong with the code, make sure the Javascript files are included correctly.

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

See a functional example, using your own code, only with HTML correction 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>
   <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>