Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

Case sensitivity with angularjs ui-router

Suggested Videos
Part 43 - AngularJS ui-router configuring states
Part 44 - AngularJS ui router parameters
Part 45 - AngularJS ui router optional parameters



In this video we will discuss how to make routes that are configured using ui-router case-insensitive.



The routes that are configured using ui-router are case sensitive by default. For example, consider the state below. Notice the url (/home) is lowercase.

$stateProvider
    .state("home", {
        url:"/home",
        templateUrl: "Templates/home.html",
        controller: "homeController",
        controllerAs: "homeCtrl"
    })

If we type the following URL in the browser, we will see home.html as expected.
http://localhost:51983/#/home

If you type the following URL, then you will see a blank layout page. This is because, by default routes are case-sensitive
http://localhost:51983/#/HOME

To make the routes case-insensitive inject $urlMatcherFactoryProvider service into the config() function and call caseInsensitive(true) function passing a value of true.

var app = angular
            .module("Demo", ["ui.router"])
            .config(function ($urlMatcherFactoryProvider) {
                $urlMatcherFactoryProvider.caseInsensitive(true);
            })

AngularJS tutorial for beginners

1 comment:

It would be great if you can help share these free resources