您的位置：首页 > 其它

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

2017-04-27 18:03 204 查看

组件的概念及实际应用

最近由于公司在用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名称-组件名称这样定义的。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航