Spring 3 Part 10: Java Web development with AngularJS

Angular Basics

AngularJS is MVC based fronted framework. To make the things easier, I’ve use Atom editor with the the atom-html-preview plugin (Ctrl+Shift+H). Anytime you can invoke developer tools pressing by Alt+Command+i.

Using MVC

Here the most basic Angular+Bootstrap mvc example. In this example, there are three users listed in the ex1 and controller is FriendController which is used as friendList in the HTML.
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.css"/>
  <script type="text/javascript" src="angular-1.5.3/angular.js"></script>
  <script type="text/javascript" src="bootstrap-3.3.6-dist/js/bootstrap.js"></script>

  <script type="text/javascript">
    angular.module('ex1',[])
      .controller('FriendController', function(){
      var friendList = this;
      friendList.friends=[
        {name:'Ojitha', age:10},
        {name:'Jhon', age:20},
        {name:'Terry',age:30}
      ];
  });
  </script>

  <style type="text/css">
    .even {
      color: red;
    }
    .odd {
      color: blue;
    }∏
  </style>
</head>

<body ng-app="ex1">
  <div ng-controller="FriendController as friendList">
    <p><input type="text" ng-model="searchFor" size="30"/></p>
    <ul>
        <div class="panel panel-primary" ng-repeat="friend in friendList.friends | filter: searchFor"
        ng-class="{even:$even, odd:$odd}">
          <div class="panel-heading">{{friend.name}}</div>
          <ul>
              <li ng-repeat= "(k, v) in friend">
                <strong>{{k}}</strong> = {{v}}
              </li>
          </ul>
        </div>
    </ul>
  </div>
</body>
</html>

Forms

You can add a new friend to the friends as follows using HTML form tag.
    <form ng-submit="friendList.addFriend()">
      <input type="text" ng-model="friendList.name", size="30" placeholder="enter name here..."/>
      </br>
      <input type="int" ng-model="friendList.age" size="3"/>
      <br/>
      <input type="submit" value="add" class="btn-primary"/>
    </form>
There are two elements added to the controller: name and age. When submit the form, these elements should be added to the friends array in the javascript section:
friendList.addFriend = function(){
    friendList.friends.push({name:friendList.name, age:friendList.age});
      }

Ajax

In the above html, friendList.friends hardcoded domain model. Using Ajax, REST interface can be called to fetch friends details as follows:
    angular.module('ex1',[])
      .controller('FriendController', function($http){
      var friendList = this;
      $http.get('http://localhost:8080/mf/friends').success(function(data){
        friendList.friends = data;
      });
  });
The url specified in the get method send the GET request to the REST service and accept the JSON result.

REST service

I’ve used Spring REST to generate the REST service.
package au.com.blogspot.ojitha.managefriends.controller;

import au.com.blogspot.ojitha.managefriends.domain.Friend;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ojitha on 10/04/2016.
 */
@RestController
public class FriendsController {

    @RequestMapping(value = "/friends",method = RequestMethod.GET)
    public List<Friend> allFriends(){
        List<Friend> friends = new ArrayList<>();
        Friend f1 = new Friend();
        f1.setName("Ojitha");
        f1.setAge(40);
        friends.add(f1);

        Friend f2 = new Friend();
        f2.setName("Mark");
        f2.setAge(30);
        friends.add(f2);

        Friend f3 = new Friend();
        f3.setName("Tom");
        f3.setAge(24);
        friends.add(f3);

        return friends;
    }
}
Here the domain class
package au.com.blogspot.ojitha.managefriends.domain;

/**
 * Created by ojitha on 10/04/2016.
 */
public class Friend {
    private String name;
    private Integer age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}
It is important to note that, I’ve created spring boot application for the simplicity.

AngularJS Service layer

Of course this is not the backend service layer. However, presentation service layer support reusability and the extendability. For example, in the following complete source, Friends service has been created and injected to the controller. In addition to that, there service is singleton.
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>

    <script type="text/javascript">
        angular.module('ex1',[])
                .controller('FriendController', ['Friends', function(Friends){
                    var friendList = this;
                    Friends.load().success(function(data){
                        friendList.friends = data;
                    }).error(function(data, status, headers, config){
                        if (status === 404) {
                            window.alert('not found');
                        } else {
                            window.alert('Unknown error');
                        }
                    });
                }]);
    </script>

    <script type="text/javascript">
        angular.module('ex1')
                .factory('Friends', function($http){
                    var friendRequest = null;
                    return {
                        load: function(){
                            if (!friendRequest){
                                friendRequest = $http.get('/mf/friends');
                            }
                            return friendRequest;
                        }
                    };
                });
    </script>


    <style type="text/css">
        .even {
            color: red;
        }
        .odd {
            color: blue;
        }∏
    </style>
</head>

<body ng-app="ex1">
<div ng-controller="FriendController as friendList">
    <p><input type="text" ng-model="searchFor" size="30"/></p>
    <ul>
        <div class="panel panel-primary" ng-repeat="friend in friendList.friends | filter: searchFor"
             ng-class="{even:$even, odd:$odd}">
            <div class="panel-heading">{{friend.name}}</div>
            <ul>
                <li ng-repeat= "(k, v) in friend">
                    <strong>{{k}}</strong> = {{v}}
                </li>
            </ul>
        </div>
    </ul>
</div>
</body>
</html>
As shown in the above code, the two javascript script can be separately put in to the two JavaScript source files and evolve separately.

Packaging JS Libraries

In the above html code, angular, bootstrap and query libraries are loading from the well known CDNs. The advantage is if the other applications use the same CDN, then the these libraries are only once downloaded. However, if you need to provide your own files then follow the following procedure.
  1. The first thing to install is Homebrew, the reason is it is very easy to install as well as install the applications via that.
    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    First install the ruby and then install the Homebrew.
  2. Install node to use the npm package installer
   brew install node
Used the Homebrew to install the node.
  1. Now use the node to install bower:
    npm install bower
    I installed above bower package to use locally only, If you need system wide, then npm install -g bower is the command to use.
  2. Now use the bower to install all the required javascript libraries.
   bower install angular
   bower install angular-animate
   bower install angular-ui-bootstrap-bower
   bower install bootstrap
  1. After install what you want, check the installed versions and the dependencies.
    bower list
    if you want to remove any package, you can use bower uninstall <package> .
  2. Now change the HTML file to include the JS libraries:
   <script src="bower_components/angular/angular.js"></script>
   <script src="bower_components/angular-animate/angular-animate.js"></script>
   <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Test the HTML after replace. This code is available to download from the GitHub.

Comments

Post a Comment

commented your blog

Popular posts from this blog

How To: GitHub projects in Spring Tool Suite

Image
The first step is sign up in the GitHub and create a  new project. For example I’ve created a new project Spring3part7 in the GitHub. Before add the projects you need to configure STS for GitHub access. For example, you need to add configuration as shown in the following picture Git local repository also important Now you are ready to pull the project from the GitHub, in the STS import menu select the following Now type the project name and click the ‘Search’ as shown in the following. However, when you select the found project click ‘Finish’ nothing will change in the STS interface. Now you are going to create real project. Here I am going to create simple utility project. This template project need to be created inside the imported GitHub project You have to give the same project name of the GitHub project as shown in the following project Now your project is ready to push. Before that you need to add ignore flag to all the folders and files except pom...
Continue »

Spring 3 Part 7: Spring with Databases

Image
This is the 7 th part of the Spring 3 Series . Create MySQL 5.6 database ‘payroll’, CREATE DATABASE payroll; Next create a user for example, user ‘ojitha’ CREATE USER 'ojitha'@'localhost' IDENTIFIED BY 'ojitha'; Need to grant the ‘payroll’ access to user ‘ojitha’ as shown in the following. GRANT SELECT, INSERT, UPDATE, DELETE, CREATE, DROP ON payroll.* TO 'ojitha'@'localhost'; You can download freeware of TOAD for MySQL from here . Let create a first table, that contains all the states in Australia. You can create a table using visually using the icon given directly below the Tables tab in the Object Explorer as shown in the above diagram. CREATE TABLE payroll.STATE ( CODE CHAR(3) ASCII COMMENT 'State code', STATE VARCHAR(30), PRIMARY KEY (CODE) ) ENGINE = InnoDB COMMENT = 'Australian states' ROW_FORMAT = DEFAULT; In the my sql console you can the newly added table using the following command SHOW ...
Continue »

Parse the namespace based XML using Python

In this blog, I am considering how to parser and modify the xml file using python. For example, I need to parser the following xml 1 (slightly modified for this blog) and need to write the modified xml to out.xml file. Here the country.xml <?xml version="1.0"?> <actors xmlns:fictional="http://characters.example.com" xmlns="http://people.example.com"> <actor type='T1'> <name>John Cleese</name> <fictional:character>Lancelot</fictional:character> <fictional:character>Archie Leach</fictional:character> </actor> <actor type='T2'> <name>Eric Idle</name> <fictional:character>Sir Robin</fictional:character> <fictional:character>Gunther</fictional:character> <fictional:character>Commander Clement</fictional:character> </actor> </actors> In ...
Continue »