Application MEAN d'exemple

D'après https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application

Application MEAN d'exemple
D'après https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
Geoffrey PREUD'HOMME
1 parent ceedb37d
Showing 16 changed files with 241 additions and 0 deletions Show diff stats
.bowerrc
.gitignore
app/models/nerd.js
app/routes.js
bower.json
config/db.js
package.json
public/js/app.js
public/js/appRoutes.js
public/js/controllers/MainCtrl.js
public/js/controllers/NerdCtrl.js
public/js/services/NerdService.js
public/views/home.html
public/views/index.html
public/views/nerd.html
server.js
@@ -0,0 +1,3 @@
+{
+    "directory": "public/libs"
+}
 \ No newline at end of file
@@ -0,0 +1,2 @@
+node_modules
+public/libs
 \ No newline at end of file
@@ -0,0 +1,12 @@
+// app/models/nerd.js
+// grab the mongoose module
+var mongoose = require('mongoose');
+
+// define our nerd model
+// module.exports allows us to pass this to other files when it is called
+module.exports = mongoose.model('Nerd', {
+    name: {
+        type: String,
+        default: ''
+    }
+});
 \ No newline at end of file
@@ -0,0 +1,35 @@
+ // app/routes.js
+
+ // grab the nerd model we just created
+ var Nerd = require('./models/nerd');
+
+ module.exports = function (app) {
+
+     // server routes ===========================================================
+     // handle things like api calls
+     // authentication routes
+
+     // sample api route
+     app.get('/api/nerds', function (req, res) {
+         // use mongoose to get all nerds in the database
+         Nerd.find(function (err, nerds) {
+
+             // if there is an error retrieving, send the error. 
+             // nothing after res.send(err) will execute
+             if (err)
+                 res.send(err);
+
+             res.json(nerds); // return all nerds in JSON format
+         });
+     });
+
+     // route to handle creating goes here (app.post)
+     // route to handle delete goes here (app.delete)
+
+     // frontend routes =========================================================
+     // route to handle all angular requests
+     app.get('*', function (req, res) {
+         res.sendfile('./public/views/index.html'); // load our public/index.html file
+     });
+
+ };
 \ No newline at end of file
@@ -0,0 +1,11 @@
+{
+    "name": "ci-site",
+    "version": "0.0.1",
+    "dependencies": {
+        "bootstrap": "latest",
+        "font-awesome": "latest",
+        "animate.css": "latest",
+        "angular": "latest",
+        "angular-route": "latest"
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,4 @@
+// config/db.js
+module.exports = {
+    url: 'mongodb://localhost/'
+}
 \ No newline at end of file
@@ -0,0 +1,10 @@
+{
+  "name": "ci-site",
+  "main": "server.js",
+  "dependencies": {
+    "body-parser": "^1.12.0",
+    "express": "^4.12.2",
+    "method-override": "^2.3.1",
+    "mongoose": "^3.8.25"
+  }
+}
@@ -0,0 +1,2 @@
+// public/js/app.js
+angular.module('sampleApp', ['ngRoute', 'appRoutes', 'MainCtrl', 'NerdCtrl', 'NerdService']);
 \ No newline at end of file
@@ -0,0 +1,22 @@
+// public/js/appRoutes.js
+angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider',
+    function ($routeProvider, $locationProvider) {
+
+        $routeProvider
+
+        // home page
+        .when('/', {
+            templateUrl: 'views/home.html',
+            controller: 'MainController'
+        })
+
+        // nerds page that will use the NerdController
+        .when('/nerds', {
+            templateUrl: 'views/nerd.html',
+            controller: 'NerdController'
+        });
+
+        $locationProvider.html5Mode(true);
+
+    }
+]);
 \ No newline at end of file
@@ -0,0 +1,6 @@
+// public/js/controllers/MainCtrl.js
+angular.module('MainCtrl', []).controller('MainController', function ($scope) {
+
+    $scope.tagline = 'To the moon and back!';
+
+});
 \ No newline at end of file
@@ -0,0 +1,6 @@
+// public/js/controllers/NerdCtrl.js
+angular.module('NerdCtrl', []).controller('NerdController', function ($scope) {
+
+    $scope.tagline = 'Nothing beats a pocket protector!';
+
+});
 \ No newline at end of file
@@ -0,0 +1,25 @@
+// public/js/services/NerdService.js
+angular.module('NerdService', []).factory('Nerd', ['$http',
+    function ($http) {
+
+        return {
+            // call to get all nerds
+            get: function () {
+                return $http.get('/api/nerds');
+            },
+
+
+            // these will work when more API routes are defined on the Node side of things
+            // call to POST and create a new nerd
+            create: function (nerdData) {
+                return $http.post('/api/nerds', nerdData);
+            },
+
+            // call to DELETE a nerd
+            delete: function (id) {
+                return $http.delete('/api/nerds/' + id);
+            }
+        }
+
+    }
+]);
 \ No newline at end of file
@@ -0,0 +1,7 @@
+<!-- public/views/home.html -->
+
+<div class="jumbotron text-center">
+    <h1>Home Page 4 Life</h1>
+
+    <p>{{ tagline }}</p>
+</div>
 \ No newline at end of file
@@ -0,0 +1,37 @@
+<!-- public/index.html -->
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <base href="/">
+        <title>Starter Node and Angular</title>
+        <!-- CSS -->
+        <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
+        <!-- JS -->
+        <script src="libs/angular/angular.min.js"></script>
+        <script src="libs/angular-route/angular-route.min.js"></script>
+        <!-- ANGULAR CUSTOM -->
+        <script src="js/controllers/MainCtrl.js"></script>
+        <script src="js/controllers/NerdCtrl.js"></script>
+        <script src="js/services/NerdService.js"></script>
+        <script src="js/appRoutes.js"></script>
+        <script src="js/app.js"></script>
+    </head>
+    <body ng-app="sampleApp" ng-controller="NerdController">
+        <div class="container">
+            <!-- HEADER -->
+            <nav class="navbar navbar-inverse">
+                <div class="navbar-header">
+                    <a class="navbar-brand" href="/">Stencil: Node and Angular</a>
+                </div>
+                <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
+                <ul class="nav navbar-nav">
+                    <li><a href="/nerds">Nerds</a></li>
+                </ul>
+            </nav>
+            <!-- ANGULAR DYNAMIC CONTENT -->
+            <div ng-view></div>
+        </div>
+    </body>
+</html>
 \ No newline at end of file
@@ -0,0 +1,7 @@
+<!-- public/views/nerd.html -->
+
+<div class="jumbotron text-center">
+    <h1>Nerds and Proud</h1>
+
+    <p>{{ tagline }}</p>
+</div>
@@ -0,0 +1,52 @@
+// server.js
+
+// modules =================================================
+var express = require('express');
+var app = express();
+var bodyParser = require('body-parser');
+var methodOverride = require('method-override');
+
+// configuration ===========================================
+
+// config files
+var db = require('./config/db');
+
+// set our port
+var port = process.env.PORT || 8080;
+
+// connect to our mongoDB database 
+// (uncomment after you enter in your own credentials in config/db.js)
+// mongoose.connect(db.url); 
+
+// get all data/stuff of the body (POST) parameters
+// parse application/json 
+app.use(bodyParser.json());
+
+// parse application/vnd.api+json as json
+app.use(bodyParser.json({
+    type: 'application/vnd.api+json'
+}));
+
+// parse application/x-www-form-urlencoded
+app.use(bodyParser.urlencoded({
+    extended: true
+}));
+
+// override with the X-HTTP-Method-Override header in the request. simulate DELETE/PUT
+app.use(methodOverride('X-HTTP-Method-Override'));
+
+// set the static files location /public/img will be /img for users
+app.use(express.static(__dirname + '/public'));
+
+// routes ==================================================
+require('./app/routes')(app); // configure our routes
+
+// start app ===============================================
+// startup our app at http://localhost:8080
+app.listen(port);
+
+// shoutout to the user                     
+console.log('Magic happens on port ' + port);
+
+// expose app           
+exports = module.exports = app;
 \ No newline at end of file