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


below file structure, please let me know doing wrong routing not working:

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

apart have resume folder , home folder have basic html layouts , ctrl files both below:

resumectrl.js

(function(){    'use strict';     angular.module('appnakul').controller('resumectrl',['$scope','$rootscope','$routeparams','$route', function($scope,$rootscope,$routeparams,$route){      }]);  }); 

the url gets created : ../app/index.html#/home, url loading content ..app/home/home.html

enter image description here

new answer
in appnakul.js instantiating module in anonymous function. thing is, you're not calling function! change this:

(function () {     'use strict';     angular.module('appnakul', ['ngroute' ])     // truncated })(); 

and should go.

old still relevant answer
looks templateurl route incorrect.
said have resume , home folder, url should in resume folder then.

.when('/resume', {     title: 'resume',     templateurl: 'resume/resume.html',     controller: 'resumectrl' }) 

Comments

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -