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存储到数据库。回调函数的内容在这里不再赘述。
912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
