Angular routing for Bootstrap content

Question

I'm trying to use AngularJS mainly for seamless routing of an already functioning webpage. The idea is simple: / stands for the root (index.html), /detail stands for a detailed view (detail_zerohouse.html). However, even with the app and both controllers defined, all I can get is a weirdly layed out index.html and I can't even get to the detail view, all I get is an 404 Not Found. Here's my code:

----------------- 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 -->

Thanks for any help, I've tried everything I could think of but got nowhere.

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

All .html files are directly in the root folder

Please provide your working directory and folder and files structure. The 404 on routes and templateUrl is because the browser can not find the specific html file and probably you are not referencing the path correctly. — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 15, 2015 at 21:26
It would be more clear to insert a picture of the directory in the question. — Farzad Yousefzadeh
– Farzad Yousefzadeh, Commented Oct 15, 2015 at 21:33
You may want to move your jquery reference to the top of angular references. — curiousgeek
– curiousgeek, Commented Oct 15, 2015 at 21:39

David Faure · Accepted Answer · 2015-10-15 22:21:53Z

1

I think that you forgot the ngRoute dependency:

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

Also to go to detail you should use

<a href="#/detail">

instead of

<a href="detail.html">

Also what you need to rename your file: root.html should be renamed index.html and index.html to root.html. You need to have the index.html as your landing main page.

edited Oct 15, 2015 at 22:21

answered Oct 15, 2015 at 21:46

David Faure

1,38614 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3395711 Over a year ago

tried with and without the dependency, makes no difference.. it doesn't even correct the URL when typing random letters like /abcdefg..

user3395711 Over a year ago

I was manually typing the URL, in the future I will update the links with ngClick so there is no problem here

David Faure Over a year ago

ok, but in this case you don't have any detail.html file so you receive 404, I don't understand the point...

user3395711 Over a year ago

I can't get the views loaded that's the problem.. Index.html and detail_zerohouse.html should be the files that are needed if I'm not mistaken

user3395711 Over a year ago

When typing /detail into the browser it should redirect to detail_zerohouse.html which is available as a html file

|

user3395711 · Accepted Answer · 2015-10-16 09:33:06Z

0

got it working, the links now work like '/#/detail'. Can somebody help where to link the fancybox.js? It does not work now. Missing [ ] braces

edited Oct 16, 2015 at 9:33

answered Oct 16, 2015 at 6:14

user3395711

391 silver badge9 bronze badges

Collectives™ on Stack Overflow

Angular routing for Bootstrap content

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related