I am using UI-Router module to configure the States. I got multiple states working and route to a controller (TasksCtrl) and render in a template (TasksPendingTable). I need to have this template used by another controller (TaskSearchCtrl). Is it possible? Here is my States configuration.
/// <reference path="E:\Work\myApp\AngularSPA\AngularSPA\Views/TasksEndedTable.cshtml" />
/// <reference path="E:\Work\myApp\AngularSPA\AngularSPA\Views/TasksEndedTable.cshtml" />
'use strict';
angular.module('myApp', ['ui.router', 'myApp.controllers', 'myApp.filters', 'ui.bootstrap'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider)
{
$stateProvider
.state('tasksPending', {
url: '/tasksPending',
templateUrl: 'views/TasksPendingTable.cshtml',
controller: 'TasksCtrl'
})
.state('tasksOverdue', {
url: '/tasksOverdue',
templateUrl: 'views/TasksPendingTable.cshtml',
controller: 'TasksCtrl'
})
.state('tasksCompleted', {
url: '/tasksCompleted',
templateUrl: 'views/TasksPendingTable.cshtml',
controller: 'TasksCtrl'
})
.state('tasksCancelled', {
url: '/tasksCancelled',
templateUrl: 'views/TasksPendingTable.cshtml',
controller: 'TasksCtrl'
})
.state('taskSearchForm', {
url: '/tasksSearchForm',
templateUrl: 'views/taskSearch.cshtml',
controller: 'TaskSearchCtrl'
})
.state('taskSearchResult', {
url: '/tasksSearchResult',
templateUrl: 'views/TasksPendingTable.cshtml',
controller: 'TaskSearchCtrl'
})
.state('taskEdit', {
url: '/tasks/:id/Edit',
templateUrl: 'views/tasksEdit.cshtml',
controller: 'TaskEditCtrl'
})
.state('taskAdd', {
url: '/tasks/Add',
templateUrl: 'views/taskAdd.cshtml',
controller: 'TaskAddCtrl'
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'views/404',
controller: 'Error404Ctrl'
});
$locationProvider.html5Mode(true);
}]);
If you want to have two controllers, then you should probably consider using a provider, such as a factory or service, instead. Controllers can have multiple injected factories so you can contain most of your logic in the factories instead of inside the controller. Here is a style guide I always use when making Angular apps and it contains information on how to properly set up a factory. I hope this helps!
What I do if I need two controllers in the same route is defining two directives contained in different controllers and then use this two directives in the route that I want to define.