您的位置：首页 > Web前端 > AngularJS

AngularJS Best Practices: resource

2015-12-17 06:15 751 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航