Angular - Explicit annotation required - javascript

I'm running into the following issue with my code:
Error: [$injector:strictdi] controller is not using explicit annotation and cannot be invoked in strict mode
I've implemented the explicit annotation as seen below, but still can't get it to work.
var paymentSummaryTemplate = require('./paymentsummary.html');
function PaymentController($scope, $log, $translate) {
...
}
PaymentController.$inject = ['$scope','$log', '$translate'];
p3dng
.controller('PaymentController', PaymentController)
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/paymentsummary', {
templateUrl: paymentSummaryTemplate,
controller: PaymentController,
controllerAs: 'paymentsummary',
resolve: getInitData(['campaign', 'event'])
});
}]);

Related

Basic Angular app using ui-router won't load login

I'm working on a POC for work and I can't find whatever stupid mistake is hiding here. I have a bare-bones/basic angular app, using ui-router. Plunker can be found here.
In the chrome console I can see my app.module is being created, however the login page never appears. This is a very, very basic app so I figure it must be something simple I'm missing. Any suggestions? Below is a quick sample:
config.js
(function() {
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
function AppRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('login');
$stateProvider
.state('/', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
})
.state('login', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
});
}
})();
login.controller.js
(function() {
'use strict';
var app = angular.module('app.login');
app.controller('LoginController', LoginController);
LoginController.$inject = ['$location', '$filter', '$window', '$rootScope'];
function LoginController($location, $filter, $window, $rootScope) {
var init = function() {
console.log('here');
};
init();
}
})();
app.module.js
(function() {
var app = angular.module('app', ['app.core', 'app.login']);
})();
login.module.js
(function(){
'use strict'
var app = angular.module('app.login', ['app.core']);
})();
core.module.js
(function(){
'use strict'
var app = angular.module('app.core', ['ui.router']);
})();
After few changes it worked for me (see forked plunk: https://plnkr.co/edit/D5AL8DTnqYI2g23wjE7W?p=preview):
You forgot to load AngularJS (between <head></head).
You forgot to add ng-app, I add it on body.
And I made some changes in config.js:
function AppRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('/', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
});
}
I add url to login state, and I made changes to otherwise function: I changed login to /login cause it needs URL, not state name.
I think you overconfigured you app a little bit (too much modules), and it makes it hard to read for me, but it's only my opinion and to be frankly, maybe it's only because I don't use modules very frequently. Try to add this changes to your Plunk and please write if it won't work, casue I could accidentally skip something.

Trouble passing angular resolve values into controller

How do I pass the resolve validToken value to my controller?
Config:
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/recover/:token', {
templateUrl: 'recover.html',
controller: 'recoverCtrl',
resolve: {
validToken : function(){
return "INVALID TOKEN"
}
}
});
}])
Controller:
.controller('recoverCtrl', ['$location','$scope','$http', '$routeParams', '$rootScope',
function($location,$scope,$http,$routeParams,$rootScope,validToken) {
console.log(validToken);
// Rest of controller code.
}
]);
I would like to do this without removing the []'s so the code could eventually be minifed. The below example is working as I expected so I know that all of my code it working, I'm just not sure what I should add to the above code to make it function similarly.
.controller('recoverCtrl', function($location,$scope,$http,$routeParams,$rootScope,validToken) {
console.log(validToken);
//Other code
});
Figured it out thanks to Etsus.
I just needed to add the object key as a string while injecting and it was able to determine that it was a resolve key
.controller('recoverCtrl', ['$location','$scope','$http', '$routeParams', '$rootScope', 'validToken', function ($location, $scope, $http, $routeParams, rootScope, validToken) {
console.log(validToken);
}]);

How to annotate dependencies in an inline controller while configuring app routes?

I'm getting following error if I don't annotate the dependencies for an inline controller function for a route (I'm using strict DI mode and all other codes are annotated so that js-minification doesn't break my code):
https://docs.angularjs.org/error/$injector/strictdi?p0=function(AuthService,%20$state
Here is the logout route code:
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider', '$urlRouterProvider) {
$stateProvider.state('logout', {
url: '/logout',
controller: function(AuthService, $state) {
AuthService.logout();
$state.go('login');
}
}
}]);
Is there any technique to declare inline annotation for the above two dependent services (AuthService, $state) of the inline controller ?
I know the bellow work-around :
.state('logout', {
url: '/logout',
controller: LogoutController
});
function LogoutController (AuthService, $state) {
AuthService.logout();
$state.go('login');
}
LogoutController.$inject = ['AuthService', '$state'];
this works but just wanted to checkout if anyone knows any smart short-cut ?
Try
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider.state('logout', {
url: '/logout',
controller: ['AuthService', '$state', function(AuthService, $state) {
AuthService.logout();
$state.go('login');
}]
}
}]);
Not sure if that will work. Usually we separate our controllers into files for ease of use, rather than writing them inline in the config.route.js file.
Just to add more details here, this is expected for inline controllers.
See https://github.com/olov/ng-annotate/issues/50.
Either not inline them or add apply controller: /* #ngInject */ function(service1){ ... }.
The /* #ngInject */ tells ngannotate to apply annotation here.

$routeProvider config route throwing 'Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string'

I'm writing routing logic using ngRoute of angular JS. The following is my code.
index.js
(function() {
'use strict';
function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
$routeProvider.otherwise({redirectTo: '/404'});
$httpProvider.defaults.withCredentials = false;
$httpProvider.defaults.headers.common['content-type'] = "application/json";
}
angular
.module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
)
.config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();
app.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/components/landingpage/landingpage.html',
controller: 'appController'
});
}
function appController($scope, $rootScope, $location) {
$scope.submitLogin = function() {
alert("Successfully loggedIn");
};
}
angular
.module('pacman')
.controller('appController', ['$scope', '$rootScope', '$location', appController])
.config(['$routeProvider', config]);
})();
notFound.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/404', {
templateUrl: 'app/components/notFound/404page.html',
controller: 'notFoundController'
});
}
function notFoundController($scope, $rootScope, $location) {
debugger;
}
angular
.module('pacman')
.controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
.config(['$routeProvider', config]);
})();
My code is a simple app. I'm trying to load different controllers based on routes. However at the time of loading the app, in the last controller's '$routeProvider' it throws an error
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have no clue how to figure out the problem. Any leads would be appreciated.
The following is my library bundle order.
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'
Kindly help.
Issue is in your index.js where you define the run method on your angular app.
angular
.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
The last argument in the array passed to run should be a function but you forgot to pass a function. Change your run to add some implementation like below or remove the run if you don't see any use for it.
angular.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies',
function($rootScope,$location,$modalStack,$cookies){
// some statements here
}]);
Angular JS file declaration must come before the jquery in your index.html
'node_modules/angular/angular.js',
'node_modules/jquery/dist/jquery.js',

How to declare an angular-bootstrap modal in a way that is safe for minimization

I have implemented an angular modal dialog box following the guidelines given at: http://angular-ui.github.io/bootstrap/. The code below works fine when the non-minified files are accessed, but it fails when minification is applied. I have narrowed the problem down to the declaration of the modalInstanceCtrl function below, however I am not clear on how I can implement this function in a minification-friendly manner. I have tried to declare the modalInstanceCtrl function using standard controller syntax, but in that case, the function is not found by the $modal.open call.
The error message that I receive from the minified code is "TypeError: Cannot read property 'value' of undefined".
What is the best way to declare this controller so that it can be both minified as well as called from the $modal.open function?
Any help would be greatly appreciated.
lxModalSupportServices.factory('lxModalSupportService',
function ($modal, $log, $timeout) {
var modalInstanceCtrl = function($scope, $log, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
};
return {
showCameraAndMicrophoneModalWindow : function(scope, htmlTemplate) {
var ModalInstance = $modal.open({
templateUrl: htmlTemplate,
controller: modalInstanceCtrl
});
....
}
});
Change the declaration to
var ModalInstanceCtrl = [
'$scope', '$log', '$modalInstance',
function($scope, $log, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
}
];
and try again. If it still fails, probably the problem is somewhere else.
Normally I would declare the controller for $modal separately:
lxModalSupportServices.controller('AddCommentModalCtrl', ['$scope', function($scope) {
'use strict';
// Implementation...
});
Then use it with string
$modal.open({
templateUrl: htmlTemplate,
controller: 'AddCommentModalCtrl',
});

Categories