揭秘--组件的概念及应用

最新推荐文章于 2022-12-10 23:38:09 发布

Drenched-oldTimes

最新推荐文章于 2022-12-10 23:38:09 发布

阅读量406

点赞数

分类专栏： angular 文章标签： AngularJS Angular 前端组件组件概念

本文链接：https://blog.csdn.net/sinat_38529191/article/details/70865698

版权

angular 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

组件的概念及实际应用

最近由于公司在用AngularJS，最近就把关于这方面的知识都整理了一遍，就最近遇到的组件问题给大家说一下都少走一点弯路~

平时我们所看到的网页中，有很多HTML页面中都只有很少的标签，但却很炫酷，感觉同样也实现了很多效果。那这个页面就使用了今天要说的组件，我们平时在项目开发中也是会经常运用到的一个很重要的东西。

组件的概念

组件的概念是在有了面向对象之后产生的,是翻译过来的词汇。其实组件就是对象。中国人喜欢聪明，一定会找出n多个词汇来表达。组件它是将页面中一部分UI(UI是用于数据展示的标签，简单点来说也就是界面）封装起来进行重复使用。

网页结构和组件化的区别
常规网页开发时，网页的结构大概是什么样的？
上中下、左中右、上下、左右
上中下结构：上、下结构保持不变，中间部分内容发生变化

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

案例1

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
</head>
<body>
<my-comp></my-comp>

<my-comp></my-comp>

<script>
    var app = angular.module("myApp", []);

    // 封装一个简单的组件
    app.component("myComp", {
        template:"<h1>小美女<small>是我</small></h1>"
    });
</script>
</body>
</html>

运行出来就是这样的===》

小美女是我

上面这个是一个简单的组件，接下来可以试试升级一下。

其实平时开发项目的时候，做一个项目就要有几十个文件，今天说的组件，比较麻烦的就是文件特别多，路径要找对，还要知道对应的文件夹写的是什么。

案例2

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title>组件化</title>
		<script src="angular.min.js" ></script>
	</head>
	<body>	
           <page-header></page-header>
           <page-slide></page-slide>
           <page-footer></page-footer>
	</body>
	<script>
		var app=angular.module("myApp",[]);
        
         //  组件化使用
        app.component("pageHeader",{
          template:"<h2>亲爱的观众朋友们{{username}},欢迎来到快乐大本营</h2>",
          controller:function($scope){
          	 $scope.username="summer";
          }
        });
        
        app.component("pageSlide",{
        	template:"<h2>侧边栏</h2>"	
        });
        
        app.component("pageFooter",{
        	template:"<h2>网页底部</h2>"
        });
	</script>
</html>

这个是用了组件写的，html页面就只有page-header page-slide page-footer这3个标签。

component是组件

template是组件的模块

在实际项目中，是会先定义好各个板块，再在其中加内容。要注意定义组件的个性化样式，它是默认的样式，组件里标签的样式也是要分清，它是 class名称-组件名称这样定义的。

如果小伙伴们在学习或者工作中遇到有关这样的问题，可以看看上面的案例，相互讨论都可以哒~~~

Drenched-oldTimes

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
揭秘--组件的概念及应用

组件的概念及实际应用最近由于公司在用AngularJS，最近就把关于这方面的知识都整理了一遍，就最近遇到的组件问题给大家说一下都少走一点弯路~平时我们所看到的网页中，有很多HTML页面中都只有很少的标签，但却很炫酷，感觉同样也实现了很多效果。那这个页面就使用了今天要说的组件，我们平时在项目开发中也是会经常运用到的一个很重要的东西。组件的概念组件的概念是在
复制链接

扫一扫