组件化
将页面中可以重复使用的标签封装成一个组件,方便这一部分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>