Angular and Grails Integration Part-1

Posted on by

To integrate Grails framework with Angular JS Follow below steps

Step 1 – Create Grails Project

Step 2 – Delete some default folder like remove all folder from assets, delete main.gsp page and remove everything from index.gsp

Step 3 – You need angular.min.js and angular-ui-router.js file.

After download put js file under web-app/js and for angular create folder “angular” Add below code in index.gsp page

<!DOCTYPE html>
<html ng-app="angModule">
 <head>
  <script type="text/javascript" src="js/angular/angular.min.js"></script>
  <script type="text/javascript" src="js/angular/angular-ui-router.js"></script>
  <script type="text/javascript" src="js/angular/application.js"></script>
 </head>
 <body>
  <ui-view></ui-view>
 </body>
</html>

Step 4 – Create a js file under “angular” folder and put below code in application.js file

var app = angular.module("angModule", [ "ui.router" ]).config(
 function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise("/user");
  $stateProvider
   .state("user", {
    url : "/user",
    templateUrl : "html/user.html",
   })
 });

Step 5 – Create a HTML page under “web-app/html” user.html put some message like “Hello World”

To see live demo watch below video

Thanks for reading

1 thought on “Angular and Grails Integration Part-1”

  1. Pingback: Grails and AngularJS Integration Part 1 | Groovy & Grails | AngularJS | Almighty Java - Coding Videos

Leave a comment