Bootstrap 内容的角度路由答案

【问题标题】：Angular routing for Bootstrap contentBootstrap 内容的角度路由
【发布时间】：2016-01-14 12:20:58
【问题描述】：

我正在尝试将 AngularJS 主要用于已经运行的网页的无缝路由。这个想法很简单：/ 代表根（index.html），/detail 代表详细视图（detail_zerohouse.html）。但是，即使定义了应用程序和两个控制器，我也只能得到一个布局奇特的 index.html，我什至无法进入详细视图，我得到的只是 404 Not Found。这是我的代码：

----------------- main.js ----------------------------
  
var architectApp = angular.module("architectApp");
architectApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'index.html',
            controller: 'indexCtrl'
        }).
        when('/detail', {
            templateUrl: 'detail_zerohouse.html',
            controller: 'detailCtrl'
        }).
        otherwise({
            redirectTo: '/'
        });
}]);

-------------- indexCtrl.js ----------------------------
  
architectApp.controller('indexCtrl', function($scope){

});


-------------- detailCtrl.js --------------------------
  
architectApp.controller('detailCtrl', function($scope){

});

-------------------------- root.html ---------------------

<!DOCTYPE html>
<html lang="en" ng-app="architectApp">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>AngularJS Root</title>

    <!-- AngularJS-->
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/indexCtrl.js"></script>
    <script src="js/detailCtrl.js"></script>
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <!-- Google Roboto Font-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
        <!-- Main user stylesheet-->
    <link rel="stylesheet" href="css/style.css">
        <!-- Latest compiled and minified JavaScript -->
    <script src="//code.jquery.com/jquery-latest.min.js"></script>
        <!-- Add fancyBox -->
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
        <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
        <!-- Media helper Fancybox-->
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
        <!-- Thumbs helper Fancybox-->
    <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
        <!-- Bootstrap JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <!-- SmoothScroll JS-->
    <script src="js/smooth-scroll.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
//                initialize SmoothScroll
            smoothScroll.init();
//                set Fancybox properties
            $(".fancybox").fancybox({
//                fitToView       : false, opens the image already in fullscreen
                prevEffect      : 'none',
                nextEffect      : 'none',
                closeBtn        : false,
                closeClick      : true,
                hideOnOverlayClick : true,
                helpers     : {
                    title   : { type : 'inside' },
                    buttons : {}
                }
            });
        });
    </script>

</head>
<body class="container-fluid" ng-view>

</body>
</html>

------------------------ index.html ------------------------

 <nav class="nav  navbar-default" id="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Peter Danko</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">architektúra <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                        </ul>
                    </li>
                    <li><a href="#navigation">interiér</a></li>
                    <li><a href="#navigation">o mne</a></li>
                </ul>
            </div>
        </div>
    </nav> <!-- end nav -->

    <!--<div id="mainWrap" class="container-fluid">-->

        <div class="row tileRow" id="firstRow" style="margin-top: 5px;">
            <a href="detail.html">
                <div class="col-sm-2 tile">
                        <img src="img/dummy.png" class="img-responsive" id="">
                </div>
            </a>
            <div class="col-sm-2 tile">
                    <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                    <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                    <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
        </div> <!-- row end -->

        <div class="row tileRow">
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
            <div class="col-sm-2 tile">
                <img src="img/dummy.png" class="img-responsive" id="">
            </div>
        </div> <!-- row end -->



-----------------------  detail.html  ------------------------------


 <nav class="nav  navbar-default navbar-top-offset" id="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Peter Danko</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">architektúra <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                            <li><a href="#navigation">budova</a></li>
                        </ul>
                    </li>
                    <li><a href="#">interiér</a></li>
                    <li><a href="#">o mne</a></li>
                </ul>
            </div>
        </div>
    </nav> <!-- end nav -->



    <!--<div id="mainWrap" class="container-fluid">-->

        <div class="row tileRow" id="firstRow" style="margin-top: 5px;">

            <a href="index.html#navigation">
                <div class="col-md-2 tile logoTile">
                        <img src="img/dummy.png" class="img-responsive" id="">
                </div>
            </a>

            <div class="col-md-6 doubleTile">
                <a href="img/zerohouse/7.png" class="fancybox" rel="fancy"><img src="img/zerohouse/7thumb.png" class="img-responsive" id=""></a>
            </div>

            <div class="col-md-2 tile">
                <a href="img/zerohouse/8text.png" class="fancybox" rel="fancy"><img src="img/zerohouse/8text.png" class="img-responsive" id=""></a>
            </div>

            <div class="col-md-2 tile">
                <a href="img/zerohouse/8plan.png" class="fancybox" rel="fancy"><img src="img/zerohouse/8plan.png" class="img-responsive" id=""></a>
            </div>

        </div> <!-- row end -->

        <div class="row tileRow">

            <div class="col-md-2 tile">
                <a href="img/zerohouse/11.png" class="fancybox" rel="fancy"><img src="img/zerohouse/11thumb.png" class="img-responsive" id=""></a>
            </div>

            <div class="col-md-2 tile">
                <a href="img/zerohouse/12.png" class="fancybox" rel="fancy" title="Plan"><img src="img/zerohouse/12thumb.png" class="img-responsive" id=""></a>
            </div>

            <div class="col-md-2 tile">
                <a href="img/zerohouse/10.png" class="fancybox" rel="fancy"><img src="img/zerohouse/10thumb.png" class="img-responsive" id=""></a>
            </div>

            <div class="col-md-6 doubleTile">
                <a href="img/zerohouse/9.png" class="fancybox" rel="fancy"><img src="img/zerohouse/9thumb.png" class="img-responsive" id=""></a>
            </div>

        </div> <!-- row end -->

感谢您的帮助，我已经尝试了所有我能想到的方法，但一无所获。

/
-/css
-/fancybox
-/helpers
-/img
-/js
  -detailCtrl.js
  -indexCtrl.js
  -main.js
-detail_zerohouse.html
-index.html
-root.html

所有 .html 文件都直接在根文件夹中

【问题讨论】：

请提供您的工作目录以及文件夹和文件结构。 routes 和 templateUrl 上的 404 是因为浏览器找不到特定的 html 文件，可能您没有正确引用路径。
问题中插入目录图片会更清晰。
已经用文件结构更新了帖子
您可能希望将您的 jquery 引用移动到角度引用的顶部。
将 jQuery 移到顶部没有帮助

标签： javascript jquery html angularjs twitter-bootstrap

【解决方案1】：

我认为你忘记了 ngRoute 依赖：

var architectApp = angular.module("architectApp",['ngRoute']);

还要详细说明你应该使用

<a href="#/detail">

而不是

<a href="detail.html">

您还需要重命名文件：root.html 应重命名为 index.html，index.html 应重命名为 root.html。您需要将 index.html 作为您的登陆主页。

【讨论】：

在有和没有依赖的情况下都试过了，没有区别..在输入像 /abcdefg 这样的随机字母时，它甚至不会更正 URL ..
我是手动输入网址，以后我会用ngClick更新链接所以这里没有问题
好的，但是在这种情况下，您没有任何 detail.html 文件，因此您收到 404，我不明白这一点...
我无法加载视图，这就是问题所在。如果我没记错的话，Index.html 和 detail_zerohouse.html 应该是需要的文件
在浏览器中输入 /detail 时，它应该重定向到 detail_zerohouse.html，它可以作为 html 文件使用

【解决方案2】：

得到它的工作，链接现在像'/#/detail'一样工作。有人可以帮忙在哪里链接fancybox.js吗？它现在不起作用。缺少 [] 大括号

【讨论】：