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>