问题
I'm very confused as to why my routing code isn't working. I asked a separate question a bit ago and was told that I should be using routing instead of the method that I was using. So I moved over to routing, which I've done successfully in the past, but it's just not working and I'm lost as to where my issue is.
My actual index.php is simply including the top stuff, then a <div ng-view></div> and then the bottom stuff.
This is my app.js
var app = angular.module("LKSU", ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'content.php',
controller : 'HomeController'
})
.when('/bios/:user_id?', {
controller: 'AttorneyController',
templateUrl: 'bio.php'
})
.otherwise({
redirectTo:'/'
});
}]);
I'm not even up to the /bio part working yet since even the plain old / isn't working. I go to the root and I see the header, footer, etc, but blankness where the content should be. The only error that shows up in the console is some amazingly long gibberish that seems to be saying something about an injector, which I don't understand.
Here's the Generated HTML code:
<html ng-app="LKSU">
<head>
<base href="/">
<script>
$basehref = "/";
</script>
<title>Lawrence, Kamin, Saunders & Uhlenhop LLC</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/attorneys.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/AttorneyController.js"></script>
</head>
<body ng-controller="HomeController">
<div id="header" class="container-fluid">
<div id="logo">
<div class="row">
<div class="col-xs-6">
<a href="index.php"><img src="images/logo.gif" border=0 /></a>
</div>
<div class="col-xs-3 tagline">
<p>Not just answers.<br/>Solutions.</p>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="navbutton" id="about_button">about us</li>
<li class="dropdown navbutton" id="attorneys_button" ng-controller="AttorneyController">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">attorneys<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#/bios/2" class="biolink">Thomas F. Bennington, Jr. </a></li>
<li><a href="#" class="biolink">Peter E. Cooper </a></li>
<li><a href="#" class="biolink">Timothy J. Edmier </a></li>
<li><a href="" ng-click="myFunctions.load_bio(1);" class="biolink">Mitchell B. Goldberg </a></li>
<li><a href="#">Shannon L. Hartzler </a></li>
<li><a href="#">Ted A. Koester </a></li>
<li><a href="#">Kent Lawrence </a></li>
<li><a href="#">Robert J. Lawrence </a></li>
<li><a href="#">John F. Mahoney </a></li>
<li><a href="#">Christina M. Mermigas </a></li>
<li><a href="#">John S. Monical </a></li>
<li><a href="#">David L. Reich </a></li>
<li><a href="#">Charles J. Risch </a></li>
<li><a href="#">Raymond E. Saunders </a></li>
<li><a href="#">Robert L. Schlossberg </a></li>
<li><a href="#">Paul B. Uhlenhop </a></li>
<li><a href="#">Michael Wise </a></li>
<li><a href="#">Joseph A. Zarlengo </a></li>
</ul>
</li>
<li class="navbutton" id="areas_button">practice areas</li>
<li class="navbutton" id="studies_button">case studies</li>
<li class="navbutton" id="news_button">news & events</li>
<li class="navbutton" id="articles_button">articles & presentations</li>
<li class="navbutton" id="contact_button">contact us</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<br clear="all" />
</div>
<div class="container-fluid">
<div ng-view></div>
<br clear="all" />
</div>
<div class="row">
<div class="col-md-12">
<div class="container-fluid">
<div id="footer">
<a href="index.html">Home</a>
<a href="aboutus.html">About Us</a>
<a href="attorneys.html">Attorneys</a>
<a href="practiceareas.html">Practice Areas</a>
<a href="clients.html">Clients</a>
<a href="casestudies.html">Case Studies </a>
<a href="newsevents.html">News & Events</a>
<a href="articlespresentations.html">Articles & Presentations</a>
<a href="contactus.html">Contact Us</a>
<a href="disclaimer.html">Disclaimer</a>
<br/><br/>
© 2015 Lawrence, Kamin, Saunders & Uhlenhop, LLC
<br/><br/>
300 South Wacker Drive, Suite 500, Chicago, Illinois 60606 | P: (312) 372-1947 | F: (312) 372-2389
</div>
</div>
</div>
</div>
</body>
</html>
回答1:
Try this, and I'm just guessing.
app.config(function ($routeProvider) {
$routeProvider
// router for the home page
.when('/', {
templateUrl: 'content.php'
controller: 'HomeController'
})
.when('/bios/:user_id?', {
controller: 'AttorneyController',
templateUrl: 'bio.php'
})
.otherwise({
redirectTo:'/'
});
});
回答2:
DOH!!!!
I forgot to include angular's routing file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
来源：https://stackoverflow.com/questions/30245817/angularjs-routeprovider-not-pulling-in-content