servicio - AngularJS mejores prácticas REST/CRUD

consumir servicio rest angular 4

Question

¿Cuál es la mejor práctica de realizar operaciones CRUD a través de REST con AngularJS?

Especialmente lo que es el Camino Angular aquí. Con esto me refiero a la forma en que se usa el código mínimo y la configuración angular más predeterminada para lograr esto.

Sé $ resource y es operaciones por defecto. Donde no estoy seguro es cómo implementar / nombrar los puntos finales y qué controladores usar.

Para este ejemplo, me gustaría implementar un sistema simple de administración de usuarios que crea / actualiza / elimina / enumera usuarios. Ya que estoy implementando los puntos finales del servidor por mí mismo, soy completamente libre de hacerlo de la manera más angulosa y amigable.

Lo que me gusta como respuesta es algo como:

Puntos finales del servidor:

GET /service/users -> array of users
GET /service/user/new -> return an empty user with default values which has no id
POST /service/user/new -> store a new user and create an id. return the saved user.
POST /service/user/:ID -> save an existing user. Return the saved user
DELETE /service/user/:ID -> delete an existing user

Servicios Angulares:

.factory( ''User'', [ ''$resource'', function( $resource ){
return $resource( ''/service/user/:userId'', { userId: ''@id'' } )
[...]
}])

Enrutamiento

.when( ''/users'', {
templateUrl: BASE + ''partials/user-list.html'',
controller: ''UserListCtrl'' } )
.when( ''/user/new'', {
templateUrl: BASE + ''partials/user-edit.html'',
controller: ''UserNewCtrl'' } )
.when( ''/user/:userId'', {
templateUrl: BASE + ''partials/user-edit.html'',
controller: ''UserEditCtrl'' } )
...

Controladores:

UserListCtrl:
$scope.data = User.get(...)
UserNewCtrl:
$scope.user = User.get( { userId: "new" } )
...

Tenga en cuenta que no me interesa la opinión sobre cuál es la mejor manera (tm) de hacer esto, pero me gustaría saber cuál es la forma prevista Angular (que creo que debería producir el menor código porque puede usar la mayoría de las opciones predeterminadas) .

EDITAR:

Estoy buscando la imagen completa . Lo que me encantaría sería una respuesta como, por ejemplo: "Puede hacer esto usando 3 puntos finales [...] en línea, 2 rutas [...] y 2 controladores [...] si lo hace de esta manera usando los valores predeterminados ... "

Answer 1

Creo que lo que está buscando se puede encontrar en http://www.synthjs.com/

• Cree fácilmente nuevos recursos RESTful API simplemente creando carpetas y nombrando funciones de una determinada manera.
• Devuelva datos o promesas de estas funciones y se representarán al cliente como JSON.
• Lanzar un error, y será registrado. Si se ejecuta en modo dev, el error también se devolverá al cliente.
• Cargue previamente los datos del modelo angular en la carga de la página (guardando un viaje de ida y vuelta adicional).
• Cargue previamente la vista html en la carga de la página (¡se guarda otro viaje de ida y vuelta adicional!)
• Una estructura de proyecto simplificada donde el código de front-end (código angular, html, css, paquetes de bower, etc.) se encuentra en la carpeta ''front'' y el código de back-end (código de nodo y paquetes de nodo) en la carpeta ''back''.
• Una herramienta de línea de comandos para instalar paquetes de terceros, utilizando npm + bower, que actualiza automáticamente los archivos de manifiesto.
• Auto compilación de activos a petición de dev, y precompilación de prod (incluyendo minification y ngmin). Reinicia automáticamente el servidor cuando se detectan cambios.
• Admite varias plantillas de back-end y front-end para ayudar a que un nuevo proyecto avance rápidamente.

Answer 2

Mi investigación sobre una búsqueda similar me ha llevado a este proyecto "angular-schema-form" https://github.com/Textalk/angular-schema-form .

Para este enfoque ... Usted crea un esquema JSON que describe sus datos. Luego auméntelo con otra pequeña estructura JSON que describa un "formulario" (es decir, vea información específica que no pertenece al esquema de datos) y cree una IU (formulario) para usted.

Una ventaja interesante es que el esquema también es útil para validar los datos (del lado del cliente y del servidor), por lo que es una ventaja.

Tienes que averiguar qué eventos deberían activar GET / POST / ... de nuevo a tu API. pero esa sería su preferencia, por ejemplo. Presione la API para cada pulsación de tecla O el clásico botón [Enviar] POST estilo posterior O algo intermedio con un guardado automático programado.

Para mantener esta idea, creo que es posible usar StrongLoop para hacer una API rápida, que (de nuevo) usa el esquema de sus datos (aumentado con algunos detalles de almacenamiento) para definir la API.

no <3 usos de ese esquema, consulte [ http://json-schema.org/] que es fundamental para este enfoque.

(leer: no menos de tres :)

Answer 3

No hay una forma prescrita angular para lo que está pidiendo. Depende de usted determinar el detalle de la implementación.

Por lo general, solo uso dos controladores y plantillas por recurso:

1. ListController
2. Controlador de formulario

El controlador de formulario se utiliza para las operaciones de edición y creación. Utilice la opción de resolve en sus definiciones de ruta para pasar entre User.get() o User.new() y una User.new() indica si se trata de una operación de edición o creación. Este indicador se puede usar dentro de su FormController para decidir a qué método de guardado llamar. Aquí hay un ejemplo simple:

.when( ''/users'', {
templateUrl: BASE + ''partials/user-list.html'',
controller: ''UserListCtrl'' } )
.when( ''/user/new'', {
templateUrl: BASE + ''partials/user-form.html'',
resolve: {
data: [''User'', function(User) { return User.new(); }],
operation: ''create''
}
controller: ''UserFormCtrl'' } )
.when( ''/user/:userId'', {
templateUrl: BASE + ''partials/user-form.html'',
resolve: {
data: [''User'', ''$route'', function(User, $route) { return User.get($route.current.params.userId); }],
operation: ''edit''
}
controller: ''UserFormCtrl'' } )

Y su controlador de formulario:

app.controller(''UserFormCtrl'', [''$scope'', ''data'', ''operation'', function($scope, data, operation){
$scope.data = data;
$scope.save = function() {
if (operation === ''edit'') {
// Do you edit save stuff
} else {
// Do you create save stuff
}
}
}]);

Puede ir un paso más allá y crear una lista base y un controlador de formulario para mover cosas como el manejo de errores, las notificaciones de validación del lado del servidor, etc. De hecho, para la mayoría de las operaciones CRUD incluso puede mover la lógica de guardado a este controlador base.

Answer 4

Tal vez estás mezclando las cosas. Las operaciones de CRUD a nivel de API se realizan usando $ resource y pueden o no asignarse a la interfaz de usuario. Entonces, usando $resouce si define recurso como

var r = $resource(''/users/:id'',null, {''update'': { method:''PUT'' }});
r.query() //does GET on /users and gets all users
r.get({id:1}) // does GET on /users/1 and gets a specific user
r.save(userObject) // does a POST to /users to save the user
r.update({ id:1 }, userObject) // Not defined by default but does PUT to /users/1 with user object.

Como ve, la API está llena de recursos, pero no está vinculada de ninguna manera a ninguna vista de UI.

Para la vista, puede utilizar la convención que ha definido, pero Angular no proporciona nada específico.