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?

回答1:

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.

来源：https://stackoverflow.com/questions/38791267/using-angular-route-in-webapi-application

标签

angularjs

asp.net-web-api

ngroute

angularjs-ng-route