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

AngularJS default route

Suggested Videos
Part 25 - Angularjs partial templates
Part 26 - AngularJS route configuration
Part 27 - Remove # from URL AngularJS



In this video we will discuss how to set a default route in Angular. This is continuation to Part 27. Please watch Part 27 from AngularJS Tutorial before proceeding.



We will continue with the example that we worked with in Part 27

At the moment the problem is that, if you try to navigate to a route that is not configured, you will see only the layout page without any partial template injected into it.

For example if you navigate to http://localhost:51983/ABC, since ABC is not a configured route you will see the layout page (index.html) as shown below.

AngularJS default route

You will also have this same problem if you navigate to the root of the site i.e http://localhost:51983. The reason angular is displaying the empty layout template in both these cases, is because it does not know what partial template to inject. We want angular to redirect to default route if the user is trying to navigate to a route that is not configured.

How to configure the default route in Angular : Well that is straight forward. All you need is the following line in config() function in script.js file

.otherwise({
    redirectTo: "/home"
})

With the above change the code in config() function should be as shown below.

.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
        .when("/courses", {
            templateUrl: "Templates/courses.html",
            controller: "coursesController"
        })
        .when("/students", {
            templateUrl: "Templates/students.html",
            controller: "studentsController"
        })
        .otherwise({
            redirectTo: "/home"
        })
    $locationProvider.html5Mode(true);
})

With this change if the user tries to navigate to a route that is not configured (http://localhost:51983/ABC) or just to the rooot URL (http://localhost:51983), the user will be automatically redirected to http://localhost:51983/home.

AngularJS tutorial for beginners

2 comments:

  1. hi sir, this riday from delhi. we all friends of my college 've been watching you'r videos from long around 6 hours a day just coz you explain so well. we have problem with mvc5 in which it default create account controller and and two models where applicationusermanager and useridentity and something more we totally don't understand.if you have covered these things somewhere then pls guide us or pls make videos on it. and a thing i don't find signalR tutorials i need it if you have and if its payable then pls provide me the link to buy. my email is ridaykumar903@gmail.com. hope you answer me of these asap. anyway thanks for your effort for us

    ReplyDelete
  2. Dear when you create you brand new MVC project then it is a full application where you can signup and sign in and it also provides you the ability of doing CRUD Operations so Account controller is for actions like registration and login and applicationusermanager and other are models and view models for that hope the answer your question..........

    ReplyDelete

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