第一步：命名空间
var applyAppModule=angular.module('apply-app' ,[]);
第二步：控制器 ng-controller="ApplyController"
applyAppModule.controller('ApplyController', function($scope,$http){
});
第三步：监听器 //ng-click="change($index)"
applyAppModule.controller('ApplyController', function($scope,$http){
$scope.change= function(index){
httpStatus($scope.items[index]);
}
});
第四步：过滤器 //ng-bind="item.status|status_filter"
applyAppModule.filter( "status_filter", function() {
var filterfun = function(code) {
var result = "";
........
return result;
};
return filterfun;
});
第五步：http请求
AngularJS 提供了一个类似jquery的$.ajax的对象，用于异步请求。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
如果你是POST请求，params里的数据会帮你拼到url后面，data里的数据会放到请求体中。
/* http start */ $http({ method : 'POST', url : "/MobileMedical/suser/applylist", //请求地址 data :$.param({ //携带数据 "offset":0, "limit":6 }), headers : { 'Content-Type' : 'application/x-www-form-urlencoded' } }).success( function(response) { if (response.rows != "") { $scope.items = response.rows; initPagination($scope, $http, response.total, LIMIT); } else { alert( '查询列表为空' ); } }); /* http end */
或者这种格式：
$http({ method : 'POST', params : { id:123}, data: { name:'john',age:27 }, url : "/mypath" }) .success(function(response, status, headers, config){ //do anything what you want; }) .error(function(response, status, headers, config){ //do anything what you want; });
实例：
（1）html部分 : index.html
<!DOCTYPE html> <html lang="en" ng-app="indexApp"> <head> <meta charset="UTF-8"> <title>首页</title> <!-- Bootstrap --> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="/stylesheets/base.css" rel="stylesheet" media="screen"> <link href="/stylesheets/style.css" rel="stylesheet" media="screen"> </head> <body ng-controller="indexCtrl"> <div class="container-fluid" style="margin-top: 60px;"> <div class="col-md-8 col-md-offset-2"> <div class="login-log"> <img src="/images/login-logo.png"> </div> <!--搜索框--> <div class="input-group col-md-12"> <input type="text" ng-init="search.keyword=''" ng-model="search.keyword" class="form-control" ng-keyup="onKeyup($event)" placeholder="请输入应用关键字" aria-describedby="basic-addon1"> <span class="input-group-addon bg-primary" ng-click="toSearch()" >搜索</span> </div> <!--loading--> <div class="row tc mt120 pa col-md-offset-5" id="loading"> <img src="/images/loading.gif" /> </div> <!--表格--> <div class="table-responsive"> <table class="table table-striped table-hover mt20" > <thead> <tr> <th>应用名称</th> <th>Android包名</th> <th>MD5签名</th> <th>IOS包名</th> <th>创建时间</th> </tr> </thead> <tbody> <tr ng-repeat="item in result.list" ng-click="seemore($index)"> <td ng-bind="item.appName"></td> <td ng-bind="item.package | text_filter"></td> <td ng-bind="item.signMD5 | text_filter"></td> <td ng-bind="item.bundleId | text_filter"></td> <td ng-bind="item.createTime | ms_filter"></td> </tr> </tbody> </table> </div> </div> </div> </body> <script src="/javascripts/lib/jquery.min.js" ></script> <script src="/javascripts/lib/jquery.cookie.js" ></script> <script src="/javascripts/lib/angular.min.js" ></script> <script src="/bootstrap/js/bootstrap.min.js" ></script> <script src="/javascripts/indexCtrl.js"></script> <script src="/javascripts/lib/pagination.js"></script> </html>
（2）javascript部分 : indexCtrl.js
//实例化命名空间 var app=angular.module('indexApp' ,['paginationAPP']); //取cookie中的用户信息 var userObj = $.cookie('userObj' ); //json字符串 var userObj = JSON.parse(userObj); //对象 app.controller('indexCtrl', function($scope,$http){ //将用户信息存入$scope中 $scope.userObj = userObj; // 初始化页面数据 init({ pId:userObj.cid }); // 监听搜索框 keyup事件 $scope.onKeyup = function(e){ var keycode = window.event?e.keyCode:e.which; if(keycode==13){ //重新请求 init({ pId:userObj.cid, search:$scope.search.keyword }); } } //监听搜索按钮的ng-click事件 $scope.toSearch=function(){ var search=$scope.search; var params={ pId:userObj.cid, search:search.keyword }; init(params); //重新请求 } //监听 ng-click事件，查看详情 $scope.seemore=function(index){ var obj=$scope.result.list[index]; //对象转成json字符串,存入cookie var appObj= JSON.stringify(obj); $.cookie( 'appObj' , appObj , { path : "/" }); window.location.href="/SocialManage/page/info"; } //初始化方法 function init(params){ $http({ method : 'GET', params :params, url : "/SocialManage/api/appInfo/getList" }) .success(function(response, status, headers, config){ $("#loading").hide(); console.log("back indexController ...."); console.log(response); $scope.result=response; $scope.paginationConf.totalItems=response.count; }) .error(function(response, status, headers, config){ }); } }); // 过滤器 app.filter( "user_img_filter", function() { //用户头像 过滤器 var filterfun = function(code) { if(!codem || code==""){ return "/images/logo.png"; }else{ return code; } }; return filterfun; }).filter("ms_filter", function() { //毫秒转时间 过滤器 var filterfun = function(code) { var result = new Date(parseInt(code)).toLocaleString(); return result; }; return filterfun; }).filter( "text_filter", function() { //文字长度 过滤器 var filterfun = function(code) { var result = code.length > 20 ? code.substr(0,20) :code; return result; }; return filterfun; });