angularJS-----控制器

最新推荐文章于 2025-05-31 14:03:23 发布

i假行僧

最新推荐文章于 2025-05-31 14:03:23 发布

阅读量509

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： angularjs

本文链接：https://blog.youkuaiyun.com/loW_kEy_ACM/article/details/52021361

JS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍使用Ionic框架结合AngularJS进行Web APP开发的经验分享，包括控制器的理解与运用、路由配置及数据加载等关键技术点。

刚接触H5一个周，使用ionic+angularJS配合做webAPP和原生混合开发。可能以前着重点在iOS原生和C++方面，当初次接触前端技术，略微有点不适应。今天在做从网络获取数据展示到网页。第一次接触到控制器是在iOS原生上，而angularJS上的控制器比较抽象，搞了两天算是大体上会用，并没有完全理解。

angular.module('controllers',[])

首先是在module里面配置控制器，或者叫定义控制器。

angular.module('routes', []).config(function ($stateProvider, $urlRouterProvider) {

  $stateProvider.state('list', {
    url: '/list',
    views: {
      'main': {
        templateUrl: 'templates/list.html',
        controller: 'ListController'
      }
    }
  })
    .state('tab', {
      url: "/tab",
      abstract: true,
      views:{
        'main':{
          templateUrl: "templates/tabs.html",
          controller: "TabsController"
        }
      }
    })

<pre style="font-family: Menlo; font-size: 9pt; background-color: rgb(255, 255, 255);">最后加一局默认跳转，就是在路由里面找不到跳转的时候，默认跳转到这个页面。

$urlRouterProvider.otherwise('/list')
//  默认跳转

下面是做了左划右划的操作，用于切换tab页。

.controller('TabsController',function ($scope,$ionicTabsDelegate) {
  $scope.onSwipeLift=function () {
    if($ionicTabsDelegate.selectedIndex()!=4){
      $ionicTabsDelegate.select($ionicTabsDelegate.selectedIndex()+1);
    }
  }
  $scope.onSwipeRight=function () {
    if($ionicTabsDelegate.selectedIndex()!=0){
      $ionicTabsDelegate.select($ionicTabsDelegate.selectedIndex()-1);
    }
  }
})

这里的控制器是个抽象概念，我理解的是，控制器是一个包含页面中所有数据的一个抽象作用域，而$scope是在作用域里面数据和对数据的操作的总和。

.controller('PovertyFamilyListController', function ($scope, PovertyFamily,apiAddress) {
    var currentIndex=0;//默认第一页
    $scope.poorAdmassList=[];//群众数组
    $scope.apiAddress=apiAddress;
    //$scope.aasaaaa = apiAddress;
    //上拉刷新
    $scope.doRefresh = function () {
      currentIndex=1;
      PovertyFamily.povertyFamilyList(1, 10).success(function (response) {
        $scope.poorAdmassList=response.datas;
      })
        .finally(function () {
          $scope.$broadcast('scroll.refreshComplete');
        })
    }
    //下拉无限滚动
    $scope.loadMore = function() {
      currentIndex++;
      PovertyFamily.povertyFamilyList(currentIndex,10).success(function(response){
        $scope.poorAdmassList=$scope.poorAdmassList.concat(response.datas);
        $scope.$broadcast('scroll.infiniteScrollComplete');
      })
    };
  })

这段代码是在控制器里面做操作，赋值，加载数据等等。原来angularJS是种弱语言，可以赋值的同时定义变量或者方法。比如$scope.apiAddress=apiAddress;

apiaddress在$scope里面是没有这个属性的，但是在赋值的同时，定义了这个属性。还有就是赋值的类型，并不区分整型浮点型字符串。

在某个页面的控制器里获取到数据，并且赋值，就可以在该页面上展示数据，比如。

.controller('PersonalInfoController',function ($scope,$stateParams,PovertyFamily,poorAdmassId,apiAddress) {
    poorAdmassId=$stateParams.id;
    PovertyFamily.povertyFamilyPersonalData(poorAdmassId).success(function (response) {
      $scope.personalInfo=response.data;
      //$scope.aasaaaa = apiAddress;
    })
})

上面代码是获取到数据，并把网络获取的数据赋值给页面上的personalinfo。这样在页面上就可以展示数据。

<h2>{{personalInfo.householderName}}(户主) <span class="list-span-sex-age-right">{{personalInfo.gender}} {{personalInfo.age}}岁 {{personalInfo.nationality}}</span></h2>
          <p style="padding: 5px 0">浏览{{personalInfo.pV}}次 捐助总额{{personalInfo.salvationMoney}}元 被救助{{personalInfo.salvationCount}}次</p>