I have a partial template file in templates folder, that includes
languages
<script type="text/javascript" src="controllers/languagesController.js"></script>
<div ng-controller="languagesController">
{{name}}
</div>
languagesController
hrmsApp.controller("languagesController",function($scope){
$scope.name = "test";
});
but the controller inside this function is not recognized by the app file.
app.js
var hrmsApp = angular.module("hrmsApp",['ui.router','ngSanitize','ngResource']);
hrmsApp.config(function($stateProvider, $urlRouterProvider, $controllerProvider) {
$urlRouterProvider.otherwise('/');
hrmsApp.registerCtrl = $controllerProvider.register;
$stateProvider
.state("login",{
url : "/",
templateUrl : "/templates/login.php"
})
.state("dashboard", {
url : "/dashboard",
views : {
'' : {templateUrl : "/templates/dashboard.php"},
'navMenu@dashboard' : {templateUrl : "/templates/menu.php"}
}
})
.state("languages", {
url : "/languages",
views : {
'': {templateUrl : "/templates/languages.php",
controller : "languagesController"
},
'navMenu@languages' : {templateUrl : "/templates/menu.php"}
}
})
.state("logout", {
url : "/logout",
controller : "logout"
})
});
The "languagesController
" function inside the languagesController.js
is not recognized and the following error occurs.
"Error: [ng:areq] Argument 'languagesController' is not a function"
But when I put the same controller function inside app.js
file the function is recognized and also the script file inside partial template. I want to keep all controller file in separate directory for easy accessibility and maintenance. But placing in separate file and calling the file throws error. Please suggest a way for doing this, so that my controllers should be in separate directory and the call to controller file should be in partial template file.