Skip to content

Commit a22bf9a

Browse files
author
Nathan Grunzweig
committed
use express-angular as template
1 parent ab23b36 commit a22bf9a

File tree

10 files changed

+359
-3
lines changed

10 files changed

+359
-3
lines changed

‎README.md

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
1-
lab-template
2-
============
1+
# Express-Angular App
32

4-
codefresh lab template
3+
A express node.js app built with Angular. For demonstration purposes and a tutorial.
4+
5+
Node provides the RESTful API. Angular provides the frontend and accesses the API.
6+
7+
## Example
8+
9+
The example allow you to see how those technologies / tools works together,
10+
11+
and how easy it to build client-server app this way.
12+
13+
### What to do?
14+
15+
Fill up the form, and see how Angular interacting with the express API.
16+
17+
## App run
18+
19+
Click on the 'Play' button at the top toolbar.
20+
21+
## App view
22+
23+
View in browser at [http://localhost:9090](http://localhost:9090)
24+
25+
26+
![Express-angular](http://i.imgur.com/BjXZgWs.png)

‎app.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// set up ======================================================================
2+
var express = require('express');
3+
var app = express(); // create our app w/ express
4+
var port = process.env.PORT || 9090; // set the port
5+
6+
var morgan = require('morgan'); // log requests to the console (express4)
7+
var bodyParser = require('body-parser'); // pull information from HTML POST (express4)
8+
var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)
9+
10+
11+
12+
app.use(express.static(__dirname + '/public')); // set static path
13+
app.use(morgan('dev')); // log every request to the console
14+
app.use(bodyParser.urlencoded({'extended':'true'})); // parse application/x-www-form-urlencoded
15+
app.use(bodyParser.json()); // parse application/json
16+
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
17+
app.use(methodOverride());
18+
19+
// routes
20+
require('./app/routes.js')(app);
21+
22+
23+
app.listen(port);
24+
console.log("App listening on port " + port);

‎app/routes.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
module.exports = function(app) {
2+
// api ---------------------------------------------------------------------
3+
// get contact form data and do someething ...
4+
app.post('/api/contact', function(req, res) {
5+
// do somethins
6+
var congrats = "Congrats "+req.body.form_data.name+"! ";
7+
res.send({status:congrats + " Your form has been sent!"});
8+
});
9+
10+
// application -------------------------------------------------------------
11+
app.get('*', function(req, res) {
12+
res.sendfile('./public/index.html'); // load index.html otherwise
13+
});
14+
};

‎package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name" : "express-angular",
3+
"version" : "0.0.0",
4+
"description" : "Simple express and angular application.",
5+
"main" : "app.js",
6+
"author" : "aviad@codefresh.io",
7+
"dependencies" : {
8+
"express" : "~4.7.2",
9+
"morgan" : "~1.2.2",
10+
"body-parser": "~1.5.2",
11+
"method-override": "~2.1.2"
12+
}
13+
}

‎project.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"Url":"",
3+
"Name":"express-angular",
4+
"Description":"NodeJs example includes AngularJS"
5+
}

‎public/app.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
var expressAngular = angular.module('expressAngular', []);
2+
3+
function mainController($scope, $http) {
4+
$scope.loading = false;
5+
$scope.status = "";
6+
7+
// send form data
8+
$scope.contactSend = function() {
9+
$scope.loading = true;
10+
$http.post('/api/contact', {form_data:this.data}).
11+
success(function(data, status, headers, config) {
12+
$scope.loading = false;
13+
$scope.status = data.status;
14+
$scope.status_class = "bg-info";
15+
}).
16+
error(function(data, status, headers, config) {
17+
$scope.loading = false;
18+
$scope.status = "Error";
19+
$scope.status_class = "bg-danger";
20+
});
21+
};
22+
23+
}

‎public/assets/css/cover.css

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/*
2+
* Globals
3+
*/
4+
5+
/* Links */
6+
a,
7+
a:focus,
8+
a:hover {
9+
color: #fff;
10+
}
11+
12+
/* Custom default button */
13+
.btn-default,
14+
.btn-default:hover,
15+
.btn-default:focus {
16+
color: #333;
17+
text-shadow: none; /* Prevent inheritence from `body` */
18+
background-color: #fff;
19+
border: 1px solid #fff;
20+
}
21+
22+
23+
/*
24+
* Base structure
25+
*/
26+
27+
html,
28+
body {
29+
height: 100%;
30+
background-color: #333;
31+
}
32+
body {
33+
color: #fff;
34+
text-align: center;
35+
text-shadow: 0 1px 3px rgba(0,0,0,.5);
36+
}
37+
38+
/* Extra markup and styles for table-esque vertical and horizontal centering */
39+
.site-wrapper {
40+
display: table;
41+
width: 100%;
42+
height: 100%; /* For at least Firefox */
43+
min-height: 100%;
44+
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
45+
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
46+
}
47+
.site-wrapper-inner {
48+
display: table-cell;
49+
vertical-align: top;
50+
}
51+
.cover-container {
52+
margin-right: auto;
53+
margin-left: auto;
54+
}
55+
56+
/* Padding for spacing */
57+
.inner {
58+
padding: 30px;
59+
}
60+
61+
62+
/*
63+
* Header
64+
*/
65+
.masthead-brand {
66+
margin-top: 10px;
67+
margin-bottom: 10px;
68+
}
69+
70+
.masthead-nav > li {
71+
display: inline-block;
72+
}
73+
.masthead-nav > li + li {
74+
margin-left: 20px;
75+
}
76+
.masthead-nav > li > a {
77+
padding-right: 0;
78+
padding-left: 0;
79+
font-size: 16px;
80+
font-weight: bold;
81+
color: #fff; /* IE8 proofing */
82+
color: rgba(255,255,255,.75);
83+
border-bottom: 2px solid transparent;
84+
}
85+
.masthead-nav > li > a:hover,
86+
.masthead-nav > li > a:focus {
87+
background-color: transparent;
88+
border-bottom-color: #a9a9a9;
89+
border-bottom-color: rgba(255,255,255,.25);
90+
}
91+
.masthead-nav > .active > a,
92+
.masthead-nav > .active > a:hover,
93+
.masthead-nav > .active > a:focus {
94+
color: #fff;
95+
border-bottom-color: #fff;
96+
}
97+
98+
@media (min-width: 768px) {
99+
.masthead-brand {
100+
float: left;
101+
}
102+
.masthead-nav {
103+
float: right;
104+
}
105+
}
106+
107+
108+
/*
109+
* Cover
110+
*/
111+
112+
.cover {
113+
padding: 0 20px;
114+
}
115+
.cover .btn-lg {
116+
padding: 10px 20px;
117+
font-weight: bold;
118+
}
119+
120+
121+
/*
122+
* Footer
123+
*/
124+
125+
.mastfoot {
126+
color: #999; /* IE8 proofing */
127+
color: rgba(255,255,255,.5);
128+
}
129+
130+
131+
/*
132+
* Affix and center
133+
*/
134+
135+
@media (min-width: 768px) {
136+
/* Pull out the header and footer */
137+
.masthead {
138+
position: fixed;
139+
top: 0;
140+
}
141+
.mastfoot {
142+
position: fixed;
143+
bottom: 0;
144+
}
145+
/* Start the vertical centering */
146+
.site-wrapper-inner {
147+
vertical-align: middle;
148+
}
149+
/* Handle the widths */
150+
.masthead,
151+
.mastfoot,
152+
.cover-container {
153+
width: 100%; /* Must be percentage or pixels for horizontal alignment */
154+
}
155+
}
156+
157+
@media (min-width: 992px) {
158+
.masthead,
159+
.mastfoot,
160+
.cover-container {
161+
width: 700px;
162+
}
163+
}

‎public/assets/css/style.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.inner.cover {
2+
text-align:left;
3+
}
4+
5+
.loader {
6+
width:100%;
7+
height:128px;
8+
background-image:url('../images/loader.gif');
9+
background-repeat: no-repeat;
10+
background-position:center;
11+
}
12+
13+
.status {
14+
padding:10px;
15+
margin-top:10px;
16+
color:#333;
17+
text-shadow:none;
18+
-webkit-border-radius: 5px;
19+
border-radius: 5px;
20+
}

‎public/assets/images/loader.gif

33.6 KB
Loading

‎public/index.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!doctype html>
2+
<!-- Angular App -->
3+
<html ng-app="expressAngular">
4+
<head>
5+
<title>Express-Angular App</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"><!-- load bootstrap -->
9+
<!-- Angular -->
10+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
11+
<script src="app.js"></script>
12+
<!-- Css -->
13+
<link rel="stylesheet" href="assets/css/cover.css" />
14+
<link rel="stylesheet" href="assets/css/style.css" />
15+
</head>
16+
<!-- Angular controller -->
17+
<body ng-controller="mainController">
18+
<div class="site-wrapper">
19+
20+
<div class="site-wrapper-inner">
21+
22+
<div class="cover-container">
23+
24+
<div class="masthead clearfix">
25+
<div class="inner">
26+
<h3 class="masthead-brand">Node.js Express-Angular Demo</h3>
27+
28+
</div>
29+
</div>
30+
31+
<div class="inner cover" ng-hide="loading">
32+
<h1 class="cover-heading">Contact form:</h1>
33+
<form ng-submit="contactSend()">
34+
<div class="form-group">
35+
<label for="exampleInputPassword1">Name</label>
36+
<input type="name" class="form-control" id="exampleInputName" ng-model="data.name" placeholder="Name">
37+
</div>
38+
<div class="form-group">
39+
<label for="exampleInputEmail1">Email address</label>
40+
<input type="email" class="form-control" id="exampleInputEmail" ng-model="data.email" placeholder="Enter email">
41+
</div>
42+
43+
<div class="checkbox">
44+
<label>
45+
<input type="checkbox"> Keep me logged in on this computer.
46+
</label>
47+
</div>
48+
<button type="submit" class="btn btn-lg btn-default">Submit</button>
49+
</form>
50+
<p class="status" ng-class="status_class" ng-show="status" ng-bind="status"></p>
51+
</div>
52+
53+
<div class="inner loader" ng-show="loading"></div>
54+
55+
<div class="mastfoot">
56+
<div class="inner">
57+
<p>
58+
Copyright &copy; 2015 <a target="_blank" href="http://codefresh.io">Codefresh</a>;
59+
Cover template for <a target="_blank" href="http://getbootstrap.com">Bootstrap</a>, by <a target="_blank" href="https://twitter.com/mdo">@mdo</a>;
60+
See more examples at <a target="_blank" href="http://codefresh.io/labs">Codefresh Labs</a>
61+
</p>
62+
</div>
63+
</div>
64+
65+
</div>
66+
67+
</div>
68+
69+
</div>
70+
71+
</body>
72+
</html>

0 commit comments

Comments
 (0)