angularJS不依赖于jquery,只要引入它的js就可以使用了。此教程适用于使用angularJS做增删改查不知如何入手的新手。
angularJS v1.4.6下载地址:http://download.csdn.net/detail/qq_33556185/9617586
接下来开始angularJS之旅:
ng-app初始化angularJS应用
ng-controller是控制器
ng-repeat是迭代器,类似于Java或者C#里的foreach
{{对象.属性}} 双大花括号是angular的表达式,用来输出数据
ng-if是条件判断
<div class="mt-20" ng-app="myApp" ng-controller="customersCtrl">
<table class="table table-border table-bordered table-bg table-hover table-sort">
<thead>
<tr class="text-c">
<th>名称</th>
<th>key</th>
<th>流程id</th>
<th>流程文件</th>
<th>流程图</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr class="text-c" ng-repeat="d in records">
<td>{{ d.name}}</td>
<td>{{ d.key }}</td>
<td>{{ d.id }}</td>
<td>{{ d.resourceName }}</td>
<td>{{ d.diagramResourceName }}</td>
<td>{{ d.state }}</td>
<td>
<p ng-if='d.state=="运行中"'>
<input type="button" value="挂起" ng-click="operation(d.id,'suspend')" href="javascript:;">
</p>
<p ng-if='d.state=="已挂起"'>
<input type="button" value="激活" ng-click="operation(d.id,'fire')" href="javascript:;">
</p>
</td>
</tr>
</tbody>
</table>
</div>
$http是angular的核心服务,用来发送http请求的(和jquery里的ajax用法功能一样),此服务发送参数会以json的形式发送,因此,springMVC里如果不设置接收参数为json,会接收不到参数。
使用@RequestBody注解到参数上即可。
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
//查询
$http.post("/activiti/user_process/findDefinitionProc")
.success(function (response) {
$scope.records = response.data;});
//提交表单(增、删、改)
$scope.operation = function (procId,type) {
$http.post("/activiti/user_process/activiteOrSuspend",{id:procId,operation:type})
.success(function (response) {
window.location.reload();
});
};
});