角度路由不起作用,URL更改但页面未正确加载

时间:2016-11-10 22:37:30

标签: javascript angularjs single-page-application angular-routing

下面是我的文件结构,请让我知道我的错误是我的路由无效:

的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,但实际加载内容的网址为..App/home/home.html

enter image description here

1 个答案:

答案 0 :(得分:0)

新答案
appNakul.js中,您将在匿名函数中实例化模块。唯一的问题是,你没有调用这个函数! 将其更改为:

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

你应该好好去。

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

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