CODEWITHSUNDEEP
angularjsnode.jsangular-ui-router
Pradeep Charan
Pradeep Charan

Reputation: 683

angular js state provider with dot in url not working

I am using angular js state provider. I want my url like this. http://localhost:8080/state1/state1.html . It says "Cannot GET /state1/state1.html". Here is the code

$stateProvider
    .state('state1', {
        url: '/state1/state1.html',
        templateUrl: "partials/state1.html",
        controller: 'MyCtrl'
    });

It works fine when i remove .html . How to handle dot in this scenario. I am using node server

Thank you

Upvotes: 0

Views: 659

Answers (3)

Fan Yer
Fan Yer

Reputation: 391

This is a problem with node server's or front-end router config, which most happened under webpack-dev-server, or say it express's imperfection. And accoring to RFC3986, unreserved = ALPHA / DIGIT / "-" / "." / "_" / "~" you cannot convert . into %2e unless you package it as your customed solution.

If your router is implemented front-end with history API, you can package your angular app and serve then compiled under Nginx or Caddy server, and It would work normally.

For node server or others, you'd better specify the *.* in the router config.

Upvotes: 1

T.Gounelle
T.Gounelle

Reputation: 6033

URLs with dots work just fine. Here in this plunker, the state withdot has the url /withdot.html configured and I added url parameters with dots just for good measure. There is no specific handling of the dots (.) in the url specs, as opposed as dots in the state names that mean parent/child relationship.

Upvotes: 0

Krzysztof Raciniewski
Krzysztof Raciniewski

Reputation: 4924

    var routerApp = angular.module('routerApp', ['ui.router']);

    routerApp.config(function($stateProvider, $urlRouterProvider) {
        
        $urlRouterProvider.otherwise('/');
        
        $stateProvider

            .state('main', {
                url: '/',
                template: '...'
            })
        
            .state('home', {
                url: '/urlto/home.html',
                template: 'Home page'
            })
            
            .state('about', {
                url: '/urlto/about.html',
                template: 'about page'
            });
            
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <div ng-app="routerApp">
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
        </ul>
    </nav>

    <div class="container">

        <div ui-view></div>

    </div>
    </div>

Seems to work fine for me. Maybe you have problem with HTML5 mode and server app routing?

Upvotes: 0

Related Questions