AngularJS 与liferay对接

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']); });

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />

<style type="text/css" media="screen">
    @import url("/zqoa-manage-portlet/html/app/../bower_components/html5-boilerplate/css/normalize.css");
</style>

<script>
    document.getPortletUrl = function (url) {
        return '/zqoa-manage-portlet/html/app'+url;    
    };
</script>

<div id="<portlet:namespace />main" ng-cloak>
    <div ng-include="'/zqoa-manage-portlet/html/app/view.html'"></div>
</div>

<script src="/zqoa-manage-portlet/html/app/../bower_components/jquery/dist/jquery.js"></script>

<script>
    angular.element(document).ready(function(){
        angular.bootstrap(document.getElementById('<portlet:namespace />main'),['crmApp']);
    });
</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接口。