AngularJS[ng-include]实现页面共用

最新推荐文章于 2022-09-21 00:21:47 发布

Yates WANG

最新推荐文章于 2022-09-21 00:21:47 发布

阅读量5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： AngularJS angular 前端

本文链接：https://blog.youkuaiyun.com/YatesWANG/article/details/47612305

Web前端专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了Angular应用中使用ng-include指令加载模板的原理，详细解释了src参数如何通过$eval进行变量计算，并加载对应的HTML模板。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:32px;color:#FF0000;"><strong><span style="font-size:14px;">此处有坑：src="'header.html'" 在ng-include中，是把它的参数当做变量来解释的，它会通过$eval对传入的值进行计算，然后作为模板地址去加载。

</span></strong></span><!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Footer Header Test</title>
    <script src="angular.js"></script>
</head>
<body>
    <!-- header -->  
    <ng-include src="'header.html'"></ng-include>  
          
    <div class="container">  
    <!-- angular ng-view -->  
        <div ng-view></div> 
    <!-- /angular ng-view -->  
    </div>  
          
<!-- Footer -->
    <ng-include src="'footer.html'"></ng-include>
</body>
</html>