代码改变世界

AngularJS Best Practices: resource

2015-12-17 06:15  zhangpengc  阅读(183)  评论(0)  编辑  收藏  举报

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>