angular组件化2

来源：互联网发布：ps淘宝宝贝详情怎么做编辑：程序博客网时间：2024/05/20 23:59

angular组件化的应用可以使网页的开发更简单，而且有时候一个标签就可以实现网页的开发，例如

在index中需要引入angular库和自定义的js文件

<head>    <meta charset="UTF-8">    <title>Title</title>    <script src="js/lib/AngularJS/angular.min.js"></script>    <script src="js/app/index3/index3.js"></script></head><body>    <goodslist></goodslist></body>

在index3.js中

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},        ]    }})

上面的$scope.goodses数据为模拟数据，数据应通过Ajax接口库从后台获取

上面的ul和li的样式一定要添加单独的class给其添加样式，以免影响全局样式，组件越小越能重复使用越好

常规网页开发时
为了方便项目后期维护，将HTML,CSS/JS代码分离
组件化开发时
为了方便组件的后期维护，将HTML/CSS通常会写在一个页面中

templateUrl:"js/app/index3/partials/goodsList.html",的设置如下

<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>

0 0