0

Ниже моя структура файла, пожалуйста, дайте мне знать, что я делаю неправильно, что моя маршрутизация не работает:Угловой маршрутизации не работает, изменений URL, но страница не загружается правильно

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; 
      }); 
     }); 
}); 

помимо этого у меня есть резюме folde г и домашней папки, которые имеют базовые макеты 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

enter image description here

+0

Можете ли вы показать папку/файловую структуру вашего приложения? –

+0

Я добавил его в качестве изображения. – nakulchawla09

+0

Ничего не выпрыгивает из-за неправильной настройки, особенно если маршрут/home не загружается правильно. Выводит ли консоль ошибку? –

ответ

0

Новый ответ
В вашем appNakul.js вы создаете экземпляр модуля в анонимной функции. Единственное, вы не называете эту функцию! изменить его к этому:

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

И вы должны быть хорошо идти.

Старый, но по-прежнему актуален ответ
Похоже, ваш templateUrl для маршрута неверен.
Вы сказали, что у вас есть резюме и домашняя папка, тогда URL-адрес должен быть в папке с резюме.

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

, тогда мой домашний маршрут выглядит правильно, даже дом не работает. – nakulchawla09

+0

это сработало. Большое спасибо. Я сделал еще пару ошибок, но неотъемлемой проблемой было то, что я не вызывал анонимную функцию. Это хороший способ кодирования? Просто спрашивать, писать анонимные функции для файлов js, или я должен изменить свои пути? – nakulchawla09

+0

Все сводится к личным предпочтениям или бизнес-предпочтениям. Я, конечно, не в состоянии сказать, что один способ лучше, чем другой, но я верю, что анонимные функции предлагаются при написании кода AngularJS. Удерживая все окно и все такое. –