AngularJS routeProvider 没有拉入内容答案

【问题标题】：AngularJS routeProvider not pulling in contentAngularJS routeProvider 没有拉入内容
【发布时间】：2015-05-14 19:34:15
【问题描述】：

我很困惑为什么我的路由代码不起作用。不久前我问了一个单独的问题，并被告知我应该使用路由而不是我正在使用的方法。所以我转向了路由，我过去已经成功地完成了，但它只是不起作用，我不知道我的问题出在哪里。

我的实际 index.php 只是简单地包括顶部的东西，然后是 <div ng-view></div>，然后是底部的东西。

这是我的 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:'/'
    });

}]);

我什至还没有达到/bio 部分的工作能力，因为即使是普通的旧/ 也不能工作。我转到根目录，我看到了页眉、页脚等，但内容应该是空白的。控制台中显示的唯一错误是一些非常长的乱码，似乎在说关于注射器的一些事情，我不明白。

这是生成的 HTML 代码：

<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&nbsp;</a>
            <a href="newsevents.html">News &amp; Events</a>
            <a href="articlespresentations.html">Articles &amp; Presentations</a>
            <a href="contactus.html">Contact Us</a>
            <a href="disclaimer.html">Disclaimer</a>

            <br/><br/>
            &copy; 2015 Lawrence, Kamin, Saunders &amp; Uhlenhop, LLC
            <br/><br/>
            300 South Wacker Drive, Suite 500, Chicago, Illinois 60606 &nbsp;|&nbsp; P: (312) 372-1947 &nbsp;|&nbsp; F: (312) 372-2389
        </div>
    </div>
</div> 
</div>



</body>
</html>

【问题讨论】：

content.php和app.js的绝对路径是什么？开发者控制台是否显示任何错误、404 或警告？
来自站点根目录？ /content.php 和 /js/app.js 控制台正在显示某种非常长的乱码消息，似乎在说明注入错误，但我无法弄清楚。
网址和网站根目录。
现在这不在我的本地主机上，所以 lksu.localhost.com/content.php 和 lksu.localhost.com/js/app.js
我会说它试图找到content.php 相对于app.js 所以在js/content.php。尝试使用/content.php。

标签： angularjs ngroute

【解决方案1】：

试试这个，我只是猜测。

    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:'/'
});
});

【讨论】：

也试过了。（可以肯定的是，又做了一次）-nada。 HTML 端可能有问题吗？

【解决方案2】：

DOH!!!!

我忘了包含 Angular 的路由文件：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>

【讨论】：