Using Angular route in webapi application

Question 1

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?

Question 2

what is error in your applications in routing ?

Question 3

no error is shown, I can share teamviewer if you want

Question 4

I think you click on menu but it is not route properly

Question 5

I'm not using ng-view at all in the html files, is that required? @Singh

Question 6

Please include ng-view in your index html, its required

Question 7

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.

Question 8

Do you have few minutes for teamviewer? Thanks for your answer

Question 9

710 045 275 / 5630

score 1 · Accepted Answer · 2016-08-08 14:24:38Z

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.

Do you have few minutes for teamviewer? Thanks for your answer

CollectivesTM on Stack Overflow

Using Angular route in webapi application

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related