项目中AngularJS前端页面分解及组装

最新推荐文章于 2020-08-20 18:16:23 发布

jatters

最新推荐文章于 2020-08-20 18:16:23 发布

阅读量187

点赞数

分类专栏： Web前端文章标签： angularjs include

本文链接：https://blog.csdn.net/u011348213/article/details/84761689

版权

Web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方式1：使用ng-include标签方式：

index.html页面内容：

<!DOCTYPE html>
<html ng-app>
<head>
   <title>simple app</title>
   <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body ng-controller='MyController'>
  <script>
           function MyController($scope, $timeout){
              
           };
    </script>
  <ng-include src="'common_header.html'"></ng-include>  
    
    <div>center</div>
    
   <ng-include src="'common_footer.html'"></ng-include>  
  

</body>
</html>

common_header.html：

<div>header</div>

common_footer.html：

<div>footer</div>

方式2：使用ng-include标签方式：

<!DOCTYPE html>
<html ng-app="">
<head>
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="'common_header.html'"></div>
<div ng-include="'common_footer.html'"></div>
</div>

<script src= "js/angular.min.js"></script>
<script>
   function userController($scope, $timeout){
              
   };
</script> 
</body>
</html>

common_header.html：