Angular ui-router : Links are not clickable

Question

I try to run angular-ui-router to handle my views but i have a problem. The two links of the following view are not clickable. Angular change variable with link label but i can't click on.

I have this view :

<!DOCTYPE html>
<html ng-app="MyApp">
    <head>
            <meta charset="utf-8">
    </head>
    <body>
        <h1>App</h1>
        <nav>
            <a ui-shref="app">{{link.home}}</a>
            <a ui-shref="app.front.signin">{{link.signin}}</a>
        </nav>
         <div ui-view="content">
        </div>
    </body>
</html>

I use this code. It do not returns errors . All modules (localStorage ... are included) but links are not clickable.

/**
 * Declaration of MyAppControllers module
 */
 MyAppControllers = angular.module('MyAppControllers',[]);
/**
 * Declaration of MyApp Application
 */
MyApp = angular.module('MyApp', ['MyAppControllers','LocalStorageModule','ui.router']);  


MyApp.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/");
    //
    // Now set up the states
    $stateProvider
            .state('app', {
                url: "/",
                views: {
                    "content": {templateUrl: "views/front/home-1.0.html"}
                }
            }) 
            .state('app.front.signin', {
                url: "/signin",
                views: {
                    "content": {templateUrl: "views/front/home-1.0.html", controller: "signinCtrl"}
                }
            });

    }
]);

Can someone help me ?

Pankaj Parkar · Accepted Answer · 2017-06-28 08:14:37Z

5

You messed up in type it should be ui-sref instead of ui-shref

<body>
    <h1>App</h1>
    <nav>
        <a ui-sref="app">{{link.home}}</a>
        <a ui-sref="app.front.signin">{{link.signin}}</a>
    </nav>
     <div ui-view="content">
    </div>
</body>

Your second link should be app.signin instead of app.front.signin because you don't have parent route front

.state('app.signin', {
    url: "/signin",
    views: {
        "content": {
            templateUrl: "views/front/home-1.0.html", 
            controller: "signinCtrl"
        }
    }
});

edited Jun 28, 2017 at 8:14

answered May 1, 2015 at 8:16

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-router : Links are not clickable

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related