注：（1）环境搭建：
        （2）创建流程模型：

1.maven导包及spring的一些基本配置与创建流程模型时候的没有什么变化，依旧沿用就好;前端的首页也不用有太大变化，只需要把之后新创建的js引入进来即可。 2.acitivit流程定义有必要的24张表。   创建模型时相关的有act_re_model和act_ge_bytearray两个。   成功创建模型后可以看到model表中会有一条数据，同时在bytearray表中也会同时生成两条对应的数据。而model表中会存入这两条数据的id，从而产生关联。   因此流程模型列表查询时就需要在这两张表中进行操作。 3.模型属于资源文件，因此操作的时候用到repositoryService来调用相关的方法，activiti也提供了相关的方法createModelQuery以及ActivitiModel实体类。 4.结合上述，后台业务代码如下，为了便于前台获取数据，我自己也定义了model实体类，只取自己想要展示的数据：

/**	 * 模型列表	 * 	 * @author：tuzongxun	 * @Title: modelList	 * @param @return	 * @return Object	 * @date Mar 17, 2016 12:29:52 PM	 * @throws	 */	@RequestMapping(value = "/modelList.do", method = RequestMethod.POST, produces = "application/json;charset=utf-8")	@ResponseBody	public Object modelList(HttpServletRequest req) {		Map
    
      map = new HashMap
     
      ();		boolean isLogin = this.isLogin(req);		if (isLogin) {			List
      
        modelList = new ArrayList
       
        ();			try {				List
        
          modelList1 = repositoryService.createModelQuery()						.list();				if (modelList1 != null && modelList1.size() > 0) {					for (Model model : modelList1) {						ActivitiModel activitiModel = new ActivitiModel();						activitiModel.setId(model.getId());						activitiModel.setCreateTime(model.getCreateTime());						activitiModel.setDescription(model.getMetaInfo());						activitiModel.setKey(model.getKey());						activitiModel.setLastUpdateTime(model								.getLastUpdateTime());						activitiModel.setName(model.getName());						activitiModel.setVersion(model.getVersion());						modelList.add(activitiModel);					}				}				map.put("isLogin", "yes");				map.put("userName",						(String) req.getSession().getAttribute("userName"));				map.put("result", "success");				map.put("data", modelList);			} catch (Exception e) {				e.getStackTrace();			}		} else {			map.put("isLogin", "no");		}		return map;	}
        
       
      
     
    

 5.前台app.js加入代码:

$stateProvider      .state('modelList', {      url: "/modelList",      views: {         'view': {          templateUrl: 'activi_views/modelList.html',          controller: 'modelCtr'         }      }     });

6.前台创建新的控制层js(注意在首页index.html中导入这个js，我的首页是activiti.html)，modelCtr.js：

angular.module('activitiApp')  .controller('modelCtr', ['$rootScope','$scope','$http','$location', function($rootScope,$scope,$http,$location){  $scope.init=function(){        $http.post("./modelList.do").success(function(result) {        	if(result.isLogin==="yes"){        		$rootScope.userName=result.userName;        	    console.log(result.data);     	        $scope.modelList=result.data;        	}else{        		$location.path("/login");        	}        });}          $scope.deploye=function(model){        	console.log(model);        	$http.post("./deploye.do",model).success(function(deployResult){        		$location.path("/processList");        	});        }                $scope.update=function(modelId){        	window.open("http://localhost:8080/activitiTest1/service/editor?id="+modelId);        }        }])

7.modelList页面，modelList.html:

    
     
     
模型列表
     
         
      
             
        
                  
ID
                  
NAME
                  
KEY
                  
描 述
                  
版本
                  
创建时间
                  
修改时间
                  
操 作
              
              
                  
{ {model.id}}
                  
{ {model.name}}
                  
{ {model.key}}
                  
{ {model.metaInfo}}
                  
{ {model.version}}
                  
{ {model.createTime | date:"yyyy-MM-dd HH:mm:ss"}}
                  
{ {model.lastUpdateTime | date:"yyyy-MM-dd HH:mm:ss"}}
                  
部署  删除  修改 
              
          
      
     
      
    

8.页面展示效果如下：