AngularJS-组件化<component>

最新推荐文章于 2024-05-10 09:49:34 发布

石头_666

最新推荐文章于 2024-05-10 09:49:34 发布

阅读量5.6k

点赞数

分类专栏： AngularJS 文章标签： angularjs 组件 component

本文链接：https://blog.csdn.net/qq_14992199/article/details/70880167

版权

AngularJS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

组件化

将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码。

封装简单的组件

参考代码：

    app.component("myComp", {
        template:"<h1>组件化封装的内容<small>这是一个副标题</small></h1>"
    });

组件化案例参考：

<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}}，欢迎访问本系统</h2>",
        controller:function($scope) {
            $scope.username = "tom";
        }
    });

    app.component("pageSlide", {
        template:"<h2>这是一个侧边栏导航</h2>"
    });

    app.component("pageFooter", {
        template:"<h2>这是一个网页底部代码</h2>"
    });
</script>