标签:
1.新建一个liferay plugin project 项目;
2.在新建liferay项目docroot目录下新建html目录,拷贝AngularJS项目app文件到html目录下;
3.修改view.jsp文件,增加document.getPortletUrl函数,用angular.bootstrap启动angularjs;
代码如下:
3.1 加载css文件方式:@import url();
3.2 加载JS文件方式不变:<script></script>
3.3 手动启动AngularJS:angular.element().ready(function(){
angular.bootstrap(document.getElementById(‘<portlet:namespace />main‘),[‘crmApp‘]); });
1 <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %> 2 3 <portlet:defineObjects /> 4 5 <style type="text/css" media="screen"> 6 @import url("/zqoa-manage-portlet/html/app/../bower_components/html5-boilerplate/css/normalize.css"); 7 </style> 8 9 <script> 10 document.getPortletUrl = function (url) { 11 return ‘/zqoa-manage-portlet/html/app‘+url; 12 }; 13 </script> 14 15 <div id="<portlet:namespace />main" ng-cloak> 16 <div ng-include="‘/zqoa-manage-portlet/html/app/view.html‘"></div> 17 </div> 18 19 <script src="/zqoa-manage-portlet/html/app/../bower_components/jquery/dist/jquery.js"></script> 20 21 <script> 22 angular.element(document).ready(function(){ 23 angular.bootstrap(document.getElementById(‘<portlet:namespace />main‘),[‘crmApp‘]); 24 }); 25 </script>
4.修改AngularJS代码中用到templateUrl的地方,将url用document.getPortletUrl()函数做转换,如:
templateUrl:document.getPortletUrl(‘‘);
5.修改AngularJS代码中用$resource的地方,用$http代替,因为liferay JSONWebservice的接口,一个接口只对应一个http方法,PUT/POST/DELETE/GET。
如下代码:
‘use strict‘;
angular.module(‘crmApp.contact.service‘, [‘ngResource‘])
.factory(‘Contacts‘, [‘$http‘,‘$q‘, function($http,$q){
return {
get: function(params) {
var delay = $q.defer();
$http({
method: ‘GET‘,
url: ‘/api/jsonws/zqoa-manage-portlet.contacts/get-contacts‘,
params: params
})
.success(function (data, status , headers, config) {
console.log("Contacts.get().....");
delay.resolve(data);
})
.error(function (data, status, headers, config) {
delay.reject({errmsg:‘abcd‘});
});
return delay.promise;
},
add: function(paramsContacts) {
$http.post("/api/jsonws/zqoa-manage-portlet.contacts/add-contacts",paramsContacts)
.success(function (data, status, headers, config) {
})
.error(function (data, status, headers, config) {
throw new Error("Something is wrong");
});
},
update: function(paramsContacts){
var delay = $q.defer();
$http({
method: ‘update‘,
url: ‘/api/jsonws/zqoa-manage-portlet.contacts/update-contacts‘,
params: paramsContacts
})
.success(function (data, status, headers, config) {
console.log("Contacts.update()..");
var dd = {data: data,status: status};
delay.resolve(dd);
})
.error(function (data, status, headers, config) {
delay.reject(status);
});
return delay.promise;
},
deleted: function(params) {
$http.deleted("/api/jsonws/zqoa-manage-portlet.contacts/delete-contacts",params)
.success(function (data, status, headers, config) {
})
.error(function (data, status, headers, config) {
throw new Error(‘Something is deleted wrong ‘);
});
},
findAll: function() {
$http.findAll("/api/jsonws/zqoa-manage-portlet.contacts/find-all")
.success(function (data, status, headers, config) {
console.log("findAll..");
})
.error(function (data, status, headers, config) {
throw new Error(‘Something is findAll wrong‘);
});
}
};
}]);
6.创建service.xml,build service,修改生成包中的代码,实现JSONWebservice接口。
标签:
原文地址:http://www.cnblogs.com/alan-doom/p/4044179.html