Question

我正在尝试使用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文件都直接位于根文件夹

中

Answer 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作为登陆主页。

Answer 2

让它工作，链接现在像'/＃/ detail'一样工作。有人可以帮助链接fancybox.js吗？它现在不起作用。缺少[]括号

Bootstrap内容的角度路由

2 个答案: