JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy

AngularJS : ng-maxlength and ng-minlength Directives

June 25, 2016 by Java-Beat Leave a Comment

What is ng-maxlength Directive?

The ng-maxlength directive allows us to set the maximum length for an input field i.e it adds the restriction for an input field. The ng-maxlength directive does not prevent the users from entering more than the restricted number of characters. When the maximum length is enforced for a field, the angularjs will count how many characters are left.

ng-maxlength Syntax

The ng-maxlength directive has the following syntax:

[code lang=”xml”]
<input type= "text" ng-maxlength="number"></input>
[/code]

Where:
“number” can be any number which represents the maximum number of characters for an input field.

ng-maxlength Example

The below example demonstrates the use of ng-maxlength directive in the AngularJS:
ng-maxlength.html

[code lang=”xml”]
<!DOCTYPE html>
<html>
<head>
<title>AngularJs ng-maxlength Directive</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">

<form name="myForm">

Enter the text in the below field:

<input name="myInput" ng-model="maxlength" ng-maxlength="5">

<h1 ng-if="!myForm.myInput.$valid">The entered value is too long.</h1>

</form>

This example displays error if the entered text is more than 5 characters.

</body>
</html>
[/code]

  • In the above example, ng-app defines that the application is angularjs.
  • The ng-maxlength directive of angularjs adds the validator “maxlength” to ng-model.
  • In the example, the maximum length is set to 5 i.e up to 5 characters will be entered in the input field.
  • If the entered value is more than 5 characters, it will display an error as the entered value is too long.

Running Example Application using ng-maxlength

Let’s save the above code in an HTML file as ng-maxlength.html in the server root folder and open this HTML file in a standard browser as http://localhost/ng-maxlength.html and you will get the output as displayed below:

ng-maxlength
Figure: ng-maxlength

In the above figure, the entered input is 5 characters as per the restricted maximum length value.

ng-max_length
Figure: ng-maxlength

In the above figure, if we enter the input more than the restricted value it will display an error as shown.

What is ng-minlength Directive?

The ng-minlength directive sets the minimum length for an input field i.e it adds the restriction for an input field. The ng-minlength directive does not prevent the users from entering less than the restricted number of characters. When the minimum length is enforced for a field, the angularjs will count how many characters are left.

ng-init Syntax

The ng-minlength directive has the following syntax:

[code lang=”xml”]
<input ng-minlength="number"></input>
[/code]

Where:
“number” can be any number which represents the minimum number of characters for an input field.

ng-minlength Example

The below example demonstrates the use of ng-minlength directive in the AngularJS:
ng-minlength.html

[code lang=”xml”]
<!DOCTYPE html>
<html>
<head>
<title>AngularJs ng-minlength Directive</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="">

<form name="myForm">

Enter the text in the below field:

<input name="myInput" ng-model="minlength" ng-minlength="5">

<h1 ng-if="!myForm.myInput.$valid">The entered value is too short.</h1>

</form>

This example displays error if the entered text is less than 5 characters

</body>
</html>
[/code]

  • In the above example, the ng-app defines that the application is angularjs.
  • The ng-minlength directive of angularjs adds the validator “minlength” to ng-model.
  • In the example, the minimum length is set to 5 i.e at least 5 characters should be entered in the input field.
  • If the entered value is less than 5 characters, it will display an error as the entered value is too short.

Running Example Application using ng-minlength

Let’s save the above code in an HTML file as ng-minlength.html in the server root folder and open this HTML file in a standard browser as http://localhost/ng-minlength.html and you will get the output as displayed below:

ng-min_length
Figure: ng-minlength

In the above figure, the entered input is 5 characters as per the restricted maximum length value.

ng-minlength

Figure: ng-minlength

In the above figure, if we enter the input less than the restricted value it will display an error as shown.

Filed Under: AngularJS Tagged With: AngularJS, AngularJS Tutorial, ng-maxlength, ng-minlength

Spring Data REST + GemFire + AngularJS Integration

May 29, 2014 by Amr Mohammed Leave a Comment

This tutorial explains the integration between Spring Data REST, GemFire and AngularJS frameworks. We are going to develop a REST service which returns the JSON response and that will be accessed by the AngularJS web page.

1. Tools Required

We’ve developed this tutorial by using the following tools:

  • JDK 1.6.
  • Tomcat 7.
  • Maven 3.
  • GemFire 7.0.1.
  • AngularJS

2. Project Structure

Here is the project structure used for this tutorial.

Spring REST - GemFire - Eclipse Project Directory

3. Business Domain

Message is the persistence object used for storing the data in GemFire’s in-memory storage. We are using only this entity for this tutorial. If you look at the below code, the entity imports the org.springframework.data.gemfire.mapping.Region which is equivalent to the table in the relational database. This Region class used as the segment in in-memory and allocate the storage for the data.

Message.java

[code lang=”java”]
package net.javabeat.springdata.data;

import org.springframework.data.annotation.Id;
import org.springframework.data.annotation.PersistenceConstructor;
import org.springframework.data.gemfire.mapping.Region;

@Region("messages")
public class Message {
@Id
private String messageId;
private String message;

public Message() {
}

@PersistenceConstructor
public Message(String id, String message) {
this.messageId = id;
this.message = message;
}

public String getMessageId() {
return messageId;
}

public void setMessageId(String messageId) {
this.messageId = messageId;
}

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}
}
[/code]

4. Spring Data Repository

It’s the repositories that enable the CRUD operations against the business domain. In our previous tutorial I have explained the Spring Data and how the repositories used for the CRUD operations.

MessageReposirory.java

[code lang=”java”]
package net.javabeat.springdata.repo;

import net.javabeat.springdata.data.Message;

import org.springframework.data.repository.CrudRepository;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;

@RepositoryRestResource(collectionResourceRel="messages",path="messages")
public interface MessageRepository extends CrudRepository<Message,Integer> {}
[/code]

5. Spring Bean

It’s a normal spring bean that used for filling a dummy data inside the GemFire platform.

GemFireBean.java

[code lang=”java”]
package net.javabeat.springdata.bean;

import net.javabeat.springdata.data.Message;
import net.javabeat.springdata.repo.MessageRepository;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Component
public class GemFireBean {

MessageRepository messageRepository;

public GemFireBean(){

}

public MessageRepository getMessageRepository() {
return messageRepository;
}

@Autowired
public void setMessageRepository(MessageRepository messageRepository) {
// Message repository has been set
this.messageRepository = messageRepository;

// Add some messages into GemFire for being seen
Message message = new Message();
message.setMessageId("1");
message.setMessage("Hello JavaBeat !");

messageRepository.save(message);

// Add
message = new Message();
message.setMessageId("2");
message.setMessage("Hello GemFire REST");
messageRepository.save(message);
System.out.println("Messages are filled");
}
}
[/code]

6. Spring Context Configurations

It’s the Spring XML configuration file, in which the spring beans, repositories and GemFire cache are defined.

SpringContext.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
xmlns:gfe-data="http://www.springframework.org/schema/data/gemfire"
xmlns:gfe="http://www.springframework.org/schema/gemfire"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/data/gemfire http://www.springframework.org/schema/data/gemfire/spring-data-gemfire.xsd http://www.springframework.org/schema/gemfire http://www.springframework.org/schema/gemfire/spring-gemfire.xsd">
<!– Search for spring components –>
<context:component-scan base-package="net.javabeat"></context:component-scan>
<!– Declare GemFire Cache –>
<gfe:cache/>
<!– Local region for being used by the Message –>
<gfe:local-region id="messages" value-constraint="net.javabeat.springdata.data.Message"/>
<!– Search for GemFire repositories –>
<gfe-data:repositories base-package="net.javabeat.springdata.repo"/>
</beans>
[/code]

7. Maven Build

It’s the pom file that containing the needed libraries.

pom.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>net.javabeat.springdata</groupId>
<artifactId>SpringData-GemFire-REST</artifactId>
<version>1.0</version>
<packaging>war</packaging>

<name>Spring Data</name>

<dependencies>
<!– Spring Data GemFire Library –>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-gemfire</artifactId>
<version>1.3.4.RELEASE</version>
</dependency>
<!– GemFire Platform –>
<dependency>
<groupId>com.gemstone.gemfire</groupId>
<artifactId>gemfire</artifactId>
<version>7.0.1</version>
</dependency>
<!– Spring Data REST MVC –>
<dependency>
<groupId>org.springframework.data</groupId>
<artifactId>spring-data-rest-webmvc</artifactId>
<version>2.0.2.RELEASE</version>
</dependency>
<!– Google List API –>
<dependency>
<groupId>com.google.collections</groupId>
<artifactId>google-collections</artifactId>
<version>1.0</version>
</dependency>
<!– Required Libraries –>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-rest</artifactId>
<version>1.0.2.RELEASE</version>
</dependency>
<dependency>
<groupId>javax.validation</groupId>
<artifactId>validation-api</artifactId>
<version>1.1.0.Final</version>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-validator</artifactId>
<version>5.0.1.Final</version>
</dependency>

</dependencies>

<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>2.3.2</version>
</plugin>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>

<repositories>
<repository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>http://repo.spring.io/libs-snapshot</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</repository>
<repository>
<id>gemstone</id>
<url>http://dist.gemstone.com.s3.amazonaws.com/maven/release/</url>
</repository>
</repositories>

<pluginRepositories>
<pluginRepository>
<id>spring-snapshots</id>
<name>Spring Snapshots</name>
<url>http://repo.spring.io/libs-snapshot</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
</pluginRepository>
</pluginRepositories>
</project>
[/code]

8. Web Deployment Descriptor

It’s the web descriptor that used for application configuration against the JavaEE container. One important thing you need to care about it is the servlet of the Spring MVC REST that handle the requests that asked for GemFire repositories.

web.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" metadata-complete="true" version="2.5">
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring-config/SpringContext.xml</param-value>
</context-param>
<servlet>
<servlet-name>rest</servlet-name>
<servlet-class>org.springframework.data.rest.webmvc.RepositoryRestDispatcherServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>rest</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
</web-app>
[/code]

RepositoryRestDispatcherServlet is a spring mvc resource that works in conjunction with the Spring Data REST for exposing the REST resources. In the above section you have seen how to expose REST resources using the Spring Boot, in that you’ve used @import to import the RepositoryRestMvcConfiguration. If you’re going to use the Spring old fashion configuration XML file for exposing the Spring Data REST, you should use the RepositoryRestDispatcherServlet with its mapping as you’ve noted above for exporting the resources.

9. Expose GemFire Repositories Directly

This section explains how to access the REST services using the Google Dev HTTP. Just follow the below steps:

  • From chrome browser open the Dev HTTP Client.
  • Type your host followed by the port number followed with the web context for the deployed application which should results in the URL http://localhost:8080/SpringData-GemFire-REST-1.0.
  • For consuming the message resources, you have to add the RepositoryRestDispactherServlet mapping URL which mentioned in the web.xml and it’s /rest/ which results in URL value like http://localhost:8080/SpringData-GemFire-REST-AngularJS-1.0./rest/
  • Add the The path segment under which this resource is to be exported. that value was provided using the path property at the header of the MessageRepository in order to be exposing the messages resource like below.

Spring Data REST AngularJS Demo

As you’ve noted the messages resources prefixed with the rest word that mapped to the RepositoryRestDispatcherServlet.

10. Accessing GemFire REST Using AngularJS

AngularJS is a JavaScript Framework for building the web application most suited to mobile devices and responsi. It is fully extensible and works well with other libraries. For including the AngularJS library into your page, a JavaScript library url https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js should be added inside a script tag. This is Content Deliver Network (CDN) approach for using the AngularJS without downloading the libraries. This can be most suitable only for the development application, for the production you have to download the libraries.

In the below example, the AngualrJS library is imported into the header of the page for being used in the REST resources consumption.

index.html

[code lang=”xml”]
<html ng-app>
<head>
<title>JavaBeat Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="messages.js"></script>
</head>
<body>
<div style="width:50%">
<h2>JavaBeat Tutorial</h2>
<h2>GemFire + REST + AngularJS</h2>
<div ng-controller="fetch">
<h2>full json response:</h2>
<p>{{messages}}</p>
<h2>Messages:</h2>
<ul ng-repeat="message in messages">
<p>Message:</p>
<p>{{message.message}}</p>
<a href='{{message["_links"]["self"]["href"]}}’>Go To Page Addressed Message : {{message._links.self.href}}</a>
</ul>
</div>
</div>
</body>
</html>
[/code]

messages.js

[code lang=”java”]
function fetch($scope, $http) {
$http.get(‘http://localhost:8080//SpringData-GemFire-REST-1.0/rest/messages’).
success(function(data) {
$scope.messages = data["_embedded"]["messages"];
});
}
[/code]

11. Spring Data REST – GemFire – AngularJS Demo

Spring REST GemFire AngularJS Demo

11.Summary

GemFire is a platform for the in-memory persistent store, it’s mainly used for caching. This tutorial generated a war file has been deployed against Tomcat 7 and the GemFire repositories are accessed and their data is retrieved through an HTTP REST using the AngularJS.

AngularJS is a famous JavaScript framework that has the capability of reading, parsing and converting the parsed JSON response into object-based form. Parsed objects gets navigated using the dot operator as the example get involved. AngularJS can be integrated with the Spring Data REST. In this tutorial, you’ve developed a Spring Data REST application that get connected with the GemFire platform and the AngularJS is used in the presentation for displaying the messages that fetched.

Download Source Code

[wpdm_file id=106]

Filed Under: Spring Framework Tagged With: AngularJS, GemFire, Spring Data REST

Spring MVC + AngularJS Integration

May 10, 2014 by Krishna Srinivasan Leave a Comment

Build Your REST API with Spring - VIDEO Courses

This tutorial illustrates how to use or integrate the Spring MVC and AngularJS together. AngularJS is popular JS framework for building the single page web applications. Also most of the mobile applications and rich user interfaces are using the AngularJS framework. Here we will show how to use this framework in the view layer and access the Spring MVC controller to display the data. AngularJS framework is created and maintained by Google.

If you have any queries, please write it in the comments section or post it in our facebook page.

In this Spring MVC and AngularJS example, data returned from server is in the type of JSON, that will be assigned to the AngularJS object and will display to the user. Lets look at the example.

also read:

  • Spring Tutorials
  • Introduction to Spring MVC
  • Spring and Hibernate Integration

1. Spring MVC Controller

SpringContentController.java

[code lang=”java”]
package javabeat.net.spring.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.ResponseStatus;

@Controller
public class SpringContentController {
@Autowired UserDetails userDetails;
@RequestMapping(value="/springcontent",
method=RequestMethod.GET,produces={"application/xml", "application/json"})
@ResponseStatus(HttpStatus.OK)
public @ResponseBody
UserDetails getUser() {
UserDetails userDetails = new UserDetails();
userDetails.setUserName("Praveen");
userDetails.setEmailId("praveen@gmail.com");
return userDetails;
}
}
[/code]

2. Java Bean

UserDetails.java

[code lang=”java”]
package javabeat.net.spring.controller;

import javax.xml.bind.annotation.XmlAttribute;
import javax.xml.bind.annotation.XmlRootElement;

@XmlRootElement
public class UserDetails {
private String userName;
private String emailId;

@XmlAttribute
public String getUserName() {
return userName;
}

public void setUserName(String userName) {
this.userName = userName;
}

@XmlAttribute
public String getEmailId() {
return emailId;
}

public void setEmailId(String emailId) {
this.emailId = emailId;
}
}
[/code]

3. Spring Configurations

spring-dispatcher-servlet.xml

[code lang=”xml”]
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="javabeat.net.spring.controller" />
<bean id="userDetails" class="javabeat.net.spring.controller.UserDetails"/>
<mvc:annotation-driven content-negotiation-manager="contentManager"/>
<bean id="contentManager"
class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<property name="favorPathExtension" value="true"/>
<property name="ignoreAcceptHeader" value="true" />
<property name="defaultContentType" value="text/html" />
<property name="useJaf" value="false"/>
<property name="mediaTypes">
<map>
<entry key="html" value="text/html" />
<entry key="json" value="application/json" />
<entry key="xml" value="application/xml" />
</map>
</property>
</bean>
<bean id="jspViewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
[/code]

4. AngularJS View

This is very simple use of the AngularJS framework. The function “Hello” can be added to the JS controler which is best practice. However, for the simplicity we have used inside the JSP page.

angular.jsp

[code lang=”xml”]
<!doctype html>
<html ng-app>
<head>
<title>Spring MVC + AngularJS Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
function Hello($scope, $http) {
$http.get(‘http://localhost:8080/SpringExamples/springcontent.json’).
success(function(data) {
$scope.user = data;
});
}
</script>
</head>
<body>
<div ng-controller="Hello">
<h2>Spring MVC + AngularJS Demo</h2>
<p>EMail Id : {{user.emailId}}</p>
<p>User Name : {{user.userName}}</p>
</div>
</body>
</html>
[/code]

5. Spring MVC + AngularJS Example

If you run the above example code, you would get the below screen.

Spring MVC and AngularJS Integration Example

[wpdm_file id=91]

Filed Under: Spring Framework Tagged With: AngularJS, Spring Integration

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved