AngularJS Best Practices: resource
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>
</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>
AngularJS Best Practices: resource的更多相关文章
- 黄聪：AngularJS中的$resource使用与Restful资源交互（转）
原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...
- AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representat ...
- AngularJS Best Practices: SEO
Google can execute AJAX & JavaScript for indexing, you can read the below link for more detailed ...
- AngularJS Best Practices: pretty urls
By default, AngularJS will route URLs with a hashtag. For example: http://example.com/ http://exampl ...
- AngularJs练习Demo19 Resource
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- AngularJs练习Demo18 Resource
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...
- 浅谈AngularJS中使用$resource
这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了. REST是Representational ...
- AngularJS Best Practices: ng-include vs directive
For building an HTML template with reusable widgets like header, sidebar, footer, etc. Basically the ...
- AngularJS Best Practices: ui-router
ui-router is a 3rd-party module and is very powerful. It supports everything the normal ngRoute can ...
随机推荐
- UML学习（一）-----用例图
1.什么是用例图 用例图源于Jacobson的OOSE方法,用例图是需求分析的产物,描述了系统的参与者与系统进行交互的功能,是参与者所能观察和使用到的系统功能的模型图.它的主要目的就是帮助开发团队以一 ...
- poj 1141 Brackets Sequence (区间dp)
题目链接:http://poj.org/problem?id=1141 题解:求已知子串最短的括号完备的全序列 代码: #include<iostream> #include<cst ...
- Educational Round 15
A题Maximum Increase 大水题.最长连续递增子序列有多长. #include <cstdio> #include <algorithm> using namesp ...
- haohantech浩瀚盘点机“PDA无线订货开单”终端 移动现场下单APP（打印扫描一体）
手持PDA盘点机,订货的时候,用PDA上自带的激光扫描头扫描(或手输)样品的条码,然后,只需输入该款产品不同尺码的数量即可自动(或手动)发送订货数据到总部服务器.盘点机“PDA无线订货”终端功能: 1 ...
- 手动编译安装docker环境，以及偶尔出现的bug
总结安装过程如下: 前提:安装git,go,make, docker(docker中编译docker) git clone https://git@github.com/docker/docker c ...
- 【软件推荐】 Moom-窗口布局软件(V.3.2.2)【破解+汉化】
本文并非最终版本,如有更新或更正会第一时间置顶,联系方式详见文末 如果觉得本文内容过长,请前往本人 “简书” 下载地址: 软件:https://yunpan.cn/cuTg8rCMTsLT6 ...
- HTML5 标签audio添加网页背景音乐代码
<head> <meta http-equiv="Content-Type" name="viewport" content="wi ...
- ZeroMQ接口函数之 ：zmq_strerror - 获取ZMQ错误描述字符串
ZeroMQ 官方地址 :http://api.zeromq.org/4-0:zmq_strerror zmq_strerror(3) ØMQ Manual - ØMQ/4.1.0 Name zmq_ ...
- internet 协议入门
正文 1.概述 互联网的实现,分成好几层.每一层都有自己的功能,就像建筑物一样,每一层都靠下一层支持. 1.1 模型划分 首先我们需要明白的事互联网的实现是分层级的,那么这个层级的划分根据不同的模型又 ...
- 【手把手教你Maven】构建过程
Maven是一款进行 依赖管理.项目构建.信息管理 为一体的工具. 它不像Make具有复杂的命令.也不像Ant需要手动编写大量的重复代码就能进行项目的构建: 还能提供强大的依赖库管理,避免jar包混乱 ...