Write a ToDo application in 2 minutes with Angular2Boot

Arnaud Tournier, le 21-04-2016

Write a ToDo application in 2 minutes with Angular2Boot

How to do a To do ?

Here is a very brief introduction on how to build a very quick Todo list application. It is written using Angular2Boot so the code is in Java.

If you want more details, check http://lteconsulting.fr/angular2boot/.

First open a terminal an type :

	mvn archetype:generate \
		-DarchetypeGroupId=fr.lteconsulting \
		-DarchetypeArtifactId=angular2-gwt.archetype \
		-DarchetypeVersion=1.2-SNAPSHOT

	cd todo-list
	
	mvn clean install

All the code we write is in the client package.

Create a TodoItem class to hold a todo item description :

	@JsType
	public class TodoItem
	{
		public String description;

		public TodoItem( String description )
		{
			this.description = description;
		}
	}

Update the ApplicationComponent class :

	@Component(
		selector = "my-app",
		templateUrl = "application.component.html" )
	@JsType
	public class ApplicationComponent
	{
		public JsArray<TodoItem> items = JsArray.of();

		public void remove( TodoItem item )
		{
			for( int i = 0; i < items.length(); i++ )
			{
				if( items.get( i ) == item )
				{
					items.splice( i, 1 );
					return;
				}
			}
		}

		public void add( String description )
		{
			items.push( new TodoItem( description ) );
		}
	}

Create the application.component.html file :

	<div *ngFor='let item of items'>
		
		<button (click)='remove(item)'>remove</button>
	</div>
	<input #description type='text'>
	<button (click)='add(description.value)'>add</button>

Enough coding, let’s now build and run this application

	mvn clean install
	
	mvn spring-boot:run

And now you can visit http://locahost:8080/.

If you want more details, check http://lteconsulting.fr/angular2boot/.


Arnaud Tournier, le 21-04-2016