Angular 路由不起作用，URL 发生变化但页面加载不正确

Question

下面是我的文件结构，请告诉我我做错了什么，我的路由不起作用：

index.html

<!DOCTYPE html>
<html ng-app="appNakul">
<head>
    <title> Nakul Chawla</title>
    <!--<base href="App/"/>-->
    <link href="../Content/bootstrap.min.css" rel="stylesheet"/>

</head>


<body>

<ul>
    <li><a href="#/">Default Route</a></li>
    <li><a href="#/resume">Resume Route</a></li>
    <li><a href="#/home">Home Route</a></li>

</ul>
<div ng-view></div>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/angular-route.js"></script>

<script src="shared/common.js"></script>
<script src="appNakul.js"></script>

<script src="shared/indexCtrl.js"></script>

<script src="home/homeCtrl.js"></script>
<script src="resume/resumeCtrl.js"></script>


</body>
</html>

appNakul.js

(function () {
    'use strict';
    angular.module('appNakul', ['ngRoute' ])
        .config(function ($routeProvider) {
            $routeProvider.when('/home', {
                title: 'Home',
                templateUrl: 'home/home.html',
                controller: 'homeCtrl'
            })
                .when('/resume', {
                    title: 'Resume',
                    templateUrl: 'resume.html',
                    controller: 'resumeCtrl'
                })
                .otherwise({
                    redirectTo: '/home'
                });
            // $httpProvider.interceptors.push('httpInterceptor');
        })
        .run(function ($rootScope) {
            $rootScope.on('$routeChangeSuccess', function (event,currentRoute,previousRoute) {
                document.title = currentRoute.title;
            });
        });
});

除此之外，我还有一个简历文件夹和一个主文件夹，它们具有基本的 html 布局和 Ctrl 文件，如下所示：

resumeCtrl.js

(function(){
   'use strict';
    angular.module('appNakul').controller('resumeCtrl',['$scope','$rootScope','$routeParams','$route', function($scope,$rootScope,$routeParams,$route){

    }]);

});

创建的 URL 是： ../App/index.html#/home，但是实际加载内容的URL是..App/home/home.html

Answer 1

新答案
在您的 appNakul.js 中，您正在匿名函数中实例化模块。唯一的问题是，您没有调用该函数！将其更改为：

(function () {
    'use strict';
    angular.module('appNakul', ['ngRoute' ])
    // Truncated
})();

你应该可以开始了。

旧的但仍然相关的答案
看起来你的 templateUrl 路线不正确。
你说你有一份简历和一个个人文件夹，那么 url 应该在简历文件夹中。

.when('/resume', {
    title: 'Resume',
    templateUrl: 'resume/resume.html',
    controller: 'resumeCtrl'
})

Angular 路由不起作用，URL 发生变化但页面加载不正确

Angular Routing not working, the URL changes but the page doesn't load correctly

javascript

angularjs

single-page-application

angular-routing