What's the AngularJS “way” of handling a CRUD resource
I am interested in moving a lot of my client\'s \"logic\" away from Rails routing to AngularJS. I have slight confusion in one topic and that is linking. Now, I do understand th
-
I would definitely recommend separate URLs for each operation (to enable direct linking). The ones you suggest look fine.
In AngularJS you can use the
$routeservice in combination with thengViewdirective to load the appropriate template for each operation and handle the browser location and history mechanics for you.Step 7 of the AngularJS tutorial gives an example of using Views, Routing and Templates the way I describe here. The following is a simplified version for your example:
Define the routes
In your main application script (e.g. app.js):
angular.module('AthletesApp', []). config(['$routeProvider', function($routeProvider, $locationProvider) { // Configure routes $routeProvider. when('/athletes', {templateUrl: 'partials/athletes-list.html', controller: AthleteListCtrl}). when('/athletes/:athleteId', {templateUrl: 'partials/athlete-detail.html', controller: AthleteDetailCtrl}). when('/athletes/:athleteId/edit', {templateUrl: 'partials/athlete-edit.html', controller: AthleteEditCtrl}). when('/athletes/:athleteId/new', {templateUrl: 'partials/athlete-new.html', controller: AthleteNewCtrl}). otherwise({redirectTo: '/athletes'}); // Enable 'HTML5 History API' mode for URLs. // Note this requires URL Rewriting on the server-side. Leave this // out to just use hash URLs `/#/athletes/1/edit` $locationProvider.html5Mode(true); }]);We also enable 'HTML Mode' for URLs, see note below.
2. Add an
ngViewdirective to your HTMLIn your main index.html you specify where the selected partial template will go in the overall layout:
<!doctype html> <html ng-app="AthletesApp"> ... <!-- Somewhere within the <body> tag: --> <div ng-view></div> ... </html>3. Create templates and controllers
Then you create the partial view templates and matching controllers for each of the operations. E.g. for the athlete detail view:
partials/athelete-detail.html:
<div> ... Athete detail view here </div>athleteDetailCtrl.js:
angular.module('AthletesApp').controller('AtheleteDetailCtrl', function($scope, $routeParams) { $scope.athleteId = $routeParams.athleteId; // Load the athlete (e.g. using $resource) and add it // to the scope. }You get access to the route parameter (defined using
:athleteIdin the route config) via the$routeParamsservice.4. Add links
The final step is to actually have links and buttons in your HTML to get to the different views. Just use standard HTML and specify the URL such as:
<a href="/athletes/{{athleteId}}/edit">Edit</a>Note: Standard vs Hash URLs
In older browsers that don't support the HTML5 History API your URLs would look more like
http://example.com/#/athletesandhttp://example.com/#/athletes/1.The
$locationservice (used automatically by$route) can handle this for you, so you get nice clean URLs in modern browsers and fallback to hash URLs in older browsers. You still specify your links as above and$locationwill handle rewriting them for older clients. The only additional requirement is that you configure URL Rewriting on the server side so that all URLs are rewritten to your app's main index.html. See the AngularJS $location Guide for more details.讨论(0) -
In AngularJS you can definitely use RESTful server side data sources, there is build in service called $resource.
Alternatively you can also use restangular which has additional features over $resource.
If you want to have full control you can always use $http service which is low level angular component for interacting with http.
讨论(0) -
The angular way is the restful way:
GET all http://example.com/athletes GET one http://example.com/athletes/1 POST new http://example.com/athletes PUT edit http://example.com/athletes/1 DELETE remove http://example.com/athletes/1Note that $resource also expects a few other things, like resource URLs not ending with a slash, PUT requests returning the updated resource, etc.
If your API doesn't meet these criteria, or you simply need more flexibility, you can build your own $resource-like CRUD service based on the lower-level $http service. One way of doing the latter is explained here
讨论(0) -
Option 1: $http service
AngularJS provides the $http service that does exactly what you want: Sending AJAX requests to web services and receiving data from them, using JSON (which is perfectly for talking to REST services).
To give an example (taken from the AngularJS documentation and slightly adapted):
$http({ method: 'GET', url: '/foo' }). success(function (data, status, headers, config) { // ... }). error(function (data, status, headers, config) { // ... });Option 2: $resource service
Please note that there is also another service in AngularJS, the $resource service which provides access to REST services in a more high-level fashion (example again taken from AngularJS documentation):
var Users = $resource('/user/:userId', { userId: '@id' }); var user = Users.get({ userId: 123 }, function () { user.abc = true; user.$save(); });Option 3: Restangular
Moreover, there are also third-party solutions, such as Restangular. See its documentation on how to use it. Basically, it's way more declarative and abstracts more of the details away from you.
讨论(0) -
Simply implement something that is RESTful, that is the angularJS way. If you have no idea what RESTful is or, know a little and want to know a lot more, then I would recommend that you read this article.
Basically, REST is what is understood to be, an intuitive implementation of WEB URIs, it also makes use of all HTTP verbs, their correct use actually. REST is an approach, and architecture to building web apps.
讨论(0)
加载中...
- 热议问题