web
2019-03-05
2019-03-05
简单的介绍使用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 | <!-- 头部导航 --> |
<a href="#/"><span>•</span>首页</a>
是你要跳转的页面,当然,要保证你的这个页面存在才行。
angularjs的路由配置
1 | angular.module('app', ['ngRoute']) //'app'就是前面ng-app="app",使body成为angularjs的根元素 |
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 (注意最前边有一个空格)
- 然后再用该浏览器打开即可,若没有出现,先复制地址栏里面的路径并关闭浏览器,然后打开该浏览器,粘贴到地址栏回车即可