angular组件化2

最新推荐文章于 2024-08-14 19:41:34 发布

原创最新推荐文章于 2024-08-14 19:41:34 发布 · 324 阅读

0 ·

CC 4.0 BY-SA版权

angularjs入门学习专栏收录该内容

7 篇文章

订阅专栏

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>