AngularJS之组件化篇

最新推荐文章于 2019-09-19 20:54:39 发布

扶苏小锦鲤

最新推荐文章于 2019-09-19 20:54:39 发布

阅读量6k

点赞数

文章标签： angularjs 组件化 ui

本文链接：https://blog.youkuaiyun.com/mm825474872/article/details/70880138

版权

本文探讨AngularJS中的组件化特性，强调如何通过组件化提高UI代码的复用性。通过.component()方法注册组件，组件配置对象替代了指令的工厂方法。示例中展示了如何封装header、footer和侧边栏为组件，以便在多个页面中方便地引用和使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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:"<h2>尊敬的用户{{username}}，欢迎访问本系统</h2>",
        controller:function($scope) {
            $scope.username = "tom";
        }
    });

    app.component("pageSlide", {
        template:"<h2>这是一个侧边栏导航</h2>"
    });

    app.component("pageFooter", {
        template:"<h2>这是一个网页底部代码</h2>"
    });
</script>
</body>
</html>

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

index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>