CODEWITHSUNDEEP
javascriptangularjs
Ruslan Skaldin
Ruslan Skaldin

Reputation: 1101

How to handle static url anchors in Angularjs

How to handle the situation when you enter an URL for example http://localhost/#!/somepage/ but the problem is that AngularJS doesn't handle it and doesn't load the page, otherwise if you go to somepage through the index file it works correctly.

I use ui-router and my routing script looks like:

angular.module('WEBAPP', ['ui.router', 'bw.paging'])
    .config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.when('', '/');

        var states = [
            {
                name: 'home',
                url: '/',
                templateUrl: 'application/partials/home_header.html'
            },

            {
                name: 'somepage',
                url: 'somepage/',
                templateUrl: 'application/partials/somepage.html',
            },

            {
                name: '404',
                url: '404/',
                templateUrl: 'application/partials/404.html'
            },

        ]

        states.forEach(function (state) {
            $stateProvider.state(state);
        });
    });

How to do the right routing, I want, when I enter url in browser http://localhost/#!/somepage/ AngularJS automatically redirect to that page.

Upvotes: 0

Views: 117

Answers (2)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

Try it without the for each.I might be wrong but i Think when you are using for each in here only the last state gonna bind the $stateprovider instead of binding all the states. try it like this.

$urlRouterProvider.otherwise('/');
$stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'application/partials/home_header.html'
    })
    .state('somepage', {
        url: 'somepage/',
        templateUrl: 'application/partials/somepage.html',
    })
    .state('404', {
        url: '404/',
        templateUrl: 'application/partials/404.html'
    })

edited

change the url this url: 'somepage/'

to this url: '/somepage'

and when you are calling remove the ! mark in the url.just http://localhost/#/somepage is enough.

var states = [
            {
                name: 'home',
                url: '/',
                templateUrl: 'application/partials/home_header.html'
            },

            {
                name: 'somepage',
                url: '/somepage',
                templateUrl: 'application/partials/somepage.html',
            },

            {
                name: '404',
                url: '/404',
                templateUrl: 'application/partials/404.html'
            },

        ]

        states.forEach(function (state) {
            $stateProvider.state(state);
        });

Upvotes: 1

Ans
Ans

Reputation: 49

Use this

angular.module('WEBAPP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when('/home', {
    templateUrl: 'application/partials/home_header.html'

}).when('/somepage', {
    templateUrl: 'application/partials/somepage.html'

}).otherwise({
    templateUrl: '/home'
});

});

Upvotes: 1

Related Questions