Anjular组件化

最新推荐文章于 2021-01-25 10:57:55 发布

一个只会玩消消乐的男人

最新推荐文章于 2021-01-25 10:57:55 发布

阅读量361

点赞数

分类专栏： angularjs入门学习

本文链接：https://blog.csdn.net/csdn_wanglklyn/article/details/70988635

版权

angularjs入门学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在接触到组件化的学习之后，慢慢的对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>