How to Create a New Module in Grails with the help of AngularJs

Posted By : Kajal Singh | 31-Oct-2018

angularjs

Create a New Module with The Help Of AngularJs in Grails.

In this blog I am going to explain how to create dynamic email template using Groovy and AngularJs. Grails uses GSP (Grails server pages) pages to create email templates which have static content. But here we want to add dynamic contents where user will be able to create, edit, delete template accordingly. In this blog, I will create a dummy project to create dynamic template module through the Angularjs in grails.

Step1: Here this link will open a email template module.

<a href="#emailTemplateThemes/">Email Template</a>

Step2: Create a new JS file in Any Folder of the project.

Ex- emailTemplate.js

Step3. Go To the Main JavaScript page of the project where all the JavaScript files are declared. Here Declare Controller and Services as well.

(emailTemplate.js and emailService.js)

the syntax is:-
//=require Project name/JavaScriptFIle Name Path
Ex-//=require my-app/EmailTemplate.js

Step4: Import Controller and Service in App.js

Ex- app.module('my-app',['EmailTemplate.js']
then
my-app.Config
when('/emailTemplateThemes'
{
templateUrl: 'Modulename.Html Path'
controllers : 'ctroller Path'
});

Step5: Create Html Page for the module.

Ex- EmailTemplate.html

Step6: emailTemplate.js

var emailTemplate = angular.module('emailTemplate', ['ui.bootstrap']);
emailTemplate.controller('emailTemplate', [
'$scope',
'$http',
'$location',
'$rootScope',
'$modal',
'$routeParams',
'$controller',
'emailThemeService',
function($scope, $http, $location, $rootScope, $modal, $routeParams,
$controller, emailThemeService) {
 Methods.
}));

Step7: Create Service to get the data from the Database.

Ex-emailService.js and import in Main Js file.

* To crerate a dummy API's for crud operations:-

1. http://localhost:4200/api/addEmailTemplate.
2. http://localhost:4200/api/editEmailTemplate.
3. http://localhost:4200/api/deteleEmailTemplate.

Step8: Goto Service and define all the API's are as follow:-

The factory function creates a single object or function that represents the service to the rest of the application. This Service has to import in controllers.

angular.module('my-app').factory('emailService', [function() {
var variablename = ('email.json', {
}, {
addEmailTemplate : {
url : "api/addEmailTemplate",
method : "POST"
},

editEmailTemplate : {
url : "api/editEmailTemplate",
method : "POST"
},
deleteEmailTemplate : {
url : "api/deleteEmailTemplate",
params : {Id: "@Id"},
method : "DELETE"
}
});
return variablename;
}]);

Step9: In emailTmeplate.js

//Save Function (temp contains all the inputs which comes from the User)

$scope.saveTemplate = function(temp) {
emailService.addEmailTemplate(temp).$promise.then(function(
data) {
if (data.result == 'success') {
console.log("Add Template SuccessFully");
} else {
console.log("Error");
}
});
};

//Edit Function

$scope.editTemplate = function(temp) {
emailService.editEmailTemplate(temp).$promise.then(function(
data) {
if (data.result == 'success') {
console.log("Update Template SuccessFully");
} else {
console.log("Error");
}
});
};

//Delete Function

$scope.deleteTemplate = function(temp) {
emailService.deleteEmailTemplate({
id : id}).$promise.then(function(data) {
if (data.result == 'success') {
console.log("Delete Template SuccessFully");
} else {
console.log("Error");
}
});
};