AngularJS第五讲

来源：互联网发布：华硕mg248q设置软件编辑：程序博客网时间：2024/05/16 09:50

Angular——第五讲

组件注意事项：

1、常规网页开发时，为了方便项目后期维护，将HTML,CSS/JS代码分离

2、组件化开发时，为了方便组件的后期维护，将HTML/CSS通常会写在一个页面中

3、定义组件的个性化样式：默认样式

4、使用的时候，尽量不要使用页面中的标签选择器等等，很容易影响全局样式

5、独立组件的样式定义，通常以class名称+组件名称来定义，这样就可以将样式独立出来

6、组件化开发时，建议将当前组件的样式和标签写在一个文件中

7、组件越小越能重复使用越好！

组件的简单模式：

以下为例：

<style>                                 //定义css样式    .gl-goodslist{        list-style:none;    }    .gl-goodslist > .gl-goodslist-item{        font-size:18px;        color:orange;    }</style><ul class="gl-goodslist">    <li class="gl-goodslist-item" ng-repeat="g in goodses">        <span ng-bind="g.goodsID"></span>****        <span ng-bind="g.goodsName"></span>****        <span ng-bind="g.goodsPrice"></span>****    </li></ul>

//主页面引用

<body>    <goodslist></goodslist>    <ul>        <li>测试内容</li>        <li>测试内容</li>        <li>测试内容</li>    </ul>   </body>

JS部分

<script>var app = angular.module("myApp", []);app.component("goodslist", {    /*指定了组件使用的模板页面*/    templateUrl:"js/app/index3/partials/goodsList.html",    /*指定了组件使用的控制器*/    controller:function($scope) {        $scope.goodses = [            {goodsID:1, goodsName:"商品A", goodsPrice:44},            {goodsID:2, goodsName:"商品B", goodsPrice:59},            {goodsID:3, goodsName:"商品C", goodsPrice:449}        ]    }});

组件项目案例

主页面部分：

<body>    <div class="container">        <page-header></page-header>        <page-slide></page-slide>        <div class="pageBody">            <!-- 网页中要展示的购物车内容 -->        </div>        <page-footer></page-footer>    </div>

JS部分：// 定义了一个模块对象var app = angular.module("myApp", []);app.component("pageHeader", {    templateUrl:"js/app/index4/pageHeader/pageHeader.html",   //连接到pageHeader页面    controller:function($scope) {    }});app.component("pageSlide", {    templateUrl:"js/app/index4/pageSlide/pageSlide.html",  //连接到pageslide页面    controller:function($scope) {    }});app.component("pageFooter", {    templateUrl:"js/app/index4/pageFooter/pageFooter.html",   //链接到pageFooter页面    controller:function($scope) {    }});

header-pageHeader的HTML页面

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

slidepage的html页面

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

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

footerpage的html页面

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

0 0