View not loading in Asp.net angular app. Angular Routing with Asp.net mvc

Question

I'm trying to route a simple view in ASP.NET AngularJs app but the view not loading on the browser ngView is commented out in browser.

JavaScript

(function () {

"use strict";

angular.module("app-trips", ["simpleControls", "ngRoute"])
    .config(function ($routeProvider) {

        $routeProvider.when("/", {
            $controller: "tripsController",
            $controllerAs: "vm",
            $templateUrl: "/views/tripsView.html"
        });

        $routeProvider.when("/editor", {
            $controller: "tripEditorController",
            $controllerAs: "vm",
            $templateUrl: "/views/tripEditorView.html"
        });

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

})();

CHTML

@model IEnumerable<App.Models.Trip>
@{
    ViewBag.Title = "Home"; 
}

@section Scripts{ 
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/lib/angular-route/angular-route.min.js"></script>
    <script src="~/js/simpleControls.js"></script>
    <script src="~/js/app-trips.js"></script>
    <script src="~/js/tripsController.js"></script>
}

<div ng-app="app-trips">
    <div ng-view></div>
</

Results

Answer 1

Remove $ sign from your $routeProvider route properties.

$routeProvider.when("/", {
    controller: "tripsController",
    controllerAs: "vm",
    templateUrl: "/views/tripsView.html"
});

Note: If you're using .NET MVC project, you can't access html files directly from views folder. I'd recommend to create a new folder and put static html files there.