zoukankan      html  css  js  c++  java
  • MEAN: AngularJS + NodeJS的REST API开发教程

    Node.JS

    https://www.jdon.com/idea/nodejs/web-app-with-angularjs-and-rest-api-with-node.html

     Mean是一个热门,本教程展示前端使用Angular.js访问后端Node.js编程的REST API。步骤如下:

    • 创建一个单页应用(SPA:Single Page Application)创建和删除所有“任务",任务是一个业务案例。
    • 保存任务到数据库 (MongoDB/Mongoose)
    • 使用ExpressJS 作为 Node的Web框架
    • 使用Node创建一个RESTful API
    • 使用AngularJS作为前端调用REST API

      首先,我们创建Angular+Node.jS的如下文件结构:

    - public
    ----- index.html
    ----- main.js
    server.js
    package.json
    • main.js 是包含所有前端逻辑,有Angular JS处理器和通过AJAX调用API获得内容或删除内容等。
    • index.html 这是一个单个html文件,所有的单页应用都是基于这个文件
    • Server.js是我们的Node文件,放置服务器配置和REST API的路由配置。
    • package.JSON 这是应用数据的文件。放置Node的依赖配置

    第一步

    我们从配置package.json开始,需要加入ExpressMongoose:

    {
    "name": "angular-todo",
    "version": "0.0.1",
    "description": "Simple Angular TODO app based in MEAN stack",
    "main": "server.js",
    "author": "Toon Tuts",
    "dependencies": {
    "express": "latest",
    "mongoose": "latest"
    }

    然后,在NodeJS控制台输入install npm,将这两个包安装完成。

    第二步

    我们开始配置server.js ,这是服务器的主文件和路由配置文件,包括数据库连接的实现都在这个文件代码中实现,编写javascript代码如下:

    server.js

    这段代码首先引入ExpressMongoose两个库包,然后实现数据库连接。启动服务器在8080端口。

    第三步

    建立一个业务模型的数据库,业务模型是 任务或"ToDos". 使用Mongoose 实现,模型内容很简单,“任务”只有一个"Text" 属性,代码插入到server.js ,注意是在服务器启动监听之前。

    // Definition Model
    var all = mongoose.model( 'All' , {
    text: String
    });

    第四步

    建立REST API的路由,REST定义如下:

    HTTP

    URL

    Description

    GET / api/all 返回所有任务
    POST / api/all 创建一个任务
    DELETE / api/all: all 删除一个任务

    在进入代码实现这段API之前,我们先了解一下整个MEAN的流程:

    mean flow

    前端Angular使用Ajax调用我们后端NodeJS的API. 然后向数据库(Mongo)查询。然后返回查询结果给 Node,NodeJS再作为JSON输出给Angular,后者将其显示在前端,无需刷新页面,因为是更新了Html的DOM,这就是一个单页应用SPA。

    在server.js文件的服务器启动监听之前加入路由配置:

    mean route

    Mongoose能够提供查找 (find), 杀出 (remove) 和创建 (create)简单实现方式,最后一行路由不是用来实现API,而是负责显示执行前端逻辑的html。

    后端工作都已经完成,下面进入前端。

    第五步

    首先在main.js创建一个模板定义这个应用:

    1
    var angularTodo = angular.module('angularTodo', []);

    下面加入mainController代码:

    angular.js maincontroller

    这段代码中 $scope 是所有变量存储的地方,活动周期是和控制器一样,在html中如果有 -ng controller = "mainController"标签语法,那么这个标签内部的所有东西都是 $scope中对象控制,或者说相对应。

     $ http 是用来实现对后端API进行 AJAX 调用。

    使用以上两个对象,我们创建了三个函数,发出三种请求: API GET 获得所有数据项,  POST 是创建一个新数据项,而 DELETE 是删除数据项.

    第六步

    最好我们编制Html文件,需要加入Angular的激活标签 -ng app. 我们可以加入到html语法tag < html> 中:

    <html  ng-app="angularTodo">...</html>

    一个应用可以有多个控制器,在这里例子中我们只有一个叫mainController , 我们认为HTML作为视图显示都是为这个控制器服务的,因此需要加上-ng controller .在<body>中加入:

    <body ng-controller="mainController">...</body>

    为了显示GET的所有数据,需要使用 ng-repeat语法遍历数据集合:

    ng-repeat

    上述代码中显示数据项时,每一行后面有一个删除checkbox,是用来实现删除数据的。ng-click是在用户点按html元素后发出一个事件,我们可用来调用后端API。

    最后,我们要创建一个页面用来输入数据,通过POST提交到后端,需要使用ng-model,其中包含的是我们的业务数据,而在提交按钮上的 ng-click 被点击后会调用控制器的createTodo() ,然后由其提交到后端。

    <form>
    <div class="form-group">
    <input type="text" class="form-control input-lg text-center"
    placeholder="Enter a new task"
    ng-model="formData.text">
    </div>
    <button class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
    </form>

    最后,整个index.html代码如下:

    angular.js index.html

  • 相关阅读:
    成功引爆
    pecompact2脱壳手记
    象棋
    今天小雨
    出错了,怎么办?
    设计模式——Adapter模式
    表设计中应注意的2点
    设计模式——Singleton模式
    设计模式——Facade模式
    设计模式——Strategy模式
  • 原文地址:https://www.cnblogs.com/slqgenius/p/11953160.html
Copyright © 2011-2022 走看看