AngularJs: doubts implementing controller

Question

I'm implementing my first AngularJS controller in a test application and I'm having some difficulties.

I have a list of items that I'm getting from a RESTful web service and I'm trying to implement a basic CRUD logic for this items.

The list is shown in itemsList.htm page and routing config is:

app.config(function ($routeProvider) {
    $routeProvider
        .when('/items',
            {
                controller: 'ItemsController',
                templateUrl: 'app/Partials/itemsList.htm'
            })
        .when('/items/:itemID',
            {
                controller: 'ItemsController',
                templateUrl: 'app/Partials/editItem.htm'
            })
        .otherwise({ redirectTo: '/items' });
});

Then I have my ItemsController:

app.controller('ItemsController', function ($scope, $routeParams, $location, itemsService) {
    $scope.status;
    $scope.items;

    getItems();

    function getItems() {
        itemsService.getItems()
            .success(function (items) {
                $scope.items = items;   
            })
            .error(function (error) {
                $scope.status = 'Unable to load items: ' + error.message;
            });
    }

    function getItem(ID) {
        // ...  
    }
}

Now I want to add to the same controller a function that returns a certain item passing its ID and populate editItem.htm page, but I don't know I to access this functon...

I mean: how can I map the path /items/:itemID to this function? Should I implement it in a different controller and change the route config?

NOTE I usually implement my web apps using Java and Spring MVC and I usually implement a single controller for each entity in my application (for example: ItemsController, CustomersController, etc.). Is it correct to follow this rule also with AngularJs or there is some other best-practice?

sort of $scope.$on('$routeChangeSuccess', function (scope, next, current) { var path = $location.path(); }); — Whisher
– Whisher, Commented Oct 2, 2013 at 16:22

Chandermani · Accepted Answer · 2013-10-02 16:32:16Z

1

The way I would go about it would be to implement a ItemController that handles only one item at a time. Again it depends upon how the html is structured.

In any case you need to retrieve the selected item id using the $routeParams collection.

In the controller you can do

if($routeParams.itemID) {
   //you got the id. call the getItem
   getItem(itemID).success(function(item) {
       $scope.item=data;
   });
}

This piece has to be added in either ItemsController if you use the same controller, or in case you create a new controller still same check would be required.

If you are using existing ItemsController the implementation should be like

 if($routeParams.itemID) {
       //same as above code
 }
 else {
     getItems();
 }

which means you dont want to load list in the scope for single item view.

answered Oct 2, 2013 at 16:32

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

davioooh Over a year ago

What do you mean with: "to implement a ItemController that handles only one item at a time"? So what should be the right way to implement my controller? Sorry but I'm completely new to AngularJS...

Chandermani Over a year ago

ItemsController can be used for listing of items, sorting, filtering etc. For action on a single item there can be a ItemController, which can support single item actions such as create, edit, delete, update etc. You are currently using the same controller for both the scenarios\views.

davioooh Over a year ago

uh, ok... I didn't noticed the Items/Item difference... :) It's a bit strange for me, in Spring MVC I usually implement a controller for each entity (i.e. ItemsController, CustomersController, etc.). But, ok... I'll follow your suggestion. Thank you.

Collectives™ on Stack Overflow

AngularJs: doubts implementing controller

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related