造成这个原因是因为代码里有个自动生成的注释代码块：
 
// TODO Auto-generated method stub
 
我们在写方法是自动生成，就有可能自动生成这句话，导致上传Git时弹出那个框，你可以把这句话删掉，再上传就可以了。
 
 
 
这里是一个真诚的***青年技术交流QQ群:761374713***，不管你是大学生、社畜、想学习变成的其他人员，欢迎大家加入我们，一起成长，一起进步，真诚的欢迎你，不管是技术，还是人生，还是学习方法。有道无术，术亦可求，有术无道，止于术。
 

上传项目到svn，弹出对话框显示TODO check has skipped 3 files.
 No new or edited TODO items, or items located in changed text fragments were found.
 
直接选择上传就可以，虽然不知道这个问题具体是怎么来的，有大佬知道可以指导一下，谢谢

 
微软todo使用教程
 
There are many great tutorials that walk you through creating apps, from simple todo lists to fully working web apps. But how do you start your own projects from scratch? Without the safety net of a tutorial, you might feel a bit lost on what to build, or even how to get started.
 
 从简单的待办事项列表到可以正常运行的Web应用程序，都有许多很棒的教程指导您完成应用程序的创建。 但是，如何从头开始自己的项目呢？ 没有教程的安全网，您可能会对构建什么甚至入门感到有些迷茫。 
 
 
These are the steps I followed that helped me create my own projects when I was a junior developer — and also set me up with the skills I needed to become a software team lead. But first…
 
 这些是我初级开发人员时遵循的步骤，可帮助我创建自己的项目，同时还使我具备了成为软件团队负责人所需的技能。 但首先… 
 
 
 当我可以按照教程学习时，为什么还要构建自己的项目？ (Why build my own projects when I can follow tutorials?)
 
 
Good question, curious reader! Tutorials are great up to a point, but creating your own projects gives sooo many other benefits:
 
 好问题，好奇的读者！ 教程虽然很好，但是创建自己的项目还有很多其他好处： 
 
 
 这让你想 (It makes you think)
 
 
When sitting down and starting your own project, there are many things to think about.
 
 坐下来开始自己的项目时，有很多事情要考虑。 
 
 
How do I start?
 我该如何开始？ 
What will it look like?
 看起来像什么？ 
What technologies do I need?
 我需要什么技术？ 
 
And other stuff like that (we’ll talk about how to get started in a minute). This is exactly what your job as a developer will entail — designing a solution and seeing it through to the finish. Creating your own projects allows you to practice these skills, and will set you up for the start of your career.
 
 以及其他类似的内容(我们将在一分钟内讨论如何开始使用)。 这正是您作为开发人员所要做的工作-设计解决方案并彻底解决问题。 创建自己的项目使您可以练习这些技能，并为您的职业生涯做好准备 。 
 
 
 您将遇到从未存在的问题 (You’ll encounter problems you never knew existed)
 
 
Often when following a tutorial, you are exposed to the happy path — which is basically;
 
 通常，在学习教程时，您会遇到快乐的路 -基本上是这样； 
 
 

  
“OK we’re building a thing, here’s the steps to get the thing working, it works! Hurray! The End”
  
 “好，我们正在构建一个东西，这是使它工作的步骤，它可以工作！ 欢呼！ 结束” 
 
 
Which is great if you’re learning a new technology — plus it would be a pretty terrible tutorial if the thing you are building didn’t work at the end.
 
 如果您正在学习一项新技术，那就太好了；而且，如果所构建的东西最后没有用，那将是一个非常糟糕的教程。 
 
 
Unfortunately, the lives of web developer’s are not as straightforward as this. When you’re writing code, you will hit issues at some point. Plain and simple.
 
 不幸的是，Web开发人员的生活并非如此简单。 在编写代码时，有时会遇到问题。 干净利落。 
 
 
By creating your own projects, you’ll encounter problems naturally and it gives you a chance to practice overcoming them. This what developers do every day and practicing will make this a lot easier.
 
 通过创建自己的项目，您自然会遇到问题，并且有机会练习克服这些问题。 开发人员每天要做的和实践的操作将使此操作变得容易得多。 
 
 
 很好玩，您将永远学到一些东西 (It’s fun & you’ll always learn something)
 
 
We’re a lucky bunch, we developers. We can sit down to a laptop, and build whatever we want, using whatever technology we want. We can also do it more or less for free. I doubt Bill the Aerospace engineer would get a good response from his boss if he asked, “to borrow that Boeing 747 for the weekend because he wants to try out a new jet engine he made at home”.
 
 我们是开发人员，是一群幸运儿。 我们可以坐在笔记本电脑上，使用所需的任何技术构建所需的任何东西。 我们也可以或多或少地免费这样做。 我怀疑航空航天工程师比尔是否会得到老板的好评，如果他要求“周末借用那架波音747飞机，是因为他想试用自己在家制造的新型喷气发动机”。 
 
 
It’s fun to build your own projects. Something you can use, show off to friends and family, or learn from. And it’s a pretty safe hobby. It might work, it might not. You might like it, you might f*** the whole thing up. But it’s not a big deal, just throw the project files in the virtual trashcan and start again. Easy!
 
 构建自己的项目很有趣。 您可以使用的东西，向亲朋好友炫耀或学习的东西。 这是一个非常安全的爱好。 它可能会起作用，但可能不会起作用。 您可能会喜欢，您可能会整个搞砸。 但这没什么大不了的，只需将项目文件放入虚拟垃圾桶中，然后重新启动即可。 简单！ 
 
 
 谈到好东西... (On to the good stuff…)
 
 
Ok! Now we’re happy that creating our own project’s is a great way to learn and have fun. Let’s look at how to get started creating your very own projects.
 
 好！ 现在，我们很高兴创建自己的项目是学习和娱乐的好方法。 让我们看看如何开始创建自己的项目。 
 
 
 扩展您的教程项目 (Expand on your tutorial projects)
 
 
There is something intimidating about starting a brand new piece of work. You’ll sit down to a new file, and think, “what do I do first?” The nicer way to start building your own projects is to build upon your existing tutorial apps and coding exercises. This gives you a bit of a head start, as opposed to starting from a blank slate.
 
 开始全新的作品有些令人生畏。 您将坐下来查看一个新文件，然后思考：“我首先要做什么？” 开始构建自己的项目的更好的方法是在现有的教程应用程序和编码练习的基础上进行构建。 相对于从空白开始，这为您提供了一些先机。 
 
 
So, if you have completed a todo app tutorial (if you haven’t, where have you been?!), you could build upon it in whatever way you want. For example, you could:
 
 因此，如果您已经完成了todo应用程序教程(如果尚未完成，您去哪儿了！！)，则可以按照您想要的任何方式来构建它。 例如，您可以： 
 
 
Allow saving the todo list (to a database, localStorage, etc) so the user can come back it later
 允许保存待办事项列表(保存到数据库，localStorage等)，以便用户稍后再返回 
Give the user some customization options (change the color of todo items)
 为用户提供一些自定义选项(更改待办事项的颜色) 
Add login ability
 添加登录功能 
 
You get the idea — basically, use your imagination! The possibilities are endless, so throw caution to the wind and build whatever you feel like!
 
 您知道了-基本上，请发挥您的想象力！ 可能性是无止境的，因此请谨慎对待并建立自己想要的任何东西！ 
 
 
 构建您将使用的东西 (Build stuff you’ll use)
 
 
Everyone has their own ideas for a web app. Use your newly found web development skills to build your own! Write down some ideas for an app that you’ve had over the years, specifically those that you would actually use. It doesn’t have to be an overly complex app and can be as simple as a todo list.
 
 每个人对于Web应用程序都有自己的想法。 使用您新发现的Web开发技能来构建自己的技能！ 写下您多年来使用过的应用程序的一些想法，尤其是您实际使用的想法。 它不必是一个过于复杂的应用程序，并且可以像待办事项列表一样简单。 
 
 
By creating an app that you’ll use, it’ll keep you interested enough to see the project through to completion. Also, by using the app once it’s finished, you’ll naturally find ways to make it better, which gives you another project to complete— and the circle of (coding) life repeats!
 
 通过创建您将要使用的应用程序，它可以使您足够有兴趣来观看项目直至完成。 此外，通过在应用程序完成后使用它，您自然会找到使其变得更好的方法，这使您可以完成另一个项目-重复(编码)生活的整个过程！ 
 
 
Another similar approach, is to replicate a popular app that you use. You don’t have to go into the same level of detail as the app you are replicating, but see if you can get the basic functionality working. For example:
 
 另一种类似的方法是复制您使用的流行应用程序。 您不必进入与要复制的应用程序相同的详细程度，但是请查看是否可以使基本功能正常运行。 例如： 
 
 
Use the GitHub API to create your own GitHub dashboard
 使用GitHub API创建自己的GitHub仪表板 
Use the Twitter API and make your own Twitter feed
 使用Twitter API并创建自己的Twitter feed 
A web app that allows you to manage your budget
 一个网络应用程序，可让您管理预算 
 
 从小开始 (Start small)
 
 
A sure fire way to get overwhelmed when starting your own projects is to go all out and try to create massive projects. While the ambition is good, you might find yourself getting stuck and frustrated at your progress.
 
 在开始自己的项目时，不知所措的肯定方法是全力以赴并尝试创建大型项目。 虽然雄心壮志不错，但您可能会发现自己对进度感到困惑和沮丧。 
 
 
Start small for your first few projects. Instead of making a fully fledged scientific calculator, create a basic one that does simple additions and subtractions, for example. Then as you become more comfortable, add new features. Before you know it, your small project will have turned into a fully fledged app.
 
 从头几个项目开始。 例如，与其制作一个成熟的科学计算器，不如创建一个基本的计算器，该计算器可以进行简单的加法和减法。 然后，当您变得更舒适时，添加新功能。 在不知不觉中，您的小型项目将变成一个成熟的应用程序。 
 
 
This also gives you the added benefit of practicing how software is built in the real world. Small features will often be developed, tested, and deployed in increments. This is typically called Agile Development (have a nosey at freeCodeCamp.org for more info about this).
 
 这也为您提供了练习如何在现实世界中构建软件的额外好处。 小型功能通常会逐步开发，测试和部署。 这通常被称为敏捷开发 (在freeCodeCamp.org上有些麻烦   有关此的更多信息)。 
 
 
 有一个目标 (Have a goal in mind)
 
 
There is a popular quote by Leonardo da Vinci:
 
 达芬奇(Leonardo da Vinci)的一句话很流行： 
 
 

  
Art is never finished, only abandoned.
  
 艺术永远不会完成，只会被放弃。 
 
 
The same can be said for software. Once you’ve started your own project, it can often be difficult to know when to keep going, and when to stop and move onto the next one. If you start with a goal in mind, it will give you something to aim for, as opposed to feeling like you are aimlessly wandering the desert.
 
 对于软件也可以这样说。 一旦开始自己的项目，通常很难知道何时继续进行，何时停止并继续进行下一个项目。 如果您以目标为出发点，那么它会为您提供目标，而不是像您在漫无目的的沙漠中徘徊。 
 
 
So what do I mean by a goal? A goal in this sense is basically what you want to achieve with your project. Instead of simply aiming to build a GitHub dashboard you could say:
 
 那么，目标是什么意思？ 从这个意义上说，目标基本上就是您要在项目中实现的目标。 除了简单地旨在构建GitHub仪表板外，您还可以说： 
 
 

  
“I am going to build a dashboard that shows how many commits I’ve made to my own repositories last month.”
  
 “我将建立一个仪表板，以显示上个月我对自己的存储库进行了多少次提交。” 
 
 
This gives you a clear direction in which to work. Once you have reached that goal, you could add more features, or move onto another project. A goal can be anything you want:
 
 这为您提供了明确的工作方向。 一旦达到该目标，就可以添加更多功能或移至另一个项目。 目标可以是您想要的任何东西： 
 
 
“I want to learn how to write clean code”
 “我想学习如何编写简洁的代码” 
“I want to learn CSS Grid”
 “我想学习CSS网格” 
“I want to be able to call an API using React”
 “我希望能够使用React来调用API” 
“I want to learn how to write tests in Python”
 “我想学习如何用Python编写测试” 
 
BONUS TIP — remember to put everything onto your own GitHub repository, and state the goal in the description (you should put projects on your CV/Resume as well!). This will show employers that you are passionate about learning, and will also be good motivation for yourself when you look back on old projects!
 
 奖励提示—记住将所有内容放到您自己的GitHub存储库中，并在描述中说明目标( 您也应将项目放到CV / Resume中 ！)。 这将向雇主表明您对学习充满热情，并且当您回顾旧项目时也将成为您的良好动力！ 
 
 
 示例项目尝试 (Example projects to try)
 
 
Here’s some example projects to get your creative flow going.
 
 这是一些示例项目，可以使您的创意流程不断发展。 
 
 
(Quick note: I will be creating these projects myself, along with articles on how I did each one, how/why I made the decisions I made, and my general thought process. As well as completed code, of course. Make sure to subscribe to my blog to get updated when these articles are available!)
 
 (快速说明：我将自己创建这些项目，以及有关如何做每个项目，如何/为什么做出决定以及总体思考过程的文章。当然，还要完成代码。请确保当这些文章可用时，请订阅我的博客以获取更新！) 
 
 
 计算器网络应用 (Calculator web app)
 
 
Create a calculator that allows the user to perform basic operations: Add, subtract, multiply & divide. When you have got that far, you can build upon it:
 
 创建一个允许用户执行基本操作的计算器：加，减，乘和除。 当您走到这一步时，您可以在此基础上： 
 
 
Add more scientific calculations (modulus etc)
 添加更多科学计算(模量等) 
Improve the UI (HINT: CSS Grid will be your friend here)
 改善用户界面(提示：CSS Grid将是您的朋友) 
Create “undo” functionality (HINT: the react tutorial has a good example of this)
 创建“撤消”功能(提示： react教程中有一个很好的例子) 
 
 GitHub仪表板 (GitHub dashboard)
 
 
Use the GitHub API to create your own dashboard. This dashboard can be anything you want. A possible starting point would be to display information about your own GitHub account.
 
 使用GitHub API创建自己的仪表板。 该仪表板可以是您想要的任何东西。 一个可能的起点是显示有关您自己的GitHub帐户的信息。 
 
 
Total commits over the past month
 过去一个月的总提交次数 
Total number of repositories
 储存库总数 
Displays your most used/favourite language
 显示您最常用/最喜欢的语言 
 
HINT: Even though this is a client-side project, you will have to interact with an API. Use Postman or similar to get a feel for how the API works, how to authenticate requests and things like that.
 
 提示：即使这是一个客户端项目，您也必须与API交互。 使用Postman或类似工具来了解API的工作方式，如何验证请求以及类似的事情。 
 
 
 测验应用 (A Quiz app)
 
 
Create a quiz app that randomly displays a question with a multiple choice of answers to the user. If the user gets the answer correct, display a “hurray!” message, update their score, you get the idea. I like this app as the possibilities are endless when it comes to expanding on it:
 
 创建一个测验应用程序，该应用程序将向用户随机显示一个带有多种选择答案的问题。 如果用户正确回答，则显示“欢呼！” 消息，更新他们的分数，您就知道了。 我喜欢这个应用程序，因为扩展它的可能性是无限的： 
 
 
Add categories
 添加类别 
Add high scores
 增加高分 
Add a countdown
 添加倒计时 
Allow multiple players (HINT: You could go really advanced and use Socket.io to allow online play!)
 允许多个玩家(提示：您可以真正进阶，并使用Socket.io允许在线游戏！) 
 
HINT: Remember not to go overboard at the beginning! Set your goal for the initial project, and get to that point first. Then, see if you want to add more stuff or move onto something else.
 
 提示：切记不要一开始就太过分！ 为初始项目设定目标 ，并首先达到目标。 然后，查看是否要添加更多内容或移至其他内容。 
 
 
 实时天气应用 (A Real Time weather app)
 
 
Use something like Open Weather Map to create an app that displays the latest weather for a certain location in real time.
 
 使用“ 打开天气地图”之类的工具来创建可实时显示特定位置最新天气的应用。 
 
 
HINT: Try not to be put off by the term real-time. At its simplest level, this could be writing some logic that calls the api every 5 seconds and displays the data.
 
 提示：尽量不要被“实时”一词推迟。 在最简单的层次上，这可能是编写一些逻辑，该逻辑每5秒调用一次api并显示数据。 
 
 
We all know how shopping carts work, but can you build one? Display a list of products to the user, and let them add it to their cart. As a starting point, you could create functionality that:
 
 我们都知道购物车是如何工作的，但是您能制造一辆吗？ 向用户显示产品列表，然后让他们将其添加到购物车中。 首先，您可以创建以下功能： 
 
 
Let’s the user add an item from the product page to their cart
 让我们将产品页面中的商品添加到购物车中 
Shows the items in the cart
 显示购物车中的物品 
Show’s the total cost of the items in the cart
 显示购物车中物品的总费用 
 
HINT — You can simply hardcode the products that appear on the product’s page as a first step to get going.
 
 提示—您可以简单地对出现在产品页面上的产品进行硬编码，作为开始操作的第一步。 
 
 
 更多项目！ (More projects!)
 
 
If you’re looking to get your hands on more projects, check out this GitHub repo . There are projects for different levels that will keep you busy for a while!
 
 如果您希望获得更多项目，请查看此GitHub存储库 。 有不同级别的项目会让您忙一阵子！ 
 
 
Thanks for reading!
 
 谢谢阅读！ 
 
 
To get the latest guides, tips, and courses for junior developers straight to your inbox (as well as some exclusive stuff!), make sure to join the mailing list at www.chrisblakely.dev!
 
 要直接为初级开发人员获取最新的指南，技巧和课程(以及一些独家的东西！)，请确保加入www.chrisblakely.dev的邮件列表！ 
 
 
Originally published at www.chrisblakely.dev on April 7, 2019.
 
 
 最初于2019年4月7日发布在www.chrisblakely.dev 。 
 
 

  
翻译自: https://www.freecodecamp.org/news/todo-tutorials-can-be-fun-but-heres-how-to-build-your-own-projects-from-scratch-de6838fa9f23/
 
 
微软todo使用教程

 
idea 创建todo
 
Today we will be creating a very simple Todo application using the MEAN (Mongo, Express, Angular, Node) stack. We will be creating:
 
 
 今天，我们将使用MEAN（Mongo，Express，Angular，Node）堆栈创建一个非常简单的Todo应用程序。 我们将创建： 
 
 
Single page application to create and finish todos
 单页应用程序来创建和完成待办事项 
Storing todos in a MongoDB using Mongoose
 使用Mongoose将待办事项存储在MongoDB中 
Using the Express framework
 使用Express框架 
Creating a RESTful Node API
 创建一个RESTful Node API 
Using Angular for the frontend and to access the API
 使用Angular作为前端并访问API 
 

   This article has been updated for 
   本文已针对
  ExpressJS 4.0. 
  ExpressJS 4.0更新。 
 
 
While the application is simple and beginner to intermediate level in its own right, the concepts here can apply to much more advanced apps. The biggest things we should focus on is using Node as an API and Angular as the frontend. Making them work together can be a bit confusing so this tutorial should help alleviate some confusion. Buckle those seatbelts; this could be a long one.
 
 
 尽管该应用程序简单易行，并且具有初学者到中级的水平，但是此处的概念可以应用于更高级的应用程序。 我们应该重点关注的最大事情是使用Node作为API，使用Angular作为前端。 使它们协同工作可能会有些混乱，因此本教程应有助于减轻一些混乱。 扣紧那些安全带； 这可能会很长。 
 
 
 我们将要建设的 (What We'll Be Building)
 
 

  
   

    
   
 
 
 基本设置 (Base Setup)
 
 
 档案结构 (File Structure)
 
 
We are going to keep the file structure very simple and put most of the code for our Node application into the server.js file. In larger applications, this should be broken down further to separate duties. Mean.io is a good boilerplate to see best practices and how to separate file structure. Let's go ahead and create our simpler file structure and edit the files as we go along.
 
 
 我们将使文件结构非常简单，并将Node应用程序的大部分代码放入server.js文件中。 在较大的应用程序中，应将其进一步分解为单独的职责。 Mean.io是查看最佳实践以及如何分隔文件结构的好样板。 让我们继续创建更简单的文件结构，并在进行过程中编辑文件。 
 
 
- public            <!-- holds all our files for our frontend angular application -->
    ----- core.js       <!-- all angular code for our app -->
    ----- index.html    <!-- main view -->
    - package.json      <!-- npm configuration to install dependencies/modules -->
    - server.js         <!-- Node configuration -->
 
 
 安装模块 (Installing Modules)
 
 
In Node, the package.json file holds the configuration for our app. Node's package manager (npm) will use this to install any dependencies or modules that we are going to use. In our case, we will be using Express (popular Node framework) and Mongoose (object modeling for MongoDB).
 
 
 在Node中， package.json文件保存了我们应用程序的配置。 Node的程序包管理器（npm）将使用它来安装我们将要使用的所有依赖项或模块。 在我们的案例中，我们将使用Express （流行的Node框架）和Mongoose （用于MongoDB的对象建模）。 
 
 
{
  "name"         : "node-todo",
  "version"      : "0.0.0",
  "description"  : "Simple todo application.",
  "main"         : "server.js",
  "author"       : "Scotch",
  "dependencies" : {
    "express"    : "~4.7.2",
    "mongoose"   : "~3.6.2",
    "morgan"     : "~1.2.2",
    "body-parser": "~1.5.2",
    "method-override": "~2.1.2"
    }
}
 
 
Now if we run npm install, npm will look at this file and install Express and Mongoose.
 
 
 现在，如果我们运行npm install ，npm将查看该文件并安装Express和Mongoose。 
 
 

  
   

    
   
 
 
 节点配置 (Node Configuration)
 
 
In our package.json file, we told it that our main file would be server.js. This is the main file for our Node app and where we will configure the entire application.
 
 
 在package.json文件中，我们告诉我们主文件将是server.js 。 这是Node应用程序的主文件，我们将在其中配置整个应用程序。 
 
 
This is the file where we will:
 
 
 这是我们将要执行的文件： 
 
 
Configure our application
 配置我们的应用程序 
Connect to our database
 连接到我们的数据库 
Create our Mongoose models
 创建我们的猫鼬模型 
Define routes for our RESTful API
 为我们的RESTful API定义路由 
Define routes for our frontend Angular application
 为我们的前端Angular应用程序定义路由 
Set the app to listen on a port so we can view it in our browser
 将应用程序设置为侦听端口，以便我们可以在浏览器中查看它 
 
For now, we will just configure the app for Express, our MongoDB database, and listening on a port.
 
 
 现在，我们仅将应用程序配置为Express，我们的MongoDB数据库并在端口上侦听。 
 
 
// server.js

    // set up ========================
    var express  = require('express');
    var app      = express();                               // create our app w/ express
    var mongoose = require('mongoose');                     // mongoose for mongodb
    var morgan = require('morgan');             // log requests to the console (express4)
    var bodyParser = require('body-parser');    // pull information from HTML POST (express4)
    var methodOverride = require('method-override'); // simulate DELETE and PUT (express4)

    // configuration =================

    mongoose.connect('mongodb://node:nodeuser@mongo.onmodulus.net:27017/uwO3mypu');     // connect to mongoDB database on modulus.io

    app.use(express.static(__dirname + '/public'));                 // set the static files location /public/img will be /img for users
    app.use(morgan('dev'));                                         // log every request to the console
    app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
    app.use(bodyParser.json());                                     // parse application/json
    app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
    app.use(methodOverride());

    // listen (start app with node server.js) ======================================
    app.listen(8080);
    console.log("App listening on port 8080");
 
 
Just with that bit of code, we now have an HTTP server courtesy of Node. We have also created an app with Express and now have access to many benefits of it. In our app.configure section, we are using express modules to add more functionality to our application.
 
 
 仅需少量的代码，我们现在就拥有一个由Node提供的HTTP服务器。 我们还使用Express创建了一个应用程序，现在可以使用它的许多好处。 在我们的app.configure部分中，我们使用快速模块向我们的应用程序添加更多功能。 
 
  
  
 
 数据库设置 (Database Setup)
 
 
We will be using a remote database hosted on Modulus.io. They provide a great service and give you $15 upfront to use as you see fit. This is great for doing testing and creating databases on the fly.
 
 
 我们将使用Modulus.io上托管的远程数据库。 他们提供优质的服务，并给您15美元的预付款，以供您酌情使用。 这非常适合即时进行测试和创建数据库。 
 
 
Modulus will provide the database URL you need and you can use mongoose.connect to connect to it. That's it.
 
 
 Modulus将提供您所需的数据库URL，您可以使用mongoose.connect进行连接。 而已。 
 
 
 启动您的应用程序！ (Start Your App!)
 
 
Now that we have our package.json and server.js started up, we can start up our server and see what's going on. Just go into your console and use the following command:
 
 
 现在我们已经启动了package.json和server.js ，我们可以启动服务器，看看发生了什么。 只需进入控制台并使用以下命令： 
 
 
node server.js Now you have a server listening on port 8080. You can't see anything in your browser at http://localhost:8080 yet since we didn't configure our application to output anything. But it's a start!
 
 
 node server.js现在，您有一个服务器正在侦听端口8080。由于我们没有将应用程序配置为输出任何内容，因此您无法在浏览器中的http：// localhost：8080看到任何内容。 但这是一个开始！ 
 
 
 
   
  Automatically restart server when files change: By default, node will not monitor for file changes after your server has been started. This means you'd have to shut down and start the server every time you made a file change. This can be fixed with 
  nodemon. To use: install nodemon globally 
  npm install -g nodemon. Start your server with 
  nodemon server.js now. Smooth sailing from there. 
 
 
 
 
   
  文件更改时自动重新启动服务器：默认情况下， 
  启动服务器后 ，节点将不监视文件更改。 这意味着每次更改文件时都必须关闭并启动服务器。 这可以用
  nodemon修复 。 要使用：全局安装nodemon 
  npm install -g nodemon 。 立即使用
  nodemon server.js启动服务器。 从那里航行顺畅。 
 
 
 
 申请流程 (Application Flow)
 
 
Now a brief overview of how all our moving parts will work together. There are a lot of different ideas and technologies involved in this application that it is easy to get mixed up with them all. In our diagram below, we explain a bit of the separation of tasks and how the parts tie in together.
 
 
 现在简要概述一下我们所有的运动部件将如何协同工作。 此应用程序涉及许多不同的思想和技术，很容易将它们混淆在一起。 在下面的图表中，我们解释了一些任务分离以及各部分如何结合在一起。 
 
 

  
   

    
   
 
 
Angular is on its own in the frontend. It accesses all the data it needs through the Node API. Node hits the database and returns JSON information to Angular based on the RESTful routing.
 
 
 Angular在前端是独立的。 它通过Node API访问所需的所有数据。 节点访问数据库，并基于RESTful路由将JSON信息返回到Angular。 
 
 
This way, you can separate the frontend application from the actual API. If you want to extend the API, you can always build more routes and functions into it without affecting the frontend Angular application. This way you can eventually build different apps on different platforms since you just have to hit the API.
 
 
 这样，您可以将前端应用程序与实际的API分开。 如果要扩展API，则始终可以在其中构建更多路由和功能，而不会影响前端Angular应用程序。 这样，您最终可以在不同的平台上构建不同的应用程序，因为您只需要点击API。 
 
 
 创建我们的节点API (Creating Our Node API)
 
 
Before we get to the frontend application, we need to create our RESTful API. This will allow us to have an api that will get all todos, create a todo, and complete and delete a todo. It will return all this information in JSON format.
 
 
 在进入前端应用程序之前，我们需要创建我们的RESTful API。 这将使我们拥有一个将获取所有 待办事项 ， 创建待办事项以及完成并删除待办事项的api。 它将以JSON格式返回所有这些信息。 
 
 
 待办事项模型 (Todo Model)
 
 
We must define our model for our Todos. We'll keep this simple. After the configuration section and before the listen section, we'll add our model.
 
 
 我们必须为Todos定义模型。 我们将保持简单。 在配置部分之后和侦听部分之前，我们将添加模型。 
 
 
// define model =================
    var Todo = mongoose.model('Todo', {
        text : String
    });
 
 
That is all we want. Just the text for the todo. MongoDB will automatically generate an _id for each todo that we create also.
 
 
 那就是我们想要的。 只是待办事项的文字。 MongoDB将为我们创建的每个待办事项自动生成一个_id 。 
 
 
 RESTful API路由 (RESTful API Routes)
 
 
Let's generate our Express routes to handle our API calls.
 
 
 让我们生成Express路由来处理API调用。 
 
 
// server.js
...

// routes ======================================================================

    // api ---------------------------------------------------------------------
    // get all todos
    app.get('/api/todos', function(req, res) {

        // use mongoose to get all todos in the database
        Todo.find(function(err, todos) {

            // if there is an error retrieving, send the error. nothing after res.send(err) will execute
            if (err)
                res.send(err)

            res.json(todos); // return all todos in JSON format
        });
    });

    // create todo and send back all todos after creation
    app.post('/api/todos', function(req, res) {

        // create a todo, information comes from AJAX request from Angular
        Todo.create({
            text : req.body.text,
            done : false
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });

    });

    // delete a todo
    app.delete('/api/todos/:todo_id', function(req, res) {
        Todo.remove({
            _id : req.params.todo_id
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });
    });

...
 
 
Based on these routes, we've built a table to explain how a frontend application should request data from the API.
 
 
 基于这些路由，我们构建了一个表来解释前端应用程序应如何从API请求数据。 
 
 
 HTTP Verb 
 URL 
 Description 
 GET 
 /api/todos 
 Get all of the todos 
 POST 
 /api/todos 
 Create a single todo 
 DELETE 
 /api/todos/:todo_id 
 Delete a single todo 
 
 
 HTTP动词 
 网址 
 描述 
 得到 
 / api / todos 
 获取所有待办事项 
 开机自检 
 / api / todos 
 创建一个待办事项 
 删除 
 / api / todos /：todo_id 
 删除一个待办事项 
 
 
Inside of each of our API routes, we use the Mongoose actions to help us interact with our database. We created our Model earlier with var Todo = mongoose.model and now we can use that to find, create, and remove. There are many more things you can do and I would suggest looking at the official docs to learn more.
 
 
 在我们的每个API路由中，我们使用Mongoose操作来帮助我们与数据库进行交互。 我们之前使用var Todo = mongoose.model创建了模型，现在可以使用它来查找 ， 创建和删除 。 您还可以做更多的事情，我建议您看一下官方文档以了解更多信息。 
 
 
Our API is done! Rejoice! If you start up your application, you can interact with it at localhost:8080/api/todos to get all the todos. There won't be anything currently since you haven't added any.
 
 
 我们的API已完成！ 麾！ 如果启动应用程序，则可以在localhost:8080/api/todos与之交互以获取所有待办事项。 由于您尚未添加任何内容，因此目前没有任何内容。 
 
 
 Angular的前端应用程序 (Frontend Application with Angular)
 
 
We have created a Node application, configured our database, generated our API routes, and started a server. So much already done and still a little bit longer to go!
 
 
 我们已经创建了Node应用程序 ， 配置了数据库 ， 生成了API路由 ，并启动了服务器 。 已经完成了很多工作，还有很长的路要走！ 
 
 
The work that we've done so far can stand on its own as an application. It can be an API we use let applications and users connect with our content.
 
 
 到目前为止，我们所做的工作可以作为应用程序独立存在。 它可以是我们用来让应用程序和用户与我们的内容连接的API。 
 
 
We want to be the first to use our brand new API that we've just created. This is one of my favorite terms that I learned about last month: We will be dogfooding. We could treat this as we are our very first client to use our new API. We are going to keep this simple so we'll have just our index.html and core.js to define our frontend.
 
 
 我们希望成为第一个使用我们刚刚创建的全新API的人。 这是我上个月了解到的我最喜欢的术语之一：我们将成为狗粮 。 我们可以将其视为第一位使用新API的客户端。 我们将使其保持简单，以便仅使用index.html和core.js定义前端。 
 
 
 定义前端路由 (Defining Frontend Route)
 
 
We have already defined our API routes. Our application's API is accessible from /api/todos, but what about our frontend? How do we display the index.html file at our home page?
 
 
 我们已经定义了API路由。 我们的应用程序的API可从/api/todos访问，但是我们的前端呢？ 我们如何在主页上显示index.html文件？ 
 
 
We will add one route to our server.js file for the frontend application. This is all we need to do since Angular will be making a single page application and handle the routing.
 
 
 我们将为前端应用程序向我们的server.js文件添加一条路由。 这是我们需要做的所有事情，因为Angular将制作一个单页应用程序并处理路由。 
 
 
After our API routes, and before the app.listen, add this route:
 
 
 在我们的API路由之后，在app.listen之前，添加以下路由： 
 
 
// server.js
...
    // application -------------------------------------------------------------
    app.get('*', function(req, res) {
        res.sendfile('./public/index.html'); // load the single view file (angular will handle the page changes on the front-end)
    });
...
 
 
This will load our single index.html file when we hit localhost:8080.
 
 
 当我们点击localhost:8080时，这将加载我们的单个index.html文件。 
 
 
 设置Angular core.js (Setting Up Angular core.js)
 
 
Let's go through our Angular setup first. We have to create a module, create a controller, and define functions to handle todos. Then we can apply to view.
 
 
 让我们首先进行Angular设置。 我们必须创建一个模块 ， 创建一个控制器 ，并定义函数来处理待办事项 。 然后我们可以申请查看 。 
 
 
// public/core.js
var scotchTodo = angular.module('scotchTodo', []);

function mainController($scope, $http) {
    $scope.formData = {};

    // when landing on the page, get all todos and show them
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    // when submitting the add form, send the text to the node API
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // clear the form so our user is ready to enter another
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    // delete a todo after checking it
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

}
 
 
We create our Angular module (scotchApp) and controller (mainController).
 
 
 我们创建了Angular模块（ scotchApp ）和控制器（ mainController ）。 
 
 
We also create our functions to get all todos, create a todo, and delete a todo. All these will be hitting the API we just created. On page load, we will GET /api/todos and bind the JSON we receive from the API to $scope.todos. We will then loop over these in our view to make our todos.
 
 
 我们还创建函数以获取所有 待办事项 ， 创建待办事项和删除待办事项 。 所有这些都会影响我们刚刚创建的API。 在页面加载时，我们将GET /api/todos并将从API收到的JSON绑定到$scope.todos 。 然后，我们将循环查看这些内容以完成待办事项。 
 
 
We'll follow a similar pattern for creating and deleting. Run our action, remake our todos list.
 
 
 我们将遵循类似的创建和删除模式。 运行我们的动作，重新制作待办事项列表。 
 
 
 前端视图index.html (Frontend View index.html)
 
 
Here we will keep it simple. This is the HTML needed to interact with Angular. We will:
 
 
 在这里，我们将使其保持简单。 这是与Angular交互所需HTML。 我们会： 
 
 
Assign Angular module and controller
 分配Angular模块和控制器 
Initialize the page by getting all todos
 通过获取所有待办事项来初始化页面 
Loop over the todos
 循环待办事项 
Have a form to create todos
 有创建待办事项的表格 
Delete todos when they are checked
 检查待办事项时删除待办事项 
 
<!-- index.html -->
<!doctype html>

<!-- ASSIGN OUR ANGULAR MODULE -->
<html ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->

    <title>Node/Angular Todo App</title>

    <!-- SCROLLS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>

    <!-- SPELLS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>

</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="mainController">
    <div class="container">

        <!-- HEADER AND TODO COUNT -->
        <div class="jumbotron text-center">
            <h1>I'm a Todo-aholic <span class="label label-info">{{ todos.length }}</span></h1>
        </div>

        <!-- TODO LIST -->
        <div id="todo-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">

                <!-- LOOP OVER THE TODOS IN $scope.todos -->
                <div class="checkbox" ng-repeat="todo in todos">
                    <label>
                        <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                    </label>
                </div>

            </div>
        </div>

        <!-- FORM TO CREATE TODOS -->
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="I want to buy a puppy that will love me forever" ng-model="formData.text">
                    </div>

                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button>
                </form>
            </div>
        </div>

    </div>

</body>
</html>
 
 
Take a look at what we have.
 
 
 看看我们有什么。 
 
 

  
   

    
   
 
 
 结论 (Conclusion)
 
 
Now we have a fully working application that will show, create, and delete todos all via API (that we built!). That was quite a day. We've done so much. Just an overview of what we've accomplished:
 
 
 现在，我们有了一个可以正常运行的应用程序，它将通过API（我们自己构建的）显示，创建和删除待办事项。 那真是一天。 我们做了很多。 只是我们已完成的工作的概述： 
 
 
RESTful Node API using Express
 使用Express的RESTful Node API 
MongoDB interaction using mongoose
 使用猫鼬的MongoDB交互 
Angular AJAX $http calls
 Angular AJAX $ http调用 
Single page application w/ no refreshes
 单页应用程序，无刷新 
Dogfooding (sorry, I really like that word)
 狗食（对不起，我真的很喜欢这个词） 
 
 测试应用 (Test the Application)
 
 
Go ahead and download the code on Github and tweak it or test it. To get it all up and running:
 
 
 继续并在Github上下载代码并对其进行调整或测试。 要使其全部正常运行： 
 
 
Make sure you have Node and npm installed
 确保已安装Node和npm 
Clone the repo: git clone git@github.com:scotch-io/node-todo
 克隆仓库： git clone git@github.com:scotch-io/node-todo 
Install the application: npm install
 安装应用程序： npm install 
Start the server: node server.js
 启动服务器： node server.js 
View in your browser at http://localhost:8080
 在浏览器中查看位于http://localhost:8080 
 
I hope this was insightful on how to have lots of moving parts work together. In the future, we will look at separating our server.js file since that got a little crazy.
 
 
 我希望这对如何使许多活动部件协同工作很有见地。 将来，我们将着眼于分离server.js文件，因为这样做有点疯狂。 
 
 
 进一步阅读如果您对更多MEAN堆栈应用程序感兴趣，我们编写了指南，以帮助您开始构建自己的MEAN堆栈基础。 (Further Reading If you are interested in more MEAN stack applications, we've written up a guide to get you started in building your own MEAN stack foundation.)
 
 
Setting Up a MEAN Stack Single Page Application
 
 
 设置MEAN Stack单页应用程序 
 
 

  Edit #1: Removing ng-init 
  编辑＃1：删除ng-init 
 
 

  Node and Angular To-Do App series. 
  Node and Angular To-Do App系列的一部分。 
  
 Creating a Single Page To-do App with Node and Angular 
 使用节点和角度创建单页待办事项应用程序 
 Node Application Organization and Structure 
 节点应用程序的组织和结构 
 Angular Modules: Controllers and Services 
 角模块：控制器和服务 
 
 

  
翻译自: https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular
 
 
idea 创建todo