Anjular组件化

来源：互联网发布：白鹤祥java架构师视频编辑：程序博客网时间：2024/06/08 12:25

在接触到组件化的学习之后，慢慢的对angular的组件化也有了一定的了解，下面就对我目前的学习做个总结

在一般的网页开发中，一般的网页结构可分为以下几种：上中下、左中右、上下、左右。在上中下结构中，

一般上、下结构保持不变，中间部分内容发生改变。

angular组件化就是将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用，类似于JS中的函数，

封装了一部分处理代码，通过函数调用就可以重复使用这些代码

angular组件化的优点：可重复使用，后期维护方便等等，下面angular组件的一个小应用以供参考

以上还需要angular的入口指令、angular库的引入等

angular组件化关键字：component，template

注意：在组件化的应用中template的元素尽可能的设置一个，例如<h1>标签，如果需要其他元素，最好嵌套<h1>标签内

<body<><my-comp></my-comp>为自定义标签<script>    var app = angular.module("myApp", []);    // 封装一个简单的组件    app.component("myComp", {        template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"    });</script></body>

多个组件使用

<body><page-header></page-header><page-slide></page-slide><page-footer></page-footer><script>    var app = angular.module("myApp", []);    app.component("pageHeader", {        template:"<h2>尊敬的用户{{username}}欢迎<a href='http://www.baidu.com'>访问本系统</a></h2>",        controller:function($scope) {            $scope.username = "tom";        }    });    app.component("pageSlide", {        template:"<h2>这是一个侧边栏导航</h2>"    });    app.component("pageFooter", {        template:"<h2>这是一个网页底部代码</h2>"    });</script></body>

0 0