`

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

angularjs include 
阅读更多

方式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：

 

  

<div>header</div>

    common_footer.html：

 

 

<div>footer</div>

 

angularJs 页面分解与组装：http://hudeyong926.iteye.com/blog/2111664

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics