As I dive into my first AngularJS controller within a test application, I am encountering some challenges.
I am retrieving a list of items from a RESTful web service and working on implementing basic CRUD logic for these items.
The item list is displayed in the itemsList.htm page and the routing configuration is set as follows:
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' });
});
Next, I have defined 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, my goal is to expand this controller by adding a function that fetches a specific item based on its ID and populates the editItem.htm page. However, I am unsure how to access this function...
Essentially, how can I link the path /items/:itemID to this function?
Should I separate it into a different controller and adjust the route configuration?
NOTE: In my usual web development practice utilizing Java and Spring MVC, I typically create a single controller for each entity in the application (e.g., ItemsController, CustomersController, etc.). Is it advisable to follow the same approach with AngularJS, or are there other best practices to consider?