欢迎使用CSDN-markdown编辑器

来源：互联网发布：淘宝订单能删除吗编辑：程序博客网时间：2024/06/10 16:01

Angular 实现简易tudo Dem

架构总览（借用图片）

这里写图片描述

开发环境搭建

ionic+nodejs+coedova

安装nodejs,直接到官网上下载，安装（包含npm工具），去ionic官网查看整体教程，主要包括以下几步：
一：安装nodejs，使用npm安装ionic，cordova
npm install -g cordova ionic

二：安装Android SDK，我使用的诗AS，所以不需要再去安装了，直接在环境变量里面配置SDK路径即可（百度），
新建环境变量
ANDROID_HOME=/Development/android-sdk/
在path最后添加：
C:\Development\android-sdk\platform-tools
C:\Development\android-sdk\tools

三：启动Emulator(使用AS配置或者Google)
Setting up an Emulator
命令：cordova run –list

四：终于可以创建一个工程了
ionic start tudo blank
该目录下就会生成一个tudo

五：在网页中调试tudo
进入tudo,使用，命令ionic serve ，会自动在当前的网页上运行项目，F12进入chrome的开发者模式，我们会看到这个界面，

这里写图片描述

正式开工

简介：我们主要使用HTML来布局前端，然后使用JS来进行控制，最后和后台的的服务器相连（MVC）。

一：添加list

用来显示的界面在www下的index.html文件中，我们可以看到，在index中框架已经帮我们定义好了head显示的内容，我们主要是控制content部分内容的显示。
我们在content中添加如下代码：

<ion-list>  <ion-item ng-repeat="task in tasks">    {{task.title}}  </ion-item></ion-list>

介绍一下这段代码做了什么事，我们创建了一个ion-list控件，定义了一个tasks数组，使用ng-repeat实现数据的绑定，ng-repeat将会生成标签内部所有HTML元素的一份拷贝，包括放指令的标签。{{}}实现数据的双向绑定，我们将task绑定到item的标签，然后在item中显示task的title。

我们需要对页面显示进行控制，在js/app.js文件中对
我们还没有定义所需的控制器，在js/app.js文件中，我们来定义我们对视图的控制器，将一下代码添加都文件的最后，其中TudoCtrl是controller的名字，然后function是函数的定义，$scope是作用域，对应的是我们的添加TudoCtrl的标签范围内。

.controller('TodoCtrl', function($scope) {  $scope.tasks = [    { title: 'Collect coins' },    { title: 'Eat mushrooms' },    { title: 'Get high enough to grab the flag' },    { title: 'Find the Princess' }  ];})

这样还不行，我们还需要在index中声明我们的控制器，

<body ng-app="starter" ng-controller="TodoCtrl">

ng-app可以将网页自动初始化为一个AngularJS应用，这样你才能在网页中使用各种AngularJS提供的功能，starter是它的名字，我们会看到在js/app.js中有

angular.module('starter', ['ionic'])

意思就是对starter这个范围进行控制，starter依赖ionic模块，
模块的依赖例子：

angular.module("moduleB", [])        .service("GreetService", function() {            return {                greet: function() {                    return "Hello, world";                }            };        });angular.module("moduleA", ["moduleB"])        .controller("TestCtrl", ["$scope", "GreetService", function($scope, GreetService) {            $scope.words = "";            $scope.greet = function() {                $scope.words = GreetService.greet();            };        }]);<div ng-app="moduleA">    <div ng-controller="TestCtrl">        <span ng-bind="words"></span>        <button ng-click="greet()">Greet</button>    </div></div>

页面上只直接初始化了moduleA，但是从moduleA的依赖关系中，引用到了moduleB，所以，moduleA下面的TestCtrl，可以像引用同一个module下其他service那样，引用moduleB中定义的service。

界面显示就会如下
这里写图片描述

二：输入框和创建按钮，以实现添加新task的功能

在index.html中添加如下代码，ng-submit表示form的提交事件由createTask(task)函数来控制，ng-model表示绑定task.title和输入框的内容，

<form ng-submit="createTask(task)">  <label class="item item-input">    <input type="text" placeholder="What do you need to do?" ng-model="task.title">    <button type="submit" class="button button-small button-positive">Create Task</button>  </label></form>

createTask()函数的实现:将一个task添加到tasks数组里面。

$scope.createTask = function(task) {  $scope.tasks.push({    title: task.title  });};

界面就会显示成这样：
这里写图片描述

打包成Android应用：
ionicplatformaddandroid ionic build android

androidlistavd emulator -avd magicyu
$ emulator -avd magicyu -skin QVGA

但是我们的数据不能永久保存，想要永久保存就要使用数据库（mongodb）

使用nodejs搭建一个简易服务器

安装mongodb，去官网

运行数据库：

$ mongod -dbpath "path to db directory"

启动数据库

$ mongo

查看具有的db

$ show dbs

使用默认创建的test数据库

$ use test

查看数据库具有的collection

$ show collections

查看collection tasks中所有的document

$ db.tasks.find().pretty()

我们需要使用mongoose插件来实现对数据库的操作，mongoose插件需要和express框架一起使用，
安装express框架：

$ npm install -g express express-generator

生成express项目

$ express -e backend

空项目创建完成后，进入该项目，运行命令npm install安装项目所需的依赖包。
之后项目通过npm start来运行。
将mongoose插件安装到该项目

$ npm install --save mongoose

在项目根目录下新建一个文件夹models用来存储我们的数据模型，在该文件夹中创建文件task.js，添加代码如下：首先我们使用个require引用mongoose模块，构建一个TaskSchema数据类型，然后exports这个数据类型给别人使用。

var mongoose = require('mongoose');var TaskSchema = new mongoose.Schema({  title: String,  create_at: {    type: Date,    default: Date.now  }});module.exports = mongoose.model("Task", TaskSchema);

连接mongodb数据库，在app.js中

var mongoose = require('mongoose');mongoose.connect('mongodb://localhost/test', function(err) {  if (err) {    console.log('connection error', err);  } else {    console.log('connection successful');  }});

定义路由

我们通过RESTful接口使前端和后端进行连接
在routes文件夹中新建文件task.js，具体代码为

var express = require('express');var router = express.Router();var Task = require('../models/task');router.post("/", function(req, res, next){    var task = req.body;    Task.create(task, function(err, task){        if (err) {            return res.status(400).send("err in post /task");        } else {            return res.status(200).json(task);        }    });});router.get("/", function(req, res, next){    Task.find({}, function(err, tasks){        if(err){            return res.status(400).send("err in get /task");        }else{            console.log(tasks);            return res.status(200).json(tasks);        }    })});module.exports = router;

app.js文件中申明并使用它

var task = require('./routes/task');app.use('/task', task);

同时，我们需要使用另外一个插件cors，用来处理我们收到请求的头部信息，通过命令npm install –save cors安装，在app.js代码

var cors = require('cors');app.use(cors());

们的服务器代码就完成了，使用命令npm start运行服务器。
我们可以使用postman来模拟发送请求到服务器，验证服务器是否正确接收请求并返回正确信息。

这里写图片描述

前后端连接

主要修改js部分的代码，我们创建一个Factory，专门用来跟服务器

.factory('Tasks', function($http) {  var base = "http://localhost:3000";  return {    all: function() {      return $http.get(base + "/task");    },    save: function(task) {      return $http.post(base + "/task", {title: task.title});    }  }})

在控制器中使用

.controller('TodoCtrl', function($scope, $ionicModal, Tasks) {  Tasks.all()    .success(function(tasks){      $scope.tasks = tasks;      console.log($scope.tasks);    })    .error(function(){      $scope.tasks = [];    })  // Called when the form is submitted  $scope.createTask = function(task) {    $scope.tasks.push({      title: task.title    });    Tasks.save(task)      .success(function(task){        console.log(task);      })      .error(function(){        console.log("request error");      });  };})

分别是在应用刚开始运行的时候，调用all()函数，后去所有数据库中已经存储了的task，另外就是创建新的task的时候，将新的task存储到数据库。回调函数的内容在这里不再赘述。

参考：https://dmemoing.github.io/2017/04/01/todo-document/

0 0