I try to inject $timeout in the run function but I get that it is not a function when I try to call it. Why ?
var mainApp = angular.module('mainApp', ['ngRoute', 'ngAnimate', 'ui.bootstrap', ngCookies']);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
mainApp.run(['$rootScope', '$location', '$timeout'
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
should be:
mainApp.run(['$rootScope', '$location', '$route', 'authService', '$timeout',
function ($rootScope, $location, $route, authService, $timeout) {
...
}]);
see 'The array annotation' part here:
https://docs.angularjs.org/api/auto/service/$injector
When you annotate function with names of dependencies, the order of appearance should match.
...
mainApp.run(['$rootScope', '$location', '$route', '$timeout', 'authService',
function ($rootScope, $location, $route, $timeout, authService) {
...
}]);
Related
I am trying to import a service to use it inside my controller, but inside console it is showing this error:
Uncaught SyntaxError: Unexpected token {
I am using Flask-Assets to minify javascript files.
This is my service and controller files contents:
app.service('metaCsrfToken', ['', function () {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
}]);
import { metaCsrfToken } from '../services/owasp'
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'metaCsrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, metaCsrfToken){
// .........
console.log(metaCsrfToken.get_token())
}]);
Full error path:
_app_scripts.js?93a3d221:100 Uncaught SyntaxError: Unexpected token {
100 import{metaCsrfToken}from'../services/owasp'
101 app.controller('call-center.controller',['$scope','$http','$window','$log','$compile','$timeout','$interval','toastr','$filter','metaCsrfToken',function($scope,$http,$window,$log,$compile,$timeout,$interval,toastr,$filter,metaCsrfToken){$scope.numberInput
102 console.log(metaCsrfToken.get_token())}]);
So finally i resolved the problem, just by creating a service and inject it into controller:
app.service('csrfToken', function csrfTokenFactory() {
this.get_token = function(){
var csrf_token = angular.element('meta[name=csrf_token]')
return csrf_token[0].content
}
});
app.controller('call-center.controller',
['$scope', '$http', '$window', '$log', '$compile', '$timeout', '$interval', 'toastr', '$filter', 'csrfToken',
function($scope, $http, $window, $log, $compile, $timeout, $interval, toastr, $filter, csrfToken){
// ......
console.log(csrfToken.get_token())
}]);
I don't know why import always gives that error!!!
I have easy service in my app.
var app = angular.module("appTest", []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log("service")
};
});
And I want to use it in my controller
var app = angular.module('appTest');
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
But I have mistake http://prntscr.com/mckff7
I did my service by any case. Result the same.
I add my service by this way http://prntscr.com/mckgrt
You're not 'injecting' the AuthService into your controller. You're receiving it as an object, but you need to declare it in the array of strings too for it to actually be injected.
Your controller code should look like this:
var app = angular.module('appTest', []);
app.service('AuthService', function ($scope) {
$scope.write = function(){
console.log('hello world');
};
});
app.controller("LoginController", ['$scope', '$http', '$cookies',
'$cookieStore', '$rootScope', '$location', 'AuthService',
function ($scope, $http, $cookies, $cookieStore, $rootScope, $location,
AuthService) {
AuthService.write();
}]);
I am new to Angular JS. I have created factory as follows.
angular.module('login',[])
.factory('authFactory',[function(){
// logic
}] );
and have injected into controller, but it gives me an error.
I also provided this factory file in index.html, but the error is the same.
[$injector:unpr] Unknown provider: authFactoryProvider <- authFactory
What should I do to avoid this?
Below is the code where I have injected it.
(function () {
'use strict';
angular.module('login', []).controller("LoginController", loginController)
loginController.$inject = ['$cookies', '$log', '$scope', '$rootScope', '$q', '$location', '$timeout', '$window',authFactory];
function loginController($cookies, $log, $scope, $rootScope, $q, $location, $timeout, $window,authFactory) {
Did you mean this? (you are missing '')
loginController.$inject = ['$cookies', '$log', '$scope',
'$rootScope', '$q', '$location', '$timeout', '$window', 'authFactory'];
Don't create module twice:
angular.module('login', [])
.factory('authFactory',[function(){
// logic
}] )
angular.module('login').controller("LoginController", loginController)
Don't use module twice make it as your practice to code like this
(function () {
'use strict';
var login = angular.module('login',[]);
login.factory('authFactory',[function(){
// logic
return {
}
}]);
login.controller("LoginController", loginController);
loginController.$inject = ['$log', '$scope', '$rootScope', '$q', '$location', '$timeout', '$window','authFactory'];
function loginController($log, $scope, $rootScope, $q, $location, $timeout, $window,authFactory) {
}
})();
As you are new to angular, i would recommend you to go through this youtube video which is very good
https://www.youtube.com/watch?v=FDhGmFul4YU&index=2&list=PLvZkOAgBYrsS_ugyamsNpCgLSmtIXZGiz
app.service('situacao', function($log, $q, $http, $rootScope){
var situacao = this;
situacao.lista = {};
situacao.getAllSituacao = function(){
var defer = $q.defer();
console.log("php/getAll.php");
$http.get($rootScope.endPoint + "php/getAll.php")
.success(function(res) {
console.log(res);
situacao.lista = res;
defer.resolve(res);
}).error(function(err, status){
defer.reject(err);
});
return defer.promise;
};
return situacao;});
app.controller('listCtrl',['$scope', '$uibModal', '$log', '$http', function(situacao, $scope, $modal, $log, $http) {
$scope.init = function(){
$scope.getAll();
}
$scope.getAll = function(){
situacao.getAllSituacao().then(function(res){
//sucess
$scope.dispSituacao = situacao.lista;
}, function(err){
//error
})
};
$scope.init();
}]);
I'm trying to use the "service" but results in error:
situacao.getAllSituacao is not a function.
what is wrong?
You have to update your inject to pass it in as well since you're using the array notation:
Change
app.controller('listCtrl', ['$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http)
To
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {
In my situation, I named all injected services correctly, but, their order was not the same, and it gave me the same error. My code was something like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function ($scope, situacao, $modal, $log, $http) {}
Putting them in correct order solved the problem. Like this:
app.controller('listCtrl', ['situacao', '$scope', '$uibModal', '$log', '$http', function (situacao, $scope, $modal, $log, $http) {}
Hope this helps someone.
In our application we use the "controller as" syntax:
<div class="workspace-header" ng-controller="LoginController as loginCtl">
To define the LoginController, we define it as a TypeScript class:
class LoginController {
// variables here
constructor($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) {
// set variables
this.$rootScope.$on(AUTH_EVENTS.logoutSuccess, () => {
this.logout();
});
}
public login(credentials: any): void {
this.AuthService.login(credentials).then(() => {
// login success
}, () => {
// login failed
});
}
public logout() {
}
}
and instantiate it this way:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) =>
new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
])
After upgrading to AngularJS 1.3.0 this does not work at all. The "controller as" syntax is completely broken (when used in this fashion). We define a form on the page with ng-submit:
<form name="loginForm" ng-submit="loginCtl.login(dc.credentials)" novalidate>
... fields here
<button type="submit">Login</button>
</form>
The loginCtl.login() does nothing, and no errors are output to the console.
After a lot of debugging and some digging, I believe the breaking change in AngularJS is this:
https://github.com/angular/angular.js/issues/8876
https://github.com/angular/angular.js/pull/8882 (added note to documentation)
If I modify my controller as such:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
function ($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) {
var loginCtrl = new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
// since controllers always return 'this', extend 'this' with the controllers
// properties and it's prototype's properties
_.extend(this, loginCtrl);
_.extend(this, loginCtrl["__proto__"]);
}
])
Then I can get it working, but this seems messy (and I'm not sure if I would have to chain up prototypes in case of superclasses).
Has anyone else run into this and have a better approach for defining these classes in TypeScript?
As PSL said, this is the problem:
.controller('LoginController', ['$rootScope', '$http', '$location', '$cookieStore', 'AuthService', 'AUTH_EVENTS', 'localStorageService',
($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService) =>
new LoginController($rootScope, $http, $location, $cookieStore, AuthService, AUTH_EVENTS, localStorageService);
])
You can simply use LoginController in place of the giant arrow function.
See this comment in the issue you linked about how returning an object is incorrect; the function needs to be something that works when the new operator is used on it.
As PSL said but with $inject... I posed a similar question Angular 1.3 breaking changes - scope set but reset before $apply
I've put my answer here: http://plnkr.co/edit/NMPXFd67WLXHjhrfync2
//other dependencies deleted for brevity
.controller('LoginController', ['$scope', LoginController]);
LoginController.$inject = ['$scope'];