I am still a new programmer with Angularjs and I am having an issue adding a controller to my site. I have two other controllers connected to the site and working fine but this one for some reason isn't being recognized.
my app.js
var app = angular.module('app', ['JobCtrl','JobSvc','WebsiteCtrl', 'WebsiteSvc','ClientCtrl','ClientSvc','ui.bootstrap', 'ui.bootstrap.tpls']);
my html
<!DOCTYPE html>
<div ng-app="app">
<div ng-controller="ClientCtrl" ng-cloak>
<div class="row">
<br />
<div class="col-sm-2 pull-right">
<button class="btn btn-primary" ng-click="showModal('Add')">Add Client</button>
</div>
<input ng-model="searchKeyword" type="text" class="form-control col-md-6 pull-right" placeholder="Search Clients...">
<h2 class="col-md-4">Clients</h2>
</div>
<table class="table table-condensed table-hover">
<thead>
<td class="text-center">
<strong>Name</strong>
</td>
<td class="text-center">
<strong>Actions</strong>
</td>
</thead>
<tbody ng-repeat="c in model.clientList | filter: searchKeyword ">
<tr>
<td class="text-center">
{{c.Name}}
</td>
<td class="text-center">
<button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Edit" ng-click="selectClient(c); showModal('Edit', c)" /><span class="glyphicon glyphicon-pencil"></span>
<button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Delete" ng-click="selectClient(c); showModal('Delete', c)" /><span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
my controller
angular.module('app')
.controller('ClientCtrl', ['ClientService', '$scope', '$http', '$uibModal', function (ClientService, $scope, $http, $uibModal, $uibModalInstance) {
//$scope.model = ClientService.getClients();
$scope.new = {
Client: {}
};
//create alerts when page reloads after crud functions
if (localStorage.getItem("Success")) {
$scope.alert = "Success";
$scope.alertMessage = localStorage.getItem("Success");
localStorage.clear();
} else if (localStorage.getItem("Error") && localStorage.getItem("Error") != null) {
//sometimes get errors even when adding, deleting, updating is successful
$scope.alert = "Error";
$scope.alertMessage = localStorage.getItem("Error");
localStorage.clear();
};
getClients();
function getClients() {
ClientService.getClients()
.then(
function (data) {
$scope.model = data;
},
function (errResponse) {
console.log("Error while getting clients");
}
);
}
$scope.addClient = function () {
ClientService.addClient()
.then(
function (success) {
localStorage.setItem("Success", "Added client Id:" + success.Id + " Successfully!");
},
function (error) {
localStorage.setItem("Error", "Error while adding client! " + error.status + ":" + error.statusText);
alert(error.status + " " + error.statusText);
}
);
//location.reload();
}
$scope.updateClient = function () {
ClientService.updateClient()
.then(
function (success) {
localStorage.setItem("Success", "Updated client Id:" + success.Id + " Successfully!");
},
function (error) {
localStorage.setItem("Error", "Error while updating client! " + error.status + ":" + error.statusText);
alert(error.status + " " + error.statusText);
}
);
//location.reload();
}
$scope.deleteClient() = function () {
ClientService.deleteClient()
.then(
function (success) {
localStorage.setItem("Success", "Deleted client Id: " + success.Id + " Successfully!");
},
function (error) {
localStorage.setItem("Error", "Error while deleting client: " + error.status + error.statusText);
alert(error.status + " " + error.statusText);
}
);
//location reload();
}
//select client
$scope.selectClient = function (client) {
$scope.selectedClient = client;
}
//show modal function
$scope.showModal = function (action, obj) {
$scope.showBool = true; //boolean to be able to exit modal after update
$scope.model.runButtonText = "Run Job"; //this is for run job only
$scope.$modalInstance = $uibModal.open({
scope: $scope,
inputs: {
title: action + " Client"
},
restrict: "E",
templateUrl: 'app/modal/ClientModals/modal' + action + 'Template.html',
controller: "JobCtrl",
backdrop: 'static',
keyboard: false
});
}
//exit modal function
$scope.exitModal = function () {
$scope.$modalInstance.dismiss('cancel');
};
}]);
Any help would be fantastic, I just don't understand how my other controllers are considered defined but this one isn't.
You forgot one of your dependency (
$uibModalInstance) in your controller creation:Should be: