前言

AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护。下图是从网上找到的一张AngularJS核心组成部分的概念图:

1-150QH1255S48.jpg

基本使用

1、Modules&Controller

初始化示例,HTML定义如下

<div ng-app="myApp">
    <div ng-controller="myController" >
</div>
</div>

模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每个都有不同的职责。 AngularJS并没有传统意义上的实现MVC,而是更接近于MVVM(模型 - 视图 - 视图模型)。

控制器: 这些Javascript函数绑定到特定的范围。代码示例:

var app = angular.module("myApp", []);
app.controller("myController", ["$scope", "$http", function ($scope, $http) {
    //...自定义的方法均在此作用域内
}]);

2、Filters

过滤器是从一个数组的条目中选择一个子集,并返回一个新的数组。具体使用如下:

app.controller("myController", ["$scope", "$http", function ($scope, $http) {
    
}]).filter('subtring', function () {//过滤器:截取字符串,超过指定长度...
   return function (value, max, tail) {
    if (!value) return '';
     max = parseInt(max, 10);
     if (!max) return value;
     if (value.length <= max) return value;
     value = value.substr(0, max);
     return value + (tail || '...');
   }
}).filter('to_trusted', ['$sce', function ($sce) {//多个过滤器,如输出HTML
     return function (text) {
        return $sce.trustAsHtml(text);
}}]);

3、自定义方法

app.controller("myController", ["$scope", "$http", function ($scope, $http) {
  $scope.PageSize = 5;//定义全局变量
  $scope.CurrentPage = 1;
  $scope.init = function () {
    $http({
       method: 'get',
       url: 'handler.ashx?action=getdata',
       params: {
          param1: ""
       }
      }).success(function (res) {
    });
  }
  $scope.init();//页面加载后即调用init方法
}])

项目实例-分页

html部分

<div class="paginglist">
 <ul class="pagination" id="pagination">
   <li ng-click="prePage()"><</li>
   <li ng-repeat="page in pagelist" ng-click="gotoPage(page)" ng-class="{active: isActive(page)}">{{page}}</li>
   <li ng-click="nextPage()">></li>
 </ul>
</div>

Angular部分

$scope.loadData = function (page) {
  $http({
     method: 'get',
     url: 'handler.ashx?action=getlist',
     params: {
        //....
     }
 }).success(function (res) {
  var pageCount = res.split("$#$")[1];//数据格式:data$#$pageCount
  $scope.TotalCount = pageCount;
  $scope.pagelist = Math.ceil(pageCount / 5); //分页数
  $scope.newPages = $scope.pages > 5 ? 5 : $scope.pages;
  $scope.pages = [];
  for (var i = 0; i < $scope.newPages; i++) {
     $scope.pagelist.push(i + 1);
  }
  $scope.datalist = JSON.parse(res.split("$#$")[0]);
 });
};
$scope.gotoPage = function (page) {//页码跳转
   $scope.CurrentPage = page;
   if (page < 1 || page > $scope.pages) return;
   if (page > 2) {
      var newpageList = [];
      for (var i = (page - 3) ; i < ((page + 2) > $scope.pages ? $scope.pages : (page + 2)) ; i++) {
          newpageList.push(i + 1);
      }
      $scope.pagelist = newpageList;
   }
   $scope.isActive(page);
   $http({
      method: 'get',
      url: 'handler.ashx?action=getlist',
      params: {
         pageindex: page,
         pagesize: $scope.PageSize,
         //...
      }
   }).success(function (res) {
      $scope.datalist = JSON.parse(res.split("$#$")[0]);
   });
};
$scope.isActive = function (page) {//设置当前页码的样式
   return $scope.CurrentPage == page;
};
$scope.prePage = function () {//上一页
   if ($scope.CurrentPage - 1 < 1) return;
   $scope.gotoPage($scope.CurrentPage - 1);
};
$scope.nextPage = function () {//下一页
   if ($scope.CurrentPage + 1 > $scope.pages) return;
   $scope.gotoPage($scope.CurrentPage + 1);
};

ng-class中的active为样式类名,样式如下:

.active {
    background-color: #1b72e2;
    color: #fff !important;
}

具体效果如下:

GIF.gif

小结

笔者对angular.js还处于初学者阶段,项目中也有在实际使用,虽然依葫芦画瓢也基本能完成功能开发,但对于angular.js的深入理解还需要不断的学习。。

作者: 一蓑烟雨

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类: Angular.Js
posted 阅读(34 ) 评论(0 )

评论内容: