Routing issue in Angular ui-router using href

Question

I have made one state and trying to navigate to other page. There is no error in console but navigation is not working either.

index.html

<body ng-app="app">
    <a href='#/first-msg'>link</a>
    <div ui-view></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
    <script src="application.js"></script>
</body>

application.js

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', '$locationProvider', function($stateProvider, $locationProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first-msg',
        templateUrl: 'home.html',
        controller: 'homeCtrl'
    });
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
}]);
app.controller("homeCtrl", ['$scope', function($scope) {
    $scope.message = "This is home";
}]);

when i click on link, the url is like

.../index.html#%2Ffirst-msg

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Using ui-router, you should not use href. Use ui-sref instead:

<a ui-sref="firstMessage">link</a>

Note I use the state name, and not its URL.

JSFiddle demo

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 21, 2017 at 13:40

Mistalis

18.3k14 gold badges78 silver badges97 bronze badges

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

Collectives™ on Stack Overflow

Routing issue in Angular ui-router using href

1 Answer 1

JSFiddle demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related