Angular引导内容的路由
Angular routing for Bootstrap content
我试图使用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文件都直接在根文件夹
我想你忘记了ngRoute依赖:
var architectApp = angular.module("architectApp",['ngRoute']);
也可以使用
<a href="#/detail">
代替
<a href="detail.html">
还需要重命名文件:root.html应重命名为index.html和index.html为root.html。你需要有index.html作为你的登陆主页
让它工作，链接现在工作像'/#/detail'。谁能帮我把fancybox.js链接到哪里?它现在不起作用了。缺少[]大括号
相关文章：
- Angular 2路由已弃用:如何检测CanActivate
- Angular JS-如何强制浏览器记录历史以便快速路由
- Angular 2中同一页面的多个路由名称
- Angular JS和Node路由/布线-仅在页面刷新后显示数据
- angular js路由不起作用
- Angular 2 - 从父组件的“第一个子”组件到“第二个子”组件的路由
- 条件路由更改 Angular 2 中的默认路由
- Angular-使字符串对URL安全-路由是否正确
- Angular JS$location.path(..）未启动路由控制器
- 如何停止Angular UI路由器将可选参数从一个路由传递到完全不同的路由
- Angular中的ajax调用和路由问题
- 刷新Angular RouteProvider路由会导致Python出现404错误
- angular ui:ui路由器动态路由和状态
- Angular js在浏览器页面刷新后未路由到默认页面
- 多语言应用程序中的Angular JS路由不起作用
- angular-index.html只识别默认路由中定义的函数
- Angular 2:当我离开路由时，如何应用回调
- 正在计算Angular JS路由路径
- 启用了html5模式的Angular和Express路由
- Angular中对单页路由的误解
