What's the AngularJS “way” of handling a CRUD resource

Question

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

Answer 1

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:

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 ngView directive to your HTML

In your main index.html you specify where the selected partial template will go in the overall layout:

...
   
   

...

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:

    ... Athete detail view here

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.

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:

Edit

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/#/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.