angular js实现公共体

来源：互联网发布：js移除元素编辑：程序博客网时间：2024/05/18 02:54

在没有使用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