Walkthrough Instructions

Scala SALAD

TOC

---

Angular2 sample applications:

https://github.com/cghislai/comptoir

https://github.com/gastrodia/wasp-ui-editor

https://github.com/Ao21/ux-membership

https://github.com/feblr/frontend

---

!! Upgrade instructions for tsc, vscode

Scala SALAD

Slick

Argonaut

Lift

Angular

Derby DB

[Symbolic link to SALAD project directory]

ln -s ~/YL/SALAD ~/SALAD

create ~/SALAD/_downloads directory

add

export SALAD_HOME=~/SALAD

java -jar $JETTY_HOME/start.jar --module=http jetty.http.port=8080

---

github repository

?. cd scala-salad

git init

make .ignore

Install Jetty

Download .zip v.9 from http://download.eclipse.org/jetty/

unzip into $SALAD_HOME

export JETTY_HOME=$SALAD_HOME/jetty-distribution-9.3.3.v20150827

---

Install Derby DB

Download 10.11.1.1 from http://db.apache.org/derby/releases/release-10.11.1.1.cgi

unzip _downloads/db-derby-10.11.1.1-bin.zip into ~/SALAD

? make DERBY_HOME and add bin to the PATH

while in derby home directory:

export DERBY_HOME=pwd

PATH=$PATH:$DERBY_HOME/bin

?. Start in server mode with default port 1527

mkdir db-derby-home

export DERBY_OPTS=-Dderby.system.home=$SALAD_HOME/db-derby-home

startNetworkServer

? Test the installation using ij

connect 'jdbc:derby://localhost:1527/test-db;create=true';

connect 'jdbc:derby://localhost:1527/test-db';

select * from sys.systables

create table users ( id int primary key,

name varchar(20),

age int,

position varchar(15)) ;

insert into users values (1, 'Jones', 25, 'Developer');

insert into users values (2, 'Watson', 27, 'Manager');

Alter Table Column

describe users;

rename column users.position to role;

=change id to auto_increment:

alter table users add id int primary key auto_increment;

? project sbt file

Slick and Derby

?. SlickDerby.scala

Argonaut

? Add dependency

"io.argonaut" && "argonaut" % "6.0.4"

Lift and Jetty

? project/plugins.sbt

addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "2.5.0")

addSbtPlugin("com.earldouglas" % "xsbt-web-plugin" % "1.1.0")

?. Dependencies

"com.typesafe.scala-logging" %% "scala-logging" % "3.1.0",

libraryDependencies ++= {

val liftVersion = "2.6-RC1"

Seq(

	"net.liftweb" %% "lift-webkit" % liftVersion % "compile",

	"net.liftweb" %% "lift-json" % liftVersion % "compile"

)

}

jetty()

?. lift setup

? new folders

src/main/webapp/WEB-INF

? web.xml

? new package

bootstrap.liftweb

? new lift Boot class

Boot.scala

?

salad.intro.server.LiftRest.scala

? to generate .war file

sbt package

? to run jetty container

sbt container:start

to reload automatically when files change

~; container:start; container:reload /

Angular2. Simple salad-users Application

Angular2, TypeScript

npm, tsd, VSCode,

Setting up dev enviroment

? go to src/main/webapp folder

? tsd init

writes tsd.json, typings/tsd.d.ts

?. Fetch type definitions

tsd query angular2 --action install --save

fetchs typings/angular2/angular2.d.ts, updates tsd.json

?. tsd query es6-promise --action install --save

? configure TypeScript compiler

create tsconfig.json

Basic Application

? start TypeScript compiler in watch mode in the webapp folder

? launch VSCode and open the webapp folder

? add users.ts to tsconfig.json

? create user.ts file

?. define a component

? create index.html

Users Form Application

Service/Promise

[https://github.com/robianmcd/ng2-movies]

? tsd query http --action install --save

? usersservice.ts

import {Http}....

?index.html

<src http.dev.js

Links:

Getting started with Angular 2 developer preview, Alex Eagle https://www.youtube.com/watch?v=HmWm21cCAXM

Official 5 min quickstart

https://angular.io/docs/js/latest/quickstart.html

---

Angular2 Separate Project

Lightweight way to assemble side experiment or isolated development.

vscode/typescript, npm

http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

?. create a folder

?. open vscode on the folder

?. create package.json for livereload command

?. npm install

{

"name": "userscomponent",

"devDependencies": {

	"live-server": "latest"

},

"scripts": {

	"liveserver": "live-server --no-browser --port=9090 --open=src/webapp"

}

}

?. index.html

?. npm run for the list of commands

?. npm run liveserver for serving application and automatic change reloads.

Simple App

?. tsd init

?. create tsconfig.json

?. launch tsc -w

?. add via tsd angular2, es6-shim

for

import {bootstrap} from 'angular2/angular2';

to work.

?. create usersapp.ts file

with

http:

---

Resource Library

Slick Macros Presentation and Code

http://www.slideshare.net/hayssamsaleh1/scala-io2013-1

https://github.com/ebiznext/slick-macros/