Tlin Blog > AngularJs+Bootstrap搭建首页导航路由

AngularJs+Bootstrap搭建首页导航路由

2019-03-05

web

简单的介绍使用angular.js搭建网页的导航路由，外加bootstrap复制粘贴代码即可用。导航、页脚部分固定，中间的内容是变动的。

点击查看效果

值得注意：

要想angularjs兼容包括IE8以上的版本，要用angularjs 1.3之前的版本，本项目是v1.2.9
jQuery要2.0之前的
bootstrap要3.x的
此外，该项目的资源在我的github 点击查看
一些关于该兼容性的博客

目录树

1、导航部分

  • 首先，必须设置 AngularJS 应用的根元素：<body ng-app="app">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 头部导航 -->
	<nav class="clear">
		<div class="nav_count">
			<div class="nav_left">
				<a href="#/"><img src="img/logo.png" alt="" class="logo"></a>
			</div>
		  	<div class="nav_list">
			  	<ul>
			  		<li class="list_child"><a href="#/"><span>•</span>首页</a></li>
				    <li class="list_child"><a href="#/one"><span>•</span>导航1</a></li>
				    <li class="list_child"><a href="#/two"><span>•</span>导航2</a></li>
				    <li class="list_child"><a href="#/three"><span>•</span>导航3</a></li>
				    <li class="list_child"><a href="#/four"><span>•</span>导航4</a></li>
				    <li class="list_child"><a href="#/five"><span>•</span>导航5</a></li>
			  	</ul>
			 </div>
			 <div class="nav_right">
				  <ul>
				  	<li><a href="javascript:">登录</a></li>
				  	<li><a href="javascript:">注册</a></li>
				  </ul>
			</div>
			<div class="toggle clear"><i class="glyphicon glyphicon-align-justify"></i></div>
		</div>
	</nav>

<a href="#/"><span>•</span>首页</a>是你要跳转的页面，当然，要保证你的这个页面存在才行。

angularjs的路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
angular.module('app', ['ngRoute'])  //'app'就是前面ng-app="app"，使body成为angularjs的根元素
.config( function ($routeProvider,$locationProvider) {
   
    $routeProvider.
    when('/', { //刚打开项目时显示的页面
        templateUrl: 'html/index.html'
    }).
    when('/one', {
        templateUrl: 'html/one.html'
    }).
    when('/two', {
        templateUrl: 'html/two.html'
    }).
    when('/three', {
        templateUrl: 'html/three.html'
    }).
    when('/four', {
        templateUrl: 'html/four.html'
    }).
    when('/five', {
        templateUrl: 'html/five.html'
    }).
    otherwise({
        redirectTo: '/' // 重定向回到首页，可用作404页面 
    });
});
2、页面内容部分
  • 此部分简单，就是通过angularjs引入本项目的其它页面，其它页面的内容就显示在这个窗口内。
  • 指令：ng-view
    1
    2
    3

    <!--路由引入接口-->
    <div ng-view id="view"></div>
3、页脚部分
  • 页脚也是挺简单的，就是一个静态的东西，不过最好使用粘性页脚。
  • 什么是粘性页脚？就是Sticky footers，当页面内容较少时，不足以把页脚撑到页面底部，这就不好看了，页面内容多了自然没问题。所以就把这种当页面内容少时自动粘在底部，当页面内容多时自动往下推的布局方式叫做 Sticky footers。如下图：
  • 看阮一峰老师的Flex布局教程-固定的底栏最为详细。好了，放代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- 页脚部分 -->
    	<footer>
    		<div class="footer_count row">
    			<a href="javascript:window.open('https://tilin.gitee.io/')" id="blog">点击进入我的博客</a>	
    			<div>粘性页脚。页脚随便布置了</div>		
    		</div>
    		<div class="copyright">
    			<div class="row">
    				<ul class="col-md-12">
    					<li>tilin原创，严谨滥用©版权所有</li>
    				</ul>   
    			</div>
    		</div>
    	</footer>

至此，内容就完了。下面是遇到的一些坑：

  • 1、轮播左右按钮无效，而且angularjs还报错。解决如下：
  • 原来是：href="#carousel-example-generic"，就是加了/
  • 2、如果想通过a标签跳转到非本项目的页面，像以往的这种写法 <a href="www.xxx.com" >跳转到xxx</a>是不行的，href必须是https://www.xxx.com或http://www.xxx.com
  • 3、如果打开入口文件，就是根目录下的那个index.html在页面没显示内容，浏览器还报错的，如图：
  • 即本站点跨域了，是有点奇怪，但是吧项目放到服务器就没有问题的。解决办法如下：
  • **右键浏览器快捷键→属性，在“快捷方式”里面的“目标”加上 --allow-file-access-from-files (注意最前边有一个空格)
  • 然后再用该浏览器打开即可，若没有出现，先复制地址栏里面的路径并关闭浏览器，然后打开该浏览器，粘贴到地址栏回车即可