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
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
Post a Comment