CODEWITHSUNDEEP
javascriptangularjsroutesangular-ui-router
Umair Jameel
Umair Jameel

Reputation: 1673

Routing issue in Angular ui-router using href

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

Upvotes: 0

Views: 528

Answers (1)

Mistalis
Mistalis

Reputation: 18269

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

Upvotes: 3

Related Questions