CODEWITHSUNDEEP
javascriptjqueryhtmlangularjstwitter-bootstrap
user3395711
user3395711

Reputation: 39

Angular routing for Bootstrap content

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

Upvotes: 2

Views: 614

Answers (2)

user3395711
user3395711

Reputation: 39

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

Upvotes: 0

David Faure
David Faure

Reputation: 1376

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.

Upvotes: 1

Related Questions