Angular快速入门4---组件化入门篇1

最新推荐文章于 2019-01-28 16:22:48 发布

宋小草

最新推荐文章于 2019-01-28 16:22:48 发布

阅读量966

点赞数

本文链接：https://blog.csdn.net/songchuncao/article/details/70863614

版权

组件化入门

网页结构和组件化

常规网页开发时，网页的结构大概是什么样的？

上中下、左中右、上下、左右

上中下结构：上、下结构保持不变，中间部分内容发生变化

组件化：将网页中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用

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

简单的小例子

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

组件化在项目中具体使用

<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

收藏

觉得还不错? 一键收藏
0
评论
Angular快速入门4---组件化入门篇1

组件化入门网页结构和组件化常规网页开发时，网页的结构大概是什么样的？上中下、左中右、上下、左右上中下结构：上、下结构保持不变，中间部分内容发生变化组件化：将网页中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用类似于JS中的函数，封装了一部分处理代码，通过调用就可以重复使用这些代码var app = angular.module("myApp"
复制链接

扫一扫