The content in this page is borrowed from
adrianmejia.com
avaldes.com
I would highly recommend you to go to their blogs and get the basics.
The reason I posted this tut is to share my pain with IE11 when it comes to running Angular.
Secondly the nodejs tuts didn't show their directory structure. My intention is not to copy their stuff but show in as few words as possible how to configure them.
These are the installation steps on Ubuntu.
-Install mongodb
the command mongod will start the DB
the command mongo will run the client
-install node
Obtain the tar ball and install it
-package.json should be in
hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin$
{
"name": "todoApp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.8.1",
"cookie-parser": "~1.3.3",
"debug": "~2.0.0",
"ejs": "~0.8.5",
"express": "latest",
"mongoose": "^3.8.17",
"morgan": "~1.3.0",
"serve-favicon": "~2.1.3"
}
}
-run theis command: npm install
-this will install all of the required modules
-in hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin$ type
“express –e todoApp”
-To make it global
Type
npm –g express
Configuraiton
Put this in todoApp/app.js
var express = require('express');
var path = require('path');
var http = require('http');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var todos = require('./routes/todos');
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/todoApp', function(err) {
if(err) {
console.log('connection error', err);
} else {
console.log('connection successful');
}
});
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/todos', todos);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
app.set('port', 3000);
var server = http.createServer(app);
server.listen(3000);
module.exports = app;
Create index.js and todos.js under todoApp/routes
hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin/todoApp/routes$ more *
::::::::::::::
index.js
::::::::::::::
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res) {
res.render('index', { title: 'Express' });
});
module.exports = router;;
::::::::::::::
todos.js
::::::::::::::
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Todo = require('../models/Todo.js');
/* GET /todos listing. */
router.get('/', function(req, res, next) {
Todo.find(function (err, todos) {
if (err) return next(err);
res.json(todos);
});
});
/* POST /todos */
router.post('/', function(req, res, next) {
Todo.create(req.body, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
/* GET /todos/id */
router.get('/:id', function(req, res, next) {
Todo.findById(req.params.id, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
/* PUT /todos/:id */
router.put('/:id', function(req, res, next) {
Todo.findByIdAndUpdate(req.params.id, req.body, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
/* DELETE /todos/:id */
router.delete('/:id', function(req, res, next) {
Todo.findByIdAndRemove(req.params.id, req.body, function (err, post) {
if (err) return next(err);
res.json(post);
});
});
module.exports = router;
Create the following files under todoApp/views
hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin/todoApp/views$ more *
::::::::::::::
error.ejs
::::::::::::::
<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>
::::::::::::::
index.ejs
::::::::::::::
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
::::::::::::::
layout.jade
::::::::::::::
!!!
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body!= body
Put this under todoApp/model/Todo.js
hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin/todoApp/models$ more *
var mongoose = require('mongoose');
var TodoSchema = new mongoose.Schema({
name: String,
completed: Boolean,
note: String
});
module.exports = mongoose.model('Todo', TodoSchema);
Start the server as hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin/node todoApp/app.js
Now run Curl on port 3000 to view the todos
hadoop-user@ubuntu:~/node-v0.10.30-linux-x64/bin$ curl localhost:3000
<!DOCTYPE html>
<html>
<head>
<title>Express</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
</body>
</html>
Here is how to add a collection to mongo
In the todoApp type node to enter in the node CLI. Then:
/* prompt> */ var mongoose = require('mongoose');
/* prompt> */ mongoose.connect('mongodb://localhost/test3');
/* prompt> */ var TodoSchema = new mongoose.Schema({
name: String,
completed: Boolean,
note: String,
updated_at: { type: Date, default: Date.now },
});
/* prompt> */ var Todo = mongoose.model('Todo', TodoSchema);
Mongoose Create
/* prompt> */ var todo = new Todo({name: 'Master NodeJS', completed: false, note: 'Getting there...'});
/* prompt> */ todo.save(function(err){
if(err)
console.log(err);
else
console.log(todo);
});
You can also build the object and save in one step using create:
/* prompt> */ Todo.create({name: 'Master Javscript', completed: true, note: 'Getting better everyday'}, function(err, todo){
if(err) console.log(err);
else console.log(todo);
});
AngularJs with Rest
Create an Eclipse Dynamic Web Project called AngularWs
The following jars are needed:
Jackson-core-asl-1.9.13.jar
Jackson-jaxrs-1.9.13.jar
Jackson-mapper-asl-1.9.13.jar
Jackson-xc-1.9.13.jar
Jersey-client-2.9.1.jar
Jersey-core-1.19.jar
Jersey-json-1.19.jar
Jersey-server-1.19.jar
Jersey-servlet-1.19.jar
Jsr311-api-1.1.1.jar
Log4j-1.2.17.jar
Com.avaldes.RestfulWsExample.jar
package com.avaldes;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import org.apache.log4j.Logger;
import com.avaldes.model.Actor;
@Path("/actors")
public class RestfulWSExample {
static final String api_version = "1.01A rev.18729";
static Logger logger = Logger.getLogger(RestfulWSExample.class);
static String xmlString = null;
static Map<String, Actor> actors = new HashMap<String, Actor>();
static {
System.out.println("Initializing Internal DataStore...");
actors.put("123", new Actor(123, "Mango", "Hugh Michael Jackman", "October 12, 1968", "hughjackman@mail.com", "http://www.clker.com/cliparts/9/3/f/2/13104306781087539055mango3.png", true));
actors.put("124", new Actor(124, "Guava", "Jennifer Shrader Lawrence", "August 15, 1990", "jennifer@mail.com", "http://www.clker.com/cliparts/b/3/a/a/13113336461425044423guava-hi.png", true));
actors.put("345", new Actor(345, "Pineapple", "Jennifer Lynn Lopez", "July 24, 1969", "jlo@verizon.com", "http://coloringhub.com/wp-content/uploads/2013/04/pineapple.jpg", true));
actors.put("333", new Actor(333, "Banana", "Jennifer Joanna Aniston", "February 11, 1969", "jennifer.anniston@eonline.com", "http://www.clker.com/cliparts/8/7/d/5/12859632222140661539banana.jpg", true));
actors.put("444", new Actor(444, "Orange", "Julia Fiona Roberts ", "October 28, 1967", "julia.roberts@att.com", "http://www.clker.com/cliparts/7/9/0/9/12859634662077106703lang%20gang%20orange:laranja-hi.png", true));
actors.put("777", new Actor(777, "Strawberry", "Christopher Robert Evans", "June 13, 1981", "chris.evans@comcast.com", "http://www.buyfruit.com.au/images/P/iStock_000012529377Small_%28strawberry%29__95536.jpg", true));
actors.put("654", new Actor(654, "Blueberry", "Robert John Downey Jr", "April 4, 1965", "robertdowney@verizon.com", "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvEBXOGzYzsV9hvtlQvrfRpYTbr0wHxPukXazI9Hk07gGfaTUdzoaNqC5O1kzz9E-LJe5I44FbHz3p-MfU5kpWB73YZDxEHxCAhOKoQ_yXpNOjvwHiU6VW8eN20GkaROJwqDrnVcpFiUZ/s1600/blueberries.jpg", true));
actors.put("255", new Actor(255, "Pear", "John Christopher Depp II", "June 9, 1963", "johndepp@hollywood.com", "http://www.buyfruit.com.au/images/P/Packham_new2__31926.jpg", true));
actors.put("989", new Actor(989, "Apple", "Scarlett Ingrid Johansson", "November 22, 1984", "scarjo@mail.com", "http://www.clker.com/cliparts/1/7/8/e/13184866091680939821239487_apple.jpg", true));
}
@Path("/version")
@GET
@Produces(MediaType.TEXT_HTML)
public String returnVersion() {
return "<p>Version: " + api_version + "</p>";
}
// This is the default @PATH
@GET
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public ArrayList<Actor> getAllActors() {
System.out.println("Getting all actors...");
ArrayList<Actor> actorList = new ArrayList<Actor>(actors.values());
return actorList;
}
@Path("{id}")
@GET
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Actor getActorById(@PathParam("id") String id) {
System.out.println("Getting actor by ID: " + id);
Actor actor = actors.get(id);
if (actor != null) {
logger.info("Inside getActorById, returned: " + actor.toString());
} else {
logger.info("Inside getActorById, ID: " + id + ", NOT FOUND!");
}
return actor;
}
@Path("{id}")
@PUT
@Consumes({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Actor updateActor(Actor actor) {
actors.put(""+actor.getId(), actor);
System.out.println("updateActor with ID: " + actor.getId());
if (actor != null) {
logger.info("Inside updateActor, returned: " + actor.toString());
} else {
logger.info("Inside updateActor, ID: " + actor.getId() + ", NOT FOUND!");
}
return actor;
}
@Path("/search/{query}")
@GET
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public ArrayList<Actor> searchActorByName(@PathParam("query") String query) {
System.out.println("Searching actor by Name: " + query);
ArrayList<Actor> actorList = new ArrayList<Actor>();
for (Actor c: actors.values()) {
if (c.getName().toUpperCase().contains(query.toUpperCase()))
actorList.add(c);
}
return actorList;
}
@Path("/add")
@POST
@Consumes({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Actor addActor(Actor actor) {
System.out.println("Adding actor with ID: " + actor.getId());
if (actor != null) {
System.out.println("Inside addActor, returned: " + actor.toString());
actors.put(""+actor.getId(), actor);
System.out.println("# of actors: " + actors.size());
System.out.println("Actors are now: " + actors);
} else {
System.out.println("Inside addActor, Unable to add actors...");
}
return actor;
}
@Path("{id}")
@DELETE
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
public Actor deleteActorById(@PathParam("id") String id) {
System.out.println("Deleting actor with ID: " + id);
Actor actor = actors.remove(id);
if (actor != null) {
logger.info("Inside deleteActorById, returned: " + actor.toString());
} else {
logger.info("Inside deleteActorById, ID: " + id + ", NOT FOUND!");
}
return actor;
}
}
Com.avaldes.model.Actor.java
package com.avaldes.model;
import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement(name = "actor")
public class Actor {
private int id;
private String name;
private String birthName;
private String birthDate;
private String email;
private String image;
private boolean active;
public Actor(int id, String name, String birthName, String birthDate, String email, String image, boolean active) {
this.id = id;
this.name = name;
this.birthName = birthName;
this.birthDate = birthDate;
this.email = email;
this.image = image;
this.active = active;
}
@XmlElement
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
@XmlElement
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@XmlElement
public String getBirthName() {
return birthName;
}
public void setBirthName(String birthName) {
this.birthName = birthName;
}
@XmlElement
public String getBirthDate() {
return birthDate;
}
public void setBirthDate(String birthDate) {
this.birthDate = birthDate;
}
@XmlElement
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@XmlElement
public boolean isActive() {
return active;
}
public void setActive(boolean active) {
this.active = active;
}
@XmlElement
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public Actor() {
}
@Override
public String toString() {
return "Actor [id=" + id + ", name=" + name + ", birthName="
+ birthName + ", birthDate=" + birthDate + ", email=" + email
+ ", image=" + image + ", active=" + active + "]";
}
}
WebContent/include/app.js
(function() {
var app = angular.module("app", ['ngRoute']);
app.controller("HttpCtrl", function($scope, $http) {
var app = this;
$scope.navTitle = 'All Stars';
$scope.operation="";
$scope.isSaveDisabled = true;
$scope.isDeleteDisabled = true;
var response = $http.get('/AngularWs/rest/actors/');
response.success(function(data) {
$scope.actors = data;
console.log("[main] # of items: " + data.length)
angular.forEach(data, function(element) {
console.log("[main] actor: " + element.name);
});
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
$scope.getActor = function(id) {
var response = $http.get('/AngularWs/rest/actors/'+ id );
response.success(function(data) {
$scope.actor = data;
$scope.operation="update";
$scope.isSaveDisabled = false;
$scope.isDeleteDisabled = false;
})
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.searchActor = function(name) {
var app = this;
$scope.navTitle = 'Search Criteria';
var response = $http.get('/AngularWs/rest/actors/search/' + name);
response.success(function(data) {
$scope.actors = data;
$scope.$apply();
console.log("[searchActor] # of items: " + data.length)
angular.forEach(data, function(element) {
console.log("[searchActor] actor: " + element.name);
});
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.clearForm = function() {
$scope.actor = {
id:'',
name:'',
birthName:'',
birthDate:'',
email:'',
image:'',
active:''
};
}
$scope.addNew = function(element) {
$scope.operation="create";
$scope.clearForm();
main.id.focus();
$scope.isSaveDisabled = false;
$scope.isDeleteDisabled = true;
}
$scope.saveActor = function(id) {
$scope.jsonObj = angular.toJson($scope.actor, false);
console.log("[update] data: " + $scope.jsonObj);
if ($scope.operation == "update") {
var response = $http.put('/AngularWs/rest/actors/' + id, $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
} else if ($scope.operation == "create") {
var response = $http.post('/AngularWs/rest/actors/add', $scope.jsonObj);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
}
};
$scope.deleteActor = function(id) {
var response = $http.delete('/AngularWs/rest/actors/' + id);
response.success(function(data, status, headers, config) {
$scope.resetSearch();
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
$scope.resetSearch = function(name) {
var app = this;
$scope.operation="";
$scope.clearForm();
$scope.isSaveDisabled = true;
$scope.isDeleteDisabled = true;
$scope.navTitle = 'All Stars';
$scope.searchName = '';
var response = $http.get('/AngularWs/rest/actors/');
response.success(function(data) {
$scope.actors = data;
$scope.$apply();
console.log("[resetSearch] # of items: " + data.length)
});
response.error(function(data, status, headers, config) {
alert("AJAX failed to get data, status=" + status);
})
};
});
})();
WebContent/include/controller.js
/* Controllers */
var app = angular.module('ngdemoApp.controllers', []);
// Clear browser cache (in development mode)
//
// http://stackoverflow.com/questions/14718826/angularjs-disable-partial-caching-on-dev-machine
app.run(function ($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function () {
$templateCache.removeAll();
});
});
app.controller('DummyCtrl', ['$scope', 'DummyFactory', function ($scope, DummyFactory) {
$scope.bla = 'bla from controller';
DummyFactory.query({}, function (data) {
$scope.foo = data.firstName;
})
}]);
app.controller('UserListCtrl', ['$scope', 'UsersFactory', 'UserFactory', '$location',
function ($scope, UsersFactory, UserFactory, $location) {
/* callback for ng-click 'editUser': */
$scope.getActor = function (userId) {
$location.path('/AngularWs/rest/actors/' + userId);
};
/* callback for ng-click 'deleteUser': */
$scope.deleteActor = function (userId) {
UserFactory.delete({ id: userId });
$scope.users = UsersFactory.query();
};
/* callback for ng-click 'createUser': */
$scope.addNew= function () {
$location.path('/AngularWs/rest/actors/add');
};
$scope.actors = UsersFactory.query();
}]);
app.controller('UserDetailCtrl', ['$scope', '$routeParams', 'UserFactory', '$location',
function ($scope, $routeParams, UserFactory, $location) {
/* callback for ng-click 'updateUser': */
$scope.saveActor = function () {
UserFactory.update($scope.user);
$location.path('/AngularWs/rest/actors/add');
};
/* callback for ng-click 'cancel': */
$scope.cancel = function () {
$location.path('/AngularWs/rest/actors');
};
$scope.user = UserFactory.show({id: $routeParams.id});
}]);
app.controller('UserCreationCtrl', ['$scope', 'UsersFactory', '$location',
function ($scope, UsersFactory, $location) {
/* callback for ng-click 'createNewUser': */
$scope.addNew = function () {
UsersFactory.create($scope.user);
$location.path('/AngularWs/rest/actors');
}
}]);
WebContent/include/styles.css
/* Change color of H1 tag and add Shadow */
h1.custom {
font-family: impact, sans-serif;
font-size: 30px;
color: #5aa8f5;
font-style: bold;
text-align: left;
text-shadow: 2px 3px 5px #444;
}
table.side {
width: 100%;
}
td.side {
border:1px solid #999;
border-collapse:collapse;
font-family: verdana, sans-serif;
font-weight: bold;
font-size: 12px;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
}
td.side:hover {
background: #cbd3fe;
}
.header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
.btn {
margin-left:10px;
}
.LeftPanel {
line-height:30px;
background-color:#eeeeee;
height:460px;
width:210px;
float:left;
padding:5px;
overflow-y: scroll;
}
.LeftPanelHeader {
background-color: #c0c0c0;
color:white;
width:183px;
clear:both;
text-align:center;
padding-top:3px;
padding-bottom:3px;
}
.RightPanel {
line-height:30px;
background-color:#eeeeee;
height:460px;
width:240px;
float:right;
padding:5px;
}
.MainBody {
width:600px;
float:left;
padding:10px;
}
.footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
/* Label Style */
.display {
font-family: verdana, sans-serif;
font-size: 13px;
color: #777;
}
.display_bold {
font-family: verdana, sans-serif;
font-size: 12px;
font-weight: bold;
color: #555;
}
/* Label Style */
label {
font-family: verdana, sans-serif;
font-size: 13px;
color: #777;
}
/* Double Border */
input {
border: 3px double #CCCCCC;
}
/* Submit Button with Hover Effect*/
.button {
background-color: #3366FF;
padding-left:20px;
padding-right:20px;
padding-top:6px;
padding-bottom:6px;
border-radius: 6px;
color: #ffffff;
width: 200px;
border:1px solid #3366FF;;
background-image: url(/form/images/blue_button.png);
}
.button:hover {
background-color: #000000;
border:1px solid #000000;
background-image: url(/form/images/blue_button_hover.png);
}
WEB-INF/web.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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>com.omega.rest</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Jersey REST Service</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
<init-param>
<param-name>com.sun.jersey.config.property.packages</param-name>
<param-value>com.avaldes</param-value>
</init-param>
<init-param>
<param-name>com.sun.jersey.api.json.POJOMappingFeature</param-name>
<param-value>true</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Jersey REST Service</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>
</web-app>
WebContent/index.jsp
<html >
<head>
<title>Show Fruit</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link href="include/styles.css" rel="stylesheet">
<!-- Use Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="include/app.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="app">
<div ng-controller="HttpCtrl as app">
<div class="container">
<div class="header">
<h1 class="custom">Actors' Favorite Fruits</h1>
</div>
<div class="leftPanel">
<div class="LeftPanelHeader">{{navTitle}}</div>
<table class="side">
<tr ng-repeat="a in actors" ng-click="getActor(a.id)" >
<td class="side">{{a.name}}</td>
</tr>
</table>
</div>
<div class="RightPanel">
<image src="{{actor.image}}" width="220">
</div>
<div class="MainBody">
<form>
<table>
<tr>
<td><input type="text" ng-model="searchName" size="30"></td>
<td><button type="button" ng-click="searchActor(searchName)" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-search"></span> Search </button></td>
<td><button ng-click="addNew()" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-plus"></span> Add New </button></td>
<td><button ng-click="resetSearch()" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-refresh"></span> Reset Search </button></td>
</tr>
</table>
</form>
<form id="main">
<table>
<tr>
<td class="display_bold"><label for="actor.name">ID:</label></td>
</tr>
<tr>
<td class="display"><input id="id" type="text" ng-model="actor.id" size="4"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Fruit:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.name" size="30"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Favorite Fruit Of:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.birthName" size="40"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Birth Date:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.birthDate" size="20"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Email:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.email" size="30"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">Image:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.image" size="80"></td>
</tr>
<tr>
<td class="display_bold"><label for="name">IsActive:</label></td>
</tr>
<tr>
<td class="display"><input type="text" ng-model="actor.active" size="10"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td><button ng-click="saveActor(actor.id)" class="btn btn-success btn-sm" title="Save actor's details..." ng-disabled="isSaveDisabled">
<span class="glyphicon glyphicon-plus"></span> Save </button></td>
<td><button ng-click="deleteActor(actor.id)" class="btn btn-danger btn-sm" ng-disabled="isDeleteDisabled">
<span class="glyphicon glyphicon-trash"></span> Delete </button></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
<div class="footer">AngularJS Demo </div>
</div>
</body>
</html>
WebContent/Log4j.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE log4j:configuration PUBLIC "-//APACHE//DTD LOG4J 1.2//EN" "log4j.dtd">
<log4j:configuration xmlns:log4j="http://jakarta.apache.org/log4j/">
<!-- Appenders -->
<appender name="console" class="org.apache.log4j.ConsoleAppender">
<param name="Target" value="System.out" />
<layout class="org.apache.log4j.PatternLayout">
<param name="ConversionPattern" value="%-5p: %c - %m%n" />
</layout>
</appender>
<!-- Application Loggers -->
<logger name="com.avaldes">
<level value="info" />
</logger>
<!-- Root Logger -->
<root>
<priority value="warn" />
<appender-ref ref="console" />
</root>
</log4j:configuration>
Export the war file in Eclipse and deploy it under Tomcat 8
Goto:
Localhost:8090/AngularWs
To see the results
For this to work in IE11
Place this at the TOP of the <head> tag
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
