A factory which creates a resource object that lets you interact with RESTful server-side data sources.
The returned resource object has action methods which provide high-level behaviors without the need to interact with the low level $http service.
Requires the ngResource module to be installed.
A resource "class" object with methods for the default set of resource actions optionally extended with custom actions. The default set contains these actions:
{ 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} }
Let's try to use that
_Layout.cshtml
<!DOCTYPE html> <html ng-app="app"> <head> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <base href="/"> </head> <body> <!--<ul> <li> <a href="#/users">Users</a> </li> <li> <a href="#/roles">Roles</a> </li> </ul>--> <ul> <li> <a ui-sref="users">Users</a> </li> <li> <a ui-sref="roles">Roles</a> </li> </ul> <ul> <li> <a href="/users">Users</a> </li> <li> <a href="/roles">Roles</a> </li> </ul> @RenderBody() <script type="text/javascript" src="/Scripts/libs/angular/angular.min.js"></script> <!--<script type="text/javascript" src="/Scripts/libs/angular/angular-route.min.js"></script>--> <script type="text/javascript" src="/Scripts/libs/angular/angular-resource.min.js"></script> <script type="text/javascript" src="/Scripts/libs/angular-ui/ui-router/angular-ui-router.min.js"></script> <script type="text/javascript" src="/Scripts/app/app.js"></script> <script type="text/javascript" src="/Scripts/app/components/users/app.users.js"></script> <script type="text/javascript" src="/Scripts/app/components/users/app.users.routes.js"></script> <script type="text/javascript" src="/Scripts/app/components/users/services/user.service.js"></script> <script type="text/javascript" src="/Scripts/app/components/users/controllers/user.controller.js"></script> <script type="text/javascript" src="/Scripts/app/components/roles/app.roles.js"></script> <script type="text/javascript" src="/Scripts/app/components/roles/app.roles.routes.js"></script> <script type="text/javascript" src="/Scripts/app/components/roles/controllers/role.controller.js"></script> </body> </html>
app.users.js
(function() { 'use strict'; angular .module('app.users', [ //'ngRoute', 'ngResource', "ui.router" ]); })();
user.service.js
(function() { 'use strict'; angular .module('app.users') .factory('UserService', ['$resource', function($resource) { return $resource(('/api/users/:id'), { id: '@Id' }, { list: { method: 'POST', url: '/api/users/list', isArray: true }, get: { method: 'GET' }, getNew: { method: 'GET', url: '/api/users/getnew' }, create: { method: 'POST' }, update: { method: 'PUT' }, delete: { method: 'DELETE' } }); }]); })();
user.controller.js
(function() { 'use strict'; angular .module('app.users') .controller('UserController', ['$scope', 'UserService', function($scope, userService) { $scope.users = userService.list(); }]); })();
user-list.tpl.html
<h2>Users</h2> <table> <thead> <tr> <th> First name </th> <th> Last name </th> <th> Email </th> </tr> </thead> <tbody> <tr ng-repeat="user in users"> <td> {{user.FirstName}} </td> <td> {{user.LastName}} </td> <td> {{user.Email}} </td> </tr> </tbody> </table>