如今的前端开发很麻烦……数量众多的框架和库必定会让您陷入困境。这个想法是要迅速而稳定地学习。 因为那是有趣的部分。 在开发中有很多东西要学习…是的，我们中的一些人不仅在学习，而且在创造很棒的东西，我希望掌握这些东西，而绝佳的机会是在学习过程中建立东西。
正如他们所说（我说的是，以防万一……对于那些仍要检查的人），
一千英里的旅程始于一步
几个月前，我在github上遇到了astesjs / todo应用程序。 astejs的家伙使用各种不同的javascript框架和库创建了todomvc应用程序。 我认为那真的很酷……请检查一下。 https://github.com/Tastejs/todomvc
那给了我一个主意….“为什么不尝试类似的东西….学习框架”，当有新的东西要学习时，然后通过在新的框架或库中编码项目来学习。
到目前为止，我已经能够完全实现angular js版本，因此，让我们看看它是如何工作的。
应用结构
在我的项目中，我决定将Node js后端集成到应用程序中，这影响了常规应用程序结构。
因此，有两个主要目录：应用程序和服务器，应用程序部分用于包含所有有角度的魔术内容，而服务器部分将包含所有服务器内容，非常简单……后端服务器脚本是由节点构建的。 在外部部分，还有索引.js，这是启动角度节点服务器的中央部分。 那么该服务器如何工作。
构建后端Api
在Node.js中构建后端脚本时，我不得不做一些研究，我决定遵循mvc模式。
我像普通的mvc那样将路由与模型分开，没什么大不了的， dotenv库用于从环境访问env文件。 所有数据库配置都进入./server/config/
服务器具有目录结构，该目录结构的第一个文件夹为配置文件夹-config，第二个为控制器，第三个为模型-Todo.js。
路由在外部文件route.js中定义。
使用express模块，将路由设置为遵循api / todo /模式。api / todo路由将链接到crud应用的所有方面，即接口路由。
基本上有4种操作
- 创建（第8行）
- 删除（第9行）
- 全部检索（第10行）
- 更新（第11行）
在第3行上调用的Todo Controller上调用了各种控制器
控制器对模型执行操作。 操作完成后，使用它们来服务前端json响应。
蛋糕
好的，在这部分我没有一个更好的名字。 但我会将其视为应用程序的蛋糕。 节点接口已完成，并与邮递员进行了测试，确认api正常运行。 现在是时候在angularjs中创建前视图了。
Angular是Google取代的MVC架构前端框架，它附带了所有很酷的功能，并且可以肯定您一定听说过它。 让我们看看它是如何工作的。 在这个项目中
结构
相对于角部的前端结构如下。
我的想法很简单，将所有棱角分明的东西放在一起。 在创建待办事项应用程序的过程中，需要以下资源。
- angular.js
- angular-resource.js
- angular-route.js
- angular-stuff.js —以上资源的串联。
这个想法更进一步。 由于我们使用的是mvc系统，因此Structure将控制器从视图中分离出来，并且也与服务分离了。 这个想法尽可能地直截了当，所以让我们看一些代码。
为了使用angular，必须将索引文件的存在及其意图通知索引文件。 开玩笑，只在场。
首先，需要的所有角形物料都被导入。 从13号线到16号线
angular-route.js使路由提供者能够在同一应用程序中使用不同的URL创建多个视图。
在这种情况下，我们只有一个外部网址，因此有点过分了。 Angular资源提供者提供了用于处理通过api路由返回的https资源的api集。（不用担心很快就会有详细的解释）。
首先，导入app.module来初始化应用程序的根目录
接下来调用app.config.js来正确配置路由和依赖项
app.config部分配置$routeProvider提供的角度路由资源。 在routeConfig json对象中设置了控制器，它指向的templateUrl也是如此。 $routeProvider具有when和$routeProvider两个回调，以跟踪url结构。 如果为’/’，则使用routeConfig参数，否则页面将重定向到’/’路由。
配置完成后，将创建控制器以执行添加待办事项，检索，更新和删除所需的大部分操作。
该配置还导入控制器在执行操作时将使用的服务。 todoStore服务
todoStore是一项在控制器核心上运行的服务，可实现控制器所需的大部分操作。 此服务在控制器中调用（依赖注入），以与节点后端进行通信，以JSON对象的形式传输（发送）和接收（获取）数据。
结论
创建该应用程序的过程使我能够根据经验学习角度js，我想说学习技能的最佳方法是使用该技能来完成一项任务…
在github上的https://github.com/Mozartted/Todomvc上查看项目
