Menu
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 there's more than one way to handle this, but what is the common practice in the AngularJS community for handling URLs on handling CRUD for resources. Imagine in the case of an athlete we have a URL such as the following to list all athletes:
http://example.com/athletes
To view an individual athlete:
http://example.com/athletes/1
To edit an individual athlete:
http://example.com/athletes/1/edit
To create a new athlete:
http://example.com/athletes/new
In AngularJS, is it common practice to reroute to similar URLs to create/edit/update? Would you just have one URL handle all of the CRUD type actions in one interface and never change the URL? If you were to change the URL, does that get handled via ng-click and in the click event would you use the $location object to change URLs? I'd love to be able to read up on common practices such as these, but having a difficult time in finding more recent literature on it in an AngularJS context.
** NOTE **
I totally get that you can still use RESTful routes to the backend in order to interact with server-side resources. My question is, what is the style that is recommended to use when updating URLs on the client-side. Are you using AngularJS to do that for each of the CRUD operations?
545
AngularJS CRUD (Create Read Update Delete) Operation Using MVC. Training.
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.
Built on the top of the $http service, Angular's $resource is a factory that lets you interact with RESTful backends easily. So, let's explore $resource and use it to implement CRUD operations in Angular.
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application. AngularJS has about 30 built-in services. One of them is the $location service.
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 $route service in combination with the ngView directive 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:
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.
ngView directive 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> 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 :athleteId in the route config) via the $routeParams service.
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> In older browsers that don't support the HTML5 History API your URLs would look more like http://example.com/#/athletes and http://example.com/#/athletes/1.
The $location service (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 $location will 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.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
