本文共 11117 字,大约阅读时间需要 37 分钟。
angular删除节点
In the last part of our Series, we played mostly on the Node side of things dealing with application organization and structure. Today we will be handling the Angular side of things.
在我们的 Series的最后一部分中,我们主要在Node方面进行与应用程序组织和结构有关的事情。 今天,我们将处理事物的角度方面。
Here is what we'll be doing:
这是我们要做的:
This entire article will be on the frontend of our application. We used Node to create our backend RESTful API and that will not change. This is the beauty of creating an API. Frontend and backend remain independent of each other. This will also be great in the future if we ever want to use our API to build more than just a website. Maybe we would want to create a mobile app or something else in the future.
整篇文章将在我们应用程序的前端。 我们使用Node创建了后端RESTful API,并且不会改变。 这是创建API的美妙之处。 前端和后端保持彼此独立。 如果我们想使用我们的API来构建不仅仅是一个网站,那么将来这也将很棒。 也许将来我们想创建一个移动应用程序或其他东西。
Let's get started with some basic organization for our app. Nowhere near as extensive as what we did for Node. We'll just be moving our javascript files and Angular modules into separate files.
让我们从应用程序的一些基本组织开始。 没有像我们对Node所做的那样广泛。 我们将把javascript文件和Angular模块移动到单独的文件中。
Before, we had all of our Angular code in one core.js
file. This isn't what we want moving forward. We want our application to be modular so that our controller and all of our $http requests are in their own files.
以前,我们将所有Angular代码都放在一个core.js
文件中。 这不是我们想要前进的方向。 我们希望我们的应用程序是模块化的,以便我们的控制器和所有$ http请求都在它们自己的文件中。
Why modular? Having all of your functionality in different modules helps for many reason.
为什么模块化? 将您的所有功能放在不同的模块中有很多帮助。
For this tutorial, we will only be looking in our applications public
folder since that's where all the frontend code lives.
在本教程中,我们将简单的看在我们的应用程序public
文件夹,因为这就是所有的前端代码生命。
Here is how we want our new public file structure to look.
这就是我们希望新的公共文件结构看起来的样子。
-- public-------- js-------------- controllers--------------------- main.js-------------- services--------------------- todos.js-------------- core.js -------- index.html
Let's go ahead and open up our index.html
file and load up the files we need. We will also upgrade our Angular 1.0.8 to 1.2.4.
让我们继续打开我们的index.html
文件并加载所需的文件。 我们还将Angular 1.0.8升级到1.2.4。
... ...
There are many changes from 1.0.8 to 1.2.x, but they don't seem to affect our app. If you want to see a full changelog, visit the .
从1.0.8到1.2.x有很多更改,但它们似乎并不影响我们的应用程序。 如果您想查看完整的变更日志,请访问 。
Let's create our service. The to-do service is meant to interact with our Node API. We want to have all the code to get, create, or delete a to-do inside our service. This ensures that we can test this code separate of our overall application. Let's get all that $http code out of our main application file (core.js).
让我们创建我们的服务。 待办事项旨在与我们的Node API进行交互。 我们希望在我们的服务中拥有获取 , 创建或删除待办事项的所有代码。 这确保了我们可以将这些代码与整个应用程序分开进行测试。 让我们从主应用程序文件(core.js)中获取所有$ http代码。
// js/services/todos.jsangular.module('todoService', []) // super simple service // each function returns a promise object .factory('Todos', function($http) { return { get : function() { return $http.get('/api/todos'); }, create : function(todoData) { return $http.post('/api/todos', todoData); }, delete : function(id) { return $http.delete('/api/todos/' + id); } } });
That's all there is to it. We have defined our service using .factory
with three different functions. get
, create
and delete
will all return promise objects that we can use in our controller.
这里的所有都是它的。 我们使用具有三个不同功能的.factory
定义了服务。 get
, create
和delete
将全部返回可以在控制器中使用的promise对象 。
Declaring Services There are many different ways to declare a service (.service
, .factory
and .provider
). To understand the differences a little better, here's a .
声明服务有许多不同的方式申报服务( .service
, .factory
和.provider
)。 为了更好地理解这些差异,这里有一个 。
Now that we have our service, let's create our Angular module for our controller. We will be moving most of the code out of core.js
into our controller file.
现在我们有了服务,让我们为控制器创建Angular模块。 我们将把大部分代码从core.js
到我们的控制器文件中。
// js/controllers/main.jsangular.module('todoController', []) .controller('mainController', function($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; }) .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; }) .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; }) .error(function(data) { console.log('Error: ' + data); }); }; });
We have moved our controller code out of core.js
. While we now have our controller and service in their own modules, they won't be able to work together until we inject them into our main application module.
我们已经将控制器代码从core.js
。 现在,我们已经将控制器和服务放在自己的模块中,但是除非将它们注入到主应用程序模块中,否则它们将无法协同工作。
To get everything working together, we just have to load our controller and services (we did that already in our index.html), and then inject our controller and service into the main module.
为了使所有功能协同工作,我们只需要加载控制器和服务(我们已经在index.html中进行了此操作),然后将控制器和服务注入到主模块中。
core.js
file from the root directory into the core.js
文件从根目录移动到 js
folder. This ensures that all our javascript code will be located in the same location. js
文件夹中。 这样可以确保我们所有JavaScript代码都位于同一位置。 Here is the entire code for our new core.js
.
这是我们新的core.js
的完整代码 。
// js/core.jsangular.module('scotchTodo', ['todoController', 'todoService']);
That's it! You can see how easy that is to read. We have our main module scotchTodo
and then we inject our controller and service.
而已! 您会看到它很容易阅读。 我们有主要模块scotchTodo
,然后注入控制器和服务。
Now that our application is set to work together again, we need to use
现在我们的应用程序已设置为可以再次一起工作,我们需要使用
We have linked everything but we are not using our new service yet. Let's inject that into our controller and use it!
我们已链接了所有内容,但尚未使用新服务。 让我们将其注入到控制器中并使用它!
// js/controllers/main.jsangular.module('todoController', []) // inject the Todo service factory into our controller .controller('mainController', function($scope, $http, Todos) { $scope.formData = {}; // GET ===================================================================== // when landing on the page, get all todos and show them // use the service to get all the todos Todos.get() .success(function(data) { $scope.todos = data; }); // CREATE ================================================================== // when submitting the add form, send the text to the node API $scope.createTodo = function() { // validate the formData to make sure that something is there // if form is empty, nothing will happen // people can't just hold enter to keep adding the same to-do anymore if (!$.isEmptyObject($scope.formData)) { // call the create function from our service (returns a promise object) Todos.create($scope.formData) // if successful creation, call our get function to get all the new todos .success(function(data) { $scope.formData = {}; // clear the form so our user is ready to enter another $scope.todos = data; // assign our new list of todos }); } }; // DELETE ================================================================== // delete a todo after checking it $scope.deleteTodo = function(id) { Todos.delete(id) // if successful creation, call our get function to get all the new todos .success(function(data) { $scope.todos = data; // assign our new list of todos }); }; });
As you can see, the code looks very similar to how it used to be. That is because the main thing we did was move the old $http
code outside of our controller and into our service. The service will return a promise object so we can use the data using .success
promise.
如您所见,该代码看起来与以前非常相似。 那是因为我们要做的主要事情是将旧的$http
代码移到我们的控制器之外并移到我们的服务中。 该服务将返回一个承诺对象,所以我们可以通过使用数据.success
承诺。
Now we have organized the frontend of our application. We have separated controller and service and gotten our modules to work together via injection.
现在,我们已经组织了应用程序的前端。 我们将控制器和服务分开,并通过注入使我们的模块一起工作。
Our application should work the exact same as before, but when we eventually want to grow our application, it will be far more scalable and testable.
我们的应用程序应该与以前完全一样地工作,但是当我们最终想要扩展我们的应用程序时,它将具有更大的可伸缩性和可测试性。
In the next few tutorials, we will be doing more frontend work and adding filtering and searching to our application. We will also be working on the backend again and adding Node authentication with Passport.
在接下来的几篇教程中,我们将做更多的前端工作,并为我们的应用程序添加过滤和搜索功能。 我们还将再次在后端工作,并使用Passport添加Node身份验证。
翻译自:
angular删除节点
转载地址:http://ijywd.baihongyu.com/