【Nodejs&&ExpressJS&&AngularJS】安装与框架搭建

1.NodeJS

下载安装包

https://nodejs.org/download/

安装安装包

tar --strip-components 1 -xzvf node-v0.12.1-linux-x64.tar.gz -C /opt/app/nodejs_12

2.安装开发包

npm install -g express
npm install -g express-generator
npm install -g yo

npm install -g generator-angular

npm install -g bower

npm install -g nodemon

3.建立Front项目

cd $PROJECT_HOME
mkdir client
cd client

yo angular

vi client/Gruntfile.js

修改dist: 'dist'with dist: '../server/dist'.

grunt serve

 http://localhost:9000测试前端静态页面

4。建立Backend

cd $PROJECT_HOME
mkdir server

express

npm install

mkdir dist

delete public views 文件夹

vi app.js 

 注释掉如下行：

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade’);
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);

添加如下行

/**
 * Development Settings
 */
if (app.get('env') === 'development') {
    // This will change in production since we'll be using the dist folder
    app.use(express.static(path.join(__dirname, '../client')));
    // This covers serving up the index page
    app.use(express.static(path.join(__dirname, '../client/.tmp')));
    app.use(express.static(path.join(__dirname, '../client/app')));

    // Error Handling
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

/**
 * Production Settings
 */
if (app.get('env') === 'production') {

    // changes it to use the optimized version for production
    app.use(express.static(path.join(__dirname, '/dist')));

    // 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: {}
        });
    });
}

 

vi server/package.json

"start": " nodemon ./bin/www",
"test": " nodemon ./bin/www"

 

 

npm uninstall jade --save

5.Connecting AngularJS with Express

cd client

1.add views/signup.html

2.modify app.js

'use strict';

/**
 * @ngdoc overview
 * @name clientApp
 * @description
 * # clientApp
 *
 * Main module of the application.
 */
angular
  .module('clientApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .when('/signup', {
        templateUrl: 'views/signup.html',
        controller: 'SignupCtrl'
      })
        .otherwise({
        redirectTo: '/'
      });
  });

3.添加scripts/signup.js

'use strict';

angular.module('clientApp') // make sure this is set to whatever it is in your client/scripts/app.js
  .controller('SignupCtrl', function ($scope, $http) { // note the added $http depedency

    // Here we're creating some local references
    // so that we don't have to type $scope every
    // damn time
    var user,
      signup;

    // Here we're creating a scope for our Signup page.
    // This will hold our data and methods for this page.
    $scope.signup = signup = {};

    // In our signup.html, we'll be using the ng-model
    // attribute to populate this object.
    signup.user = user = {};

    // This is our method that will post to our server.
    signup.submit = function () {

      // make sure all fields are filled out...
      // aren't you glad you're not typing out
      // $scope.signup.user.firstname everytime now??
      if (
        !user.firstname ||
        !user.lastname ||
        !user.email ||
        !user.password1 ||
        !user.password2
      ) {
        alert('Please fill out all form fields.');
        return false;
      }

      // make sure the passwords match match
      if (user.password1 !== user.password2) {
        alert('Your passwords must match.');
        return false;
      }

      // Just so we can confirm that the bindings are working
      console.log(user);

      // Make the request to the server ... which doesn't exist just yet
      var request = $http.post('/signup', user);

      // we'll come back to here and fill in more when ready
      request.success(function (data) {
        // to be filled in on success
        console.log(data);
      });

      request.error(function (data) {
        // to be filled in on error
        console.log(data);
      });

    };

  });

4..modify Backend server

A.cd server

B.server/routes/signup.js

C.modify server/app.js

  在var app = express();前面添加

/**
 * Route Imports
 */
var signup = require('./routes/signup');

在module.exports = app;后面添加

/**
 * Routes
 */
app.use('/signup', signup);

D.modify server/routes/signup.js

// Include Express
var express = require('express');
// Initialize the Router
var router = express.Router();

// Setup the Route
router.post('/', function (req, res) {

    // show the request body in the command line
    console.log(req.body);

    // return a json response to angular
    res.json({
        'msg': 'success!'
    });
});

// Expose the module
module.exports = router;

E:在控制台执行（windows)

cd server

Set NODE_ENV=development

npm test

http://localhost:3000/#/signup

 

6.Connecting Express with MongoDB

6.1 Install mongoose

http://mongoosejs.com/

$ npm install mongoose

6.2cd $PROJECT_HOME/server

a.mkdir database && mkdir database/schemas

b.cd database

c.create db.js

var mongoose = require('mongoose');
var config = require('../config/config.index');
var UserModel = require('./schemas/User');

var uri = 'mongodb://' + config.mongo.uri + '/' + config.mongo.db;
var options = {
    server: {poolSize: 5}
};
mongoose.connect(uri, options);


// get an instance of our connection to our database
var db = mongoose.connection;

// Logs that the connection has successfully been opened
db.on('error', console.error.bind(console, 'connection error:'));
// Open the connection
db.once('open', function callback () {
    console.log('Databsae Connection Successfully Opened at ' + uri);
});

exports.user= UserModel;

 

d.cd database/schemas

e.create user.js

/**
 * Our Schema for Users
 */
var mongoose = require('mongoose');
//var bcrypt = require('bcrypt');
var Schema = mongoose.Schema;

// Define the User Schema
var userSchema = new Schema({
    firstname: { type: String, required: true },
    lastname: { type: String, required: true },
    email: { type: String, required: true, unique: true },
    password: { type: String, required: true },
    profile: {} // for extra information you may / may not want
});

// A method that's called every time a user document is saved..
userSchema.pre('save', function (next) {

    var user = this;
   next();
  /*  // If the password hasn't been modified, move along...
    if (!user.isModified('password')) {
        return next();
    }*/

  /*  // generate salt
    bcrypt.genSalt(10, function(err, salt){

        if (err) {
            return next(err);
        }

        // create the hash and store it
        bcrypt.hash(user.password, salt, function(err, hash){
            if (err) {
                return next(err);
            }
            user.password = hash;
            next();
        });
    });*/
});

// Password verification helper
userSchema.methods.comparePassword = function (triedPassword, cb) {
    /*bcrypt.compare(triedPassword, this.password, function(err, isMatch) {
        if(err) return cb(err);
        cb(null, isMatch);
    });*/
};

// The primary user model
var User = mongoose.model('User', userSchema);

module.exports = User;

f.modify router/signup.js

/**
 * This handles the signing up of users
 */
var express = require('express');
var router = express.Router();
var moment = require('moment');
var _ = require('underscore');
var color = require('cli-color');
var db = require('../database/db');
var User = db.user;

// The POST /signup route
router.post('/', function (req, res) {

    // The posted information from the front-end
    var body = req.body;
    // Current time this occurred
    var time = moment().format('MMMM Do YYYY, h:mm:ss a');

    // Check to see if the user already exists
    // using their email address
    User.findOne({

        'email': body.email

    }, function (err, user) {

        // If there's an error, log it and return to user
        if (err) {

            // Nice log message on your end, so that you can see what happened
            console.log('Couldn\'t create new user at ' + color.red(time) + ' by ' + color.red(body.email) + ' because of: ' + err);

            // send the error
            res.status(500).json({
                'message': 'Internal server error from signing up new user. Please contact support@yourproject.com.'
            });
        }

        // If the user doesn't exist, create one
        if (!user) {
            console.log('Creating a new user at ' + color.green(time) + ' with the email: ' + color.green(body.email));

            // setup the new user
            var newUser = new User({
                firstname: body.firstname,
                lastname: body.lastname,
                email: body.email,
                password: body.password1
            });

            // save the user to the database
            newUser.save(function (err, savedUser, numberAffected) {

                if (err) {
                    console.log('Problem saving the user ' + color.yellow(body.email) + ' due to ' + err);
                    res.status(500).json({
                        'message': 'Database error trying to sign up.  Please contact support@yourproject.com.'
                    });
                }

                // Log success and send the filtered user back
                console.log('Successfully created new user: ' + color.green(body.email));

                res.status(201).json({
                    'message': 'Successfully created new user',
                    'client': _.omit(savedUser, 'password')
                });

            });
        }

        // If the user already exists...
        if (user) {
            res.status(409).json({
                'message': body.email + ' already exists!'
            });
        }

    });

});

// export the router for usage in our server/router/index.js
module.exports = router;

g.运行

cd server

Set NODE_ENV=development

npm test

http://localhost:3000/#/signup

 

7.Git代码库

https://github.com/hlxinyan/OnlineFoodOrdering.git

8.参考教程

http://start.jcolemorrison.com/building-an-angular-and-express-app-part-1/

http://start.jcolemorrison.com/building-an-angular-and-express-app-part-2/

http://start.jcolemorrison.com/building-an-angular-and-express-app-part-3/