angular js实现公共体


在没有使用angular-js的情况下我们去实现一个WEB项目不同的页面里的页面头和页面尾要单独重新写一遍在运用angular-js后我们可以迅速的简单的实现页面单独的调用即优化了代码也减少了人工手写的重复,下面我为大家简单的实现一下一个页面通过angular去调用另一个页面的过程:
主页面:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css"/>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<!--
自定义指令:以my-*的形式定义
自定义指令:可以定义共同的模板,方便页面进行调用
    (1)元素  e
    (2)属性  a
    (3)类名  c
    (4)注释  m
    自定义指令的步骤:
    (1)应用.directive("自定义指令名称,带有返回值的函数")
    (2)返回值是一个对象,这个对象可以设置自定义指令的模板
    (3)返回值对象参数配置:
    a:restrict------------定义自定义指令的类型(值:ecma)
    b:template------------定义自定义指令里面的模板字符串
    c:templateurl---------------定义自定义指令里面的模板的url地址
-->
<my-name></my-name>
<div>-------------------------</div>
<script src="js/angular.min.js"></script>
<script>
    var myapp=angular.module("myapp",[]);
    //定义自定义指令
    myapp.directive("myName",function(){
        return{
            restrict:"E",
            //todo 特别注意外部定义的共用部分
            templateUrl:"common.html"
        };
    });
</script>
</body>
</html>
调用页面 common.html:
注意咱们在写调用页面的时候不用去写任何的html,body等,只需要单独的写一下页面内容,在主页面去调用css
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>
</table>
调用的css :
table,td,th{
      border: 1px solid red;
  }
实现效果:
谢谢您的观看,有什么建议请留下您的宝贵建议。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值