I've been utilizing gulp-angular-templatecache to convert my filename.view.html files into a consolidated templates.js file.
Afterwards, I use $stateProvider to define states and fetch the templates from $templateCache, including an abstract "root" state.
$stateProvider
.state('app', {
abstract: true,
template: '<div ui-view></div>'
})
.state('app.login', {
url: '/login',
template: $templateCache.get('components/login/login.html'),
controller: 'LoginController as login'
});
Thus far, everything seems to be loading correctly on the page, but for some reason, I am unable to get the controllers to function properly.
The modules and corresponding controllers are fairly straightforward:
(function () {
'use strict';
angular
.module('login', [])
.controller('LoginController', LoginController);
function LoginController() {
var vm = this;
vm.loginID = 'test';
vm.password = 'test';
vm.doLoginRequest = function () {
console.log('Performing login request...');
}
}
})();
I have attempted different methods to resolve this issue, such as:
- Moving the template to the
.run(...)part of the module and adding it to$templateCachethere instead - Exploring variations of
template,templateUrl, andtemplateProviderin the state configuration - Eliminating the controllerAs syntax from the state and opting for
ng-controllerinstead - Utilizing the traditional controller syntax (without controllerAs syntax)
If anyone has any suggestions on how to fix this problem, I would greatly appreciate it. I've been trying to figure it out for hours!