角路由不起作用，URL更改但页面无法正确加载

Question

Below is my file structure, please let me know what I am doing wrong that my routing is not working: 以下是我的文件结构，请告诉我我做错了路由不起作用：

index.html 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 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;
            });
        });
});

apart from this I have a resume folder and a home folder that have basic html layouts and Ctrl files that both look like below: 除此之外，我还有一个简历文件夹和一个主文件夹，它们具有基本的html布局和Ctrl文件，它们都如下图所示：

resumeCtrl.js resumeCtrl.js

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

    }]);

});

The URL that gets created is : ../App/index.html#/home , but the URL that is actually loading the content is ..App/home/home.html 创建的URL是../App/index.html#/home ，但实际加载内容的URL是..App/home/home.html

Answer 1

New answer 新答案
In your appNakul.js you are instantiating the module in an anonymous function. 在您的appNakul.js您将使用匿名函数实例化该模块。 Only thing is, you're not calling the function! 唯一的事情是，您没有调用该函数！ Change it to this: 更改为此：

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

And you should be good to go. 而且您应该很好。

Old but still relevant answer 旧的但仍然相关的答案
Looks like your templateUrl for the route is incorrect. 看来您的templateUrl路线不正确。
You said you have a resume and a home folder, the url should be in the resume folder then. 您说您有一个简历和一个主文件夹，该网址应位于简历文件夹中。

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

角路由不起作用，URL更改但页面无法正确加载

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-10 22:52:55

角路由不起作用，URL更改但页面无法正确加载

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-10 22:52:55

解决方案1
0 已采纳 2016-11-10 22:52:55