NodeJS：搭建Web服务器
Express4：搭建Restfull服务
MongoDB：作为数据库
mongoose组件：连接MongoDB
AngularJS+Bootstrap+Foundation：UI界面
IntelliJ：开发工具
1、准备工作
安装好Nodejs，NPM，MongoDB，Express
2、项目搭建
Step 1：选择一个可以在里面创建项目的文件夹，在文件夹上利用Git Bash打开命令窗口，输入：
express MyTodo
此时，项目文件夹以及其中的基本文件已经创建，再输入：
cd MyTodo && npm install
此时，项目相关的依赖包已经安装。利用Git Bash，输入：npm start，即会出现：
在浏览器中输入：http://localhost:3000/
就会出现：Welcome to Express
--------------------------------------------------------------------------------------------------------------
step 2：如果不习惯使用ejs，可以将ejs换为html，方法如下：
找到app.js，将其中的
app.set('view engine', 'jade');
换为
app.engine('.html', require('ejs').renderFile); app.set('view engine', 'html');然后，将views文件夹下的ejs文件改为html文件。
再次输入：npm start，在浏览器查看。
因为每次修改文件都要重新启动web 服务，可以采用 nodemon 让它帮我们自动更新，输入：
npm install nodemon -g
然后，输入：nodemon，即可不再需要每次改动都npm start了。
--------------------------------------------------------------------------------------------------------------
step 3：安装MongoDB驱动mongoose，输入：
npm install mongoose --save
然后将mongoose加入到MyTodo/app.js中：
[nodemon] 1.11.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./bin/www`
connection succesful
--------------------------------------------------------------------------------------------------------------
step 4：创建models文件夹，在其中新建Todo.js
mkdir models
touch models/Todo.js
在Todo.js中写入：
step 5：利用AngularJS的$http或者$resource与RESTful APIs进行交互
在routes文件夹下新建todos.js，
在app.js中加入todos路由：
var todos = require('./routes/todos');
app.use('/todos', todos);
在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); }); }); module.exports = router;然后在浏览器中查看：http://localhost:3000/todos
即可看到：[ ]
--------------------------------------------------------------------------------------------------------------
step 6：继续在routes/todos.js中加入其它数据库操作方法：
--------------------------------------------------------------------------------------------------------------
step 7：搭建前端
将routes/index.js中的title值改为myTodo App
在views/index.html中添加如下代码：
<ng-view></ng-view> <!-- Libraries --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-resource.min.js"></script> <!-- Template --> <script type="text/ng-template" id="/todos.html"> Search:<input type="text" ng-model="search.name"> <ul> <li ng-repeat="todo in todos | filter:search"> <input type="checkbox" ng-model="todo.completed" ng-change="update($index)"> <a ng-show="!editing[$index]" href="#/{{todo._id}}">{{todo.name}}</a> <button ng-show="!editing[$index]" ng-click="edit($index)">Edit</button> <button ng-show="!editing[$index]" ng-click="remove($index)">Remove</button> <input ng-show="editing[$index]" type="text" ng-model="todo.name"> <button ng-show="editing[$index]" ng-click="update($index)">Update</button> <button ng-show="editing[$index]" ng-click="cancel($index)">Cancel</button> </li> </ul> New task <input type="text" ng-model="newTodo"> <button ng-click="save()">Create</button> </script> <script type="text/ng-template" id="/todoDetails.html"> <h1>{{todo.name}}</h1> completed: <input type="checkbox" ng-model="todo.completed"><br> note: <textarea ng-model="todo.note"></textarea><br><br> <button ng-click="update()">Update</button> <button ng-click="remove()">Remove</button> <a href="/">Cancel</a> </script> <script> angular.module('app', ['ngRoute', 'ngResource']) //--------------- // Services //--------------- .factory('Todos', ['$resource', function ($resource) { return $resource('/todos/:id', null, { 'update': {method: 'PUT'} }); }]) //--------------- // Controllers //--------------- .controller('TodoController', ['$scope', 'Todos', function ($scope, Todos) { $scope.editing = []; $scope.todos = Todos.query(); $scope.save = function () { if (!$scope.newTodo || $scope.newTodo.length < 1) return; var todo = new Todos({name: $scope.newTodo, completed: false}); todo.$save(function () { $scope.todos.push(todo); $scope.newTodo = '';//clear textbox }) } $scope.update = function (index) { var todo = $scope.todos[index]; Todos.update({id: todo._id}, todo); $scope.editing[index] = false; } $scope.edit = function (index) { $scope.editing[index] = angular.copy($scope.todos[index]); } $scope.cancel = function (index) { $scope.todos[index] = angular.copy($scope.editing[index]); $scope.editing[index] = false; } $scope.remove = function (index) { var todo = $scope.todos[index]; Todos.remove({id: todo._id}, function () { $scope.todos.splice(index, 1); }) } }]) .controller('TodoDetailCtrl', ['$scope', '$routeParams', 'Todos', '$location', function ($scope, $routeParams, Todos, $location) { $scope.todo = Todos.get({id: $routeParams.id}); $scope.update = function () { Todos.update({id: $scope.todo._id}, $scope.todo, function () { $location.url('/'); }); } $scope.remove = function () { Todos.remove({id: $scope.todo._id}, function () { $location.url('/'); }); } }]) //--------------- // Routes //--------------- .config(['$routeProvider', function ($routeProvider) { $routeProvider .when('/', { templateUrl: '/todos.html', controller: 'TodoController' }) .when('/:id', { templateUrl: '/todoDetails.html', controller: 'TodoDetailCtrl' }); }]); </script>在浏览器中即可看到如下视图：
如果需要换端口，可以采用如下方式：
PORT=4000 nodemon
OK，基本项目建设完毕，接下来将进行框架的文件整理，后面将继续更新~~~~