AngularJS controller调用services

1、定义 factory.js 文件

var appFactorys = angular.module('starter.factorys', [])
appFactorys.factory('GoodsFactory', function () {
    var goodsList = [
        { "id": 1, "title": "手机", "icon": "icon ion-android-phone-portrait calm", "href": "#/homes/index" },
        { "id": 2, "title": "笔记本", "icon": "icon ion-android-laptop energized", "href": "#/homes/index" },
        { "id": 3, "title": "电脑", "icon": "icon ion-monitor assertive", "href": "#/homes/index" },
        { "id": 4, "title": "数码产品", "icon": "icon ion-android-camera balanced", "href": "#/homes/index" },
        { "id": 5, "title": "摩托车", "icon": "icon ion-stats-bars balanced", "href": "#/homes/index" },
        { "id": 6, "title": "自行车", "icon": "icon ion-android-bicycle calm", "href": "#/homes/index" },
        { "id": 7, "title": "电动车", "icon": "icon ion-stats-bars assertive", "href": "#/homes/index" },
        { "id": 8, "title": "三轮车", "icon": "icon ion-stats-bars positive", "href": "#/homes/index" },
        { "id": 9, "title": "家具", "icon": "icon ion-stats-bars assertive", "href": "#/homes/index" },
        { "id": 10, "title": "家用电器", "icon": "icon ion-stats-bars calm", "href": "#/homes/index" },
        // { "id": 11, "title": "服饰箱包", "icon": "icon ion-tshirt assertive", "href": "#/homes/index" },
        { "id": 11, "title": "服饰箱包", "icon": "icon ion-bag assertive", "href": "#/homes/index" },
        { "id": 12, "title": "母婴儿童", "icon": "icon ion-stats-bars balanced", "href": "#/homes/index" },
    ];
    return {
        all: function () {
            return goodsList;
        },
    };
});

2、定义 services.js 文件,并且调用factory函数

var appServices = angular.module('starter.services', [])
appServices.service('GoodsService', function (GoodsFactory) {
    return {
        query: function () {
            return GoodsFactory.all();
        },
    };
});

3、在 app.js 文件引用 factory.js、services.js 文件

angular.module('starter', ['ionic', 'ngCordova', 'starter.directives','starter.factorys','starter.services', 'starter.customControllers'])

4、在controller中调用services

appControllers.controller("SecondHandGoodsCtrl", function ($scope, $state, $ionicModal, $cordovaToast,GoodsService) {
    /* 调用services.js数据 */
    $scope.categoryList = GoodsService.query();
})
5、html页面调用

<div class="row row-wrap">
    <ion-item class="col col-25" ng-repeat="item in categoryList">
        <ul>
            <li>
                <a href="#/housekeeping">
                    <dt><i class="{{item.icon}}"></i></dt>
                    <dd>{{item.title}}</dd>
                </a>
            </li>
        </ul>
    </ion-item>
</div>


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值