组件化入门
网页结构和组件化
常规网页开发时,网页的结构大概是什么样的?
上中下、左中右、上下、左右
上中下结构:上、下结构保持不变,中间部分内容发生变化
组件化:将网页中可以重复使用的标签封装成一个组件,方便这一部分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>