AngularJS tag not coming up as link

Question

I am new to AngularJS. I have created a basic website where I have added 2 links and I want to create route for the same. Below is my index.html file:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>   
</head>
<body>
<div id="links">
    <a ui-sref="login">Login</a>
   <a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>

But when I run my code, both tags above are not coming as links.

`both tags above are not coming as links` what are they coming as? — dfsq, Sep 17 '14 at 07:04
Like this? http://plnkr.co/edit/H614Q7v2NDO3q7qsRU5i?p=preview — dfsq, Sep 17 '14 at 07:08
Did my answer help you? Is there something still not working for you regarding this subject? — m59, Jan 08 '15 at 00:48

score 3 · Answer 1 · edited May 23 '17 at 12:19

The problem is simply that you don't have any routes registered with ui-router. When you register your routes, the ui-sref directive will add the href tags and the default hyperlink styling will be applied. Read more about hyperlinks and anchor tags here.

Example: Live Demo

.config([
  '$stateProvider',
  function($stateProvider) {

    $stateProvider
    .state('myState', {
      url: '/my/path',
      controller: 'MyStateController',
      templateUrl: 'my-state.html'
    });

  }
]);

HTML:

<a ui-sref="myState">My State</a>

The ui-sref directive will then render this:

<a href="/my/path">My State</a> <!-- HTML5 Mode -->
<a href="#/my/path">My State</a> <!-- hashbang mode -->

AngularJS tag not coming up as link

1 Answers1

Example: Live Demo