angularjsasp.net-web-apingrouteangularjs-ng-route

Using Angular route in webapi application

I'm not sure how can I implement proper Angular routing in web api application. I'm able to open the pages using this approach: http://localhost:52876/HTML/app/borrower.html

The Angular controller loads fine and all functionality is there from the angular side.

Now, I want to be able to open the views in a bit better view, using ng-route, so for example http://localhost:52876/HTML/app/borrower.html will become http://localhost:52876/borrower.

I included the ng-route.js file in the html files which I'm using in my angular app.

Also in app.js I have this: 

'use strict';

var modules = [
    'app.controllers',
    'LoanAdminApplicationController',
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute',
    'ui.router',
    'LocalStorageModule',
    'angular-loading-bar'
];

var app = angular.module('app', modules);


app.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);
    $routeProvider.when("/home", {
        controller: "homeController",
        templateUrl: "/app/views/home.html"
    });

    $routeProvider.when("/login", {
        controller: "loginController",
        templateUrl: "/HTML/login.html"
    });

    $routeProvider.when("/signup", {
        controller: "signupController",
        templateUrl: "/app/views/signup.html"
    });

    $routeProvider.when("/register", {
        controller: "signupController",
        templateUrl: "/app/views/register.html"
    });

    $routeProvider.when("/refresh", {
        controller: "refreshController",
        templateUrl: "/app/views/refresh.html"
    });

    $routeProvider.when("/tokens", {
        controller: "tokensManagerController",
        templateUrl: "/app/views/tokens.html"
    });

    $routeProvider.when("/borrower", {
        controller: "borrowerController",
        templateUrl: "/HTML/app/borrower.html"
    });

    $routeProvider.otherwise({ redirectTo: "/home" });

});

The html markup (I removed the content):

<!DOCTYPE html>
<html ng-app="app">
<head>
</head>
<body ng-controller="BorrowerQuickQuoteApplication">


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/assets/js/jquery.min.js"></script>
    <script src="/assets/js/modernizr.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="/assets/js/bootstrap.min.js"></script>
    <script src="/Scripts/angular.js"></script>
    <script src="/Scripts/angular-cookies.min.js"></script>
    <script src="/Scripts/angular-resource.min.js"></script>
    <script src="/Scripts/angular-sanitize.min.js"></script>
    <script src="/Scripts/angular-route.min.js"></script>
    <script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Angular/controllers.js"></script>
    <script src="/Angular/LoanApplicationController.js"></script>
    <script src="/Angular/services.js"></script>
    <script src="/Scripts/angular-local-storage.min.js"></script>
<script src="/Scripts/loading-bar.min.js"></script>

<script src="/Angular/app.js"></script>
</body>
</html>

Any idea what I need to do in order to make this working?

Should I modify the RouteConfig.cs file or I need to do anything else as well?

Solution

  • You don't navigate with the file name as you are doing that's angular route job to do for example

      $routeProvider.when("/borrower", {
        controller: "borrowerController",
        templateUrl: "/HTML/app/borrower.html"
    });

    when you go to localhost:8080/yourapp/borrower

    and you need ng-view in your index.html

    Like this

    <div ng-view></div>

    your pages will be shown here.

    router will look that you are requesting for the borrower and it will take you to the /HTML/app/borrower.html You are using html five mode that means you need server side routing to so it can fall to index.html every time so your url can be without hash.