如何创建AnjularJS项目
在AngularJS中对异步操作是推崇至极的，所以$http的操作都是异步的不像jquery.ajax里还提供了async参数。
/* 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;
});
<!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;
});
如何创建AnjularJS项目的更多相关文章
- 创建maven项目（cmd 命令）
2016五月 22 原 创建maven项目(cmd 命令) 分类:maven (994) (0) 1.普通方式创建 1)进入cmd窗口执行 mvn archetype:generate 2) 光标停止 ...
- (八)Eclipse创建Maven项目运行mvn命令
1.Eclipse创建Maven项目 使用Eclipse创建一个Maven项目非常的简单,选择菜单项File>New>Other(也可以在项目结构空白处右击鼠标键),在弹出的对话框中选择M ...
- Jenkins创建Maven项目及SSH部署
前面我们已经安装了Jenkins的环境,以及配置好了jdk和maven.下面我们来看如何通过Jenkins将svn的项目进行打包和部署. 创建MAVEN项目 1.点击新建,输入项目名,选择" ...
- 终端指令操作创建Django项目
需求:通过Django创建一个用户表和权限表. 用户表包括:用户名,邮箱,密码,管理权限. 权限表包括:普通用户,管理用户,超级用户. 权限表和用户表有一对多的关系,即用户表中的每条数据对应权限表中的 ...
- VS自定义项目模板：[2]创建VSIX项目模板扩展
VS自定义项目模板:[2]创建VSIX项目模板扩展 听语音 | 浏览:1237 | 更新:2015-01-02 09:21 | 标签:软件开发 1 2 3 4 5 6 7 分步阅读 一键约师傅 百度师 ...
- 用Kotlin开发Android应用（II）：创建新项目
这是关于Kotlin的第二篇.各位高手发现问题,请继续“拍砖”. 原文标题:Kotlin for Android(II): Create a new project 原文链接:http://anton ...
- Java开发环境的搭建以及使用eclipse从头一步步创建java项目
一.java 开发环境的搭建 这里主要说的是在windows 环境下怎么配置环境. 1.首先安装JDK java的sdk简称JDK ,去其官方网站下载最近的JDK即可..http://www.orac ...
- Eclipse+Maven创建webapp项目<一>（转）
还在为jar下载而烦恼吗?还在为jar依赖关系而烦恼吗?还在为jar冲突而烦恼吗?强大的maven项目管理工具来拯救你们呢?自动下载jar,自动下载jar依赖包.你什么都不用做,只需要在中央仓库中co ...
- Eclipse+maven创建webapp项目<二>（转）
原文地址:http://www.cnblogs.com/candle806/p/3439469.html 1.开启eclipse,右键new-->other,如下图找到maven project ...
随机推荐
- MySQL索引，MySQL中索引的限制？
MySQL中索引的限制: 1.MyISAM存储引擎引键的长度综合不能超过1000字节: 2.BLOB和TEXT类型的列只能创建前缀索引: 3.MySQL目前不支持函数索引: 4.使用!= 或者< ...
- Camera setParameters(), getParameters(),unlock()三个方法之间的限制关系
Camera mCamera = Camera.open(); // 第一次调用getParameters()需要在unlock()方法之前否则出现错误 Camera.Parameters param ...
- [置顶]
kubernetes资源类型--DaemonSet
概念 DaemonSet能够让所有(或者特定)的节点运行同一个pod. 当节点加入到K8S集群中,pod会被(DaemonSet)调度到该节点上运行,当节点从K8S集群中被移除,被DaemonSet调 ...
- django模板解析 循环列表中 切片和求长度
{% for subrow in subdic.content|slice:":5" %} {% endfor %} {% if "{{subdic.content|le ...
- NYOJ 49 开心的小明(01背包问题)
时间限制:1000 ms | 内存限制:65535 KB 难度:4 描写叙述 小明今天非常开心.家里购置的新房就要领钥匙了,新房里有一间他自己专用的非常宽敞的房间.更让他高兴的是.妈妈昨天对他说: ...
- hdu 4512 吉哥系列故事——完美队形I（最长公共上升自序加强版）
首先要去学习最长公共上升子序列LCIS.然后是对n*n效率的算法进行优化,这里要注意的是能够求出来的序列中间能够有一个最高的.刚開始将输入的数组进行逆置,写下来发现这可能存在问题. 只是详细是什么也没 ...
- Spring中如何配置事务
学过SSH的都知道,整合了SSH之后,SSH的经典增删改查案例业务逻辑层的代码就十分简单.基本上都是一句话的事. public void addUser(Webuserlogin user) { // ...
- #include <>与#include""区别
<>先去系统目录中找头文件,如果没有在到当前目录下找.所以像标准的头文件 stdio.h.stdlib.h等用这个方法. 而""首先在当前目录下寻找,如果找不到,再到系 ...
- springMVC 前后台日期格式传值解决方式之一（共二） @DateTimeFormat的使用和配置
无意中发现对于时间字符串转Date类,根本不用自己去写转换类,spring mvc已经实现了该功能,还是基于注解的,轻松省事,使用 org.springframework.format.support ...
- sql server 类oracle vm_contact() 函数创建
CREATE FUNCTION dbo.fun_orgname(@id int)RETURNS varchar(8000)AS BEGIN DECLARE @str varchar(8000 ...