angularjs+nodejs+mongodb+webstrom例子

最新推荐文章于 2018-11-19 22:03:55 发布

原创最新推荐文章于 2018-11-19 22:03:55 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#mongodb #数据库 #angularjs #nodejs #开发工具

angularjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用AngularJS前端框架、Node.js后端服务及MongoDB数据库搭建的应用实例。该应用可实现在前端输入框中输入内容后，通过点击按钮将内容添加到列表的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据http://www.tudou.com/programs/view/txhBUA7fcNA/?resourceId=0_06_02_99视频学习整理的例子。

其中前端设计到了angularjs，服务用的是nodejs，数据库用的是mongodb，开发工具用的是webstrom

前提是你已经安装了mongodb数据库，nodejs，如果都准备完毕后，现在我们开始吧！

例子效果：在输入框输入文字，点击按钮，会添加到一个列表项

这里写图片描述

1.初始化项目生成packjson.json文件可以一直enter即可

npm init

2.安装mongoose 用于连接，操作数据库的

npm install mongoose –save-dev

3.安装cors 解决http跨域请求的

npm install cors –save-dev

4.安装body-parser 用来解析http请求体的

npm install body-parser –save-dev

5.下载angularjs

cd public
bower install angular

项目文件夹目录：

server.js //nodejs起服务的
public //放置静态文件
……..index.html
……..app.js
……..bower_components //angular模块
node_modules //安装依赖的模块

server.js内容

var express = require('express');
var app = express();
var cors = require('cors'); //处理跨域请求的
var bodyParser = require('body-parser');
app.use(cors());
app.use(bodyParser.json());
var mongoose = require('mongoose');
var db=mongoose.connect('mongodb://localhost/product');
var Product = mongoose.model('Product',{name:String});
app.get('/',function(req,res){
    Product.find(function(err,products){
        res.send(products);
    });
});
app.post('/add',function(req,res){
    var name = req.body.name;
    var product = new Product({name:name});
    product.save(function (err) {
       res.send();
    });
});
app.listen(3000);

public –> index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="myapp" ng-controller="AppCtrl">
<ul>
    <li ng-repeat="product in products">
        {{product.name}}
    </li>
</ul>
<input type="text" ng-model="newProduct">
<button ng-click="saveProduct(newProduct)">save product</button>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

public –>app.js

var app = angular.module('myapp',[]);
app.controller('AppCtrl',function($http,$scope){
    var url = 'http://localhost:3000';
    $scope.saveProduct=function(newProduct){
        $http.post(url+'/add',{name:newProduct}).success(function(){
            loadProduct();
        });
    }
    function loadProduct() {
        $http.get(url).success(function (products) {
            $scope.products = products;
        });
    }
    loadProduct();
});