AngularJS组件化

最新推荐文章于 2023-04-22 06:00:00 发布

chongxiaocheng

最新推荐文章于 2023-04-22 06:00:00 发布

阅读量530

点赞数 1

分类专栏：框架文章标签： angularjs 结构设计框架 web前端

本文链接：https://blog.csdn.net/chongxiaocheng/article/details/70877590

版权

框架专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当前越来越多的大型网站采用框架结构设计，学习AngularJS组件化势在必行，下面为页面框架简单案例！

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/angular-1.6.4/angular.min.js"></script>
    <script src="js/app/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>

主页面Html文档

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
div.container{
    width: 1000px;
    margin: auto;
}

引入主页面css文件

var app=angular.module("myapp",[]);
app.component("pageHeader",{
    templateUrl:"js/app/other/pageheader.html",
    controller:function($scope){

    }
});
app.component("pageSlide",{
    templateUrl:"js/app/other/pageslide.html",
    controller:function($scope){

    }
});
app.component("pageFooter",{
    templateUrl:"js/app/other/pagefooter.html",
    controller:function($scope){

    }
});

引入主页面js文件

通过主页面JS文件引入其他分页面Html页面

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

<div class="slide-pageSlide">
    页面左侧导航
</div>
<style>
    .slide-pageSlide{
        width:200px;
        height: 500px;
        float: left;
        background: #2aabd2;
        color: #fff;
    }
</style>侧边栏导航部分

<div class="footer-pageFooter">
    页脚部分
</div>
<style>
    .footer-pageFooter{
        clear: both;
        width: 100%;
        height: 100px;
        background: #6ecbcc;
        color: #2aabd2;
    }
</style>