I've recently started learning AngularJS and I'm encountering an issue with injecting a service from another file. Despite trying various methods, nothing seems to be working.
Here's a snippet from my index.html:
` <!DOCTYPE html>
<html ng-app="employeedirectory" ng-controller="homeController as vm">
<head>
<title>Employee Directory</title>
<link type="text/css" rel="stylesheet" href="./../bootstrap.min.css" />
</head>
<body>
<div class="container" >
<br/>
<h1 align="center">Employee Directory</h1><br/><br/>
<table class="table">
<thead>
<tr>
<td>Name</td>
<td>Email</td>
<td>Date of Birth</td>
<td>Department</td>
<td>Gender</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<form>
<td>
<input class="form-control" ng-model="employee.name" required placeholder="Name" />
</td>
<td>
<input type="email" ng-model="employee.email" required class="form-control" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="33525150734b4a491d505c5e">[email protected]</a>" />
</td>
<td>
<input type="text" ng-model="employee.dob" id="datepicker" class="form-control" required placeholder="YYYY-MM-DD" />
</td>
<td>
<input ng-model="employee.department" required class="form-control" placeholder="Department" />
</td>
<td>
<input ng-model="employee.gender" required class="form-control" placeholder="Gender" />
</td>
<td>
<input type="number" ng-model="employee.age" disabled class="form-control" placeholder="Age" />
</td>
<td>
<button class="btn btn-primary btn-md" ng-click="vm.addEmployee()">Add Employee</button>
<td><button class="btn btn-info btn-md" ng-click="updateEmployee()">Update Employee</button></td>
</td>
</form>
</tr>
</tbody>
</table>
</div>
<script src="./../angular.min.js"></script>
<script src="./home.controller.js"></script>
</body>
</html>`
Below is a snippet from my controller:
(function () {
'use strict';
angular.module('employeedirectory', [])
.controller('homeController', ['homeService',homeController]);
function homeController() {
var vm = this;
vm.addEmployee = function () {
console.log("in add employee");
// homeService.addEmployee();
}
}
})();
This snippet pertains to my service:
(function () {
'use strict';
angular
.module('employeedirectory')
.service('homeService', homeService);
function homeService() {
// var service = {};
// service.addEmployee = function (details) {
// console.log("in home service");
// };
// return service;
}
})();
The error message I am currently facing:
angular.min.js:123 Error: [$injector:unpr] http://errors.angularjs.org/1.6.4/$injector/unpr?p0=homeServiceProvider%20%3C-%20homeService%20%3C-%20homeController
at angular.min.js:6
at angular.min.js:45
at Object.d [as get] (angular.min.js:43)
at angular.min.js:45
at d (angular.min.js:43)
at e (angular.min.js:43)
at Object.invoke (angular.min.js:43)
at S.instance (angular.min.js:94)
at n (angular.min.js:69)
at g (angular.min.js:61)