AngularJS之组件化篇

AngularJS组件化:将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用,类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码。
组件可以用.component 注册(在 angular.module 创建的module)。这个方法有两个参数:组件名称,组件配置对象(和指令的区别,一个是工厂方法,一个是对象)。
这是一个组件化的小应用:


<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../angular.min.js">script>
head>
<body>

<page-header>page-header>
<page-slide>page-slide>
<page-footer>page-footer>

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

    app.component("pageHeader", {
        template:"

尊敬的用户{{username}},欢迎访问本系统

"
, controller:function($scope) { $scope.username = "tom"; } }); app.component("pageSlide", { template:"

这是一个侧边栏导航

"
}); app.component("pageFooter", { template:"

这是一个网页底部代码

"
});
script> body> html>

在实际开发中,很多网站的页面中,header,footer,侧边栏样式是一样的,为了提高代码的复用性,我们可以将header和footer部分封装为组件,在页面中单独引用,便于开发

index.html:

<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="js/lib/AngularJS/angular.min.js">script>
    <script src="js/app/index/index.js">script>
head>
<body>
    <div class="container">
        <page-header>page-header>

        <page-slide>page-slide>

        <div class="pageBody">
            
        div>

        <page-footer>page-footer>
    div>
body>
html>
index.js:
// 定义了一个模块对象
var app = angular.module("myApp", []);

app.component("pageHeader", {
    templateUrl:"js/app/index/pageHeader/pageHeader.html",
    controller:function($scope) {

    }
});

app.component("pageSlide", {
    templateUrl:"js/app/index/pageSlide/pageSlide.html",
    controller:function($scope) {

    }
});

app.component("pageFooter", {
    templateUrl:"js/app/index/pageFooter/pageFooter.html",
    controller:function($scope) {

    }
});

pageHeader.html:

<div class="header-pageHeader">
    页面头部
div>
<style>
    .header-pageHeader{
        width:100%;
        height:200px;
        background:#069;
        color:#fff;
    }
style>

pageFooter.html:

<div class="footer-pageFooter">
    页面底部
div>
<style>
    .footer-pageFooter{
        clear:both;
        width:100%;
        height:100px;
        background:#888;
        color:#fff;
    }
style>

pageSlide.html:

<div class="slide-pageSlide">
    侧边栏
div>
<style>
    .slide-pageSlide{
        float:left;
        width:300px;
        height:500px;
        background:orange;
    }
style>

你可能感兴趣的:(AngularJS之组件化篇)