Angular controller调用services

前端之家收集整理的这篇文章主要介绍了Angular controller调用services前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、定义 factory.js 文件

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

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

  1. var appServices = angular.module('starter.services',[])
  2. appServices.service('GoodsService',function (GoodsFactory) {
  3. return {
  4. query: function () {
  5. return GoodsFactory.all();
  6. },};
  7. });

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

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

4、在controller中调用services

  1. appControllers.controller("SecondHandGoodsCtrl",function ($scope,$state,$ionicModal,$cordovaToast,GoodsService) {
  2. /* 调用services.js数据 */
  3. $scope.categoryList = GoodsService.query();
  4. })
5、html页面调用
  1. <div class="row row-wrap">
  2. <ion-item class="col col-25" ng-repeat="item in categoryList">
  3. <ul>
  4. <li>
  5. <a href="#/housekeeping">
  6. <dt><i class="{{item.icon}}"></i></dt>
  7. <dd>{{item.title}}</dd>
  8. </a>
  9. </li>
  10. </ul>
  11. </ion-item>
  12. </div>

猜你在找的Angularjs相关文章