AngularJS中ng-include指令实现头部和尾部的共用

考拉的墨尔本

于 2017-07-05 00:43:50 发布

阅读量3.4k

点赞数

文章标签： AngularJS ng-include

本文链接：https://blog.csdn.net/yaojxing/article/details/74366565

版权

在使用AngularJS的时候，我们可以使用ng-include指令实现页面头部和尾部的共用，。不过在使用ng-include指令的时候也是需要注意一些细节的。就是共用的头部和尾部的路径在ng-include中写法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>AngularJS实现共用的头部和尾部</title>
        <style type="text/css">
        	#content{
        		height: 100px;
        		width:100px;
        		background-color:skyblue;
        	}
        </style>
    </head>
    <body ng-app>
    	<div ng-include="'hear.html'"></div>
    	<div id="content">页面自己的内容</div>
    	<div ng-include="'footer.html'"></div>
		<script type="text/javascript" src="angular.min.js"></script>   
    </body>
</html>

借助上面的代码，观察ng-include指令中路径的写法。就只有这一个地方需要注意，其他的就没有了，使用ng-include指令可以很简单实现头部和尾部的共用。