AngularJS 与liferay对接

浏览数：39 / 时间：2015年06月09日

AngularJS与liferay对接

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接口。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

AngularJS 与liferay对接