I have a problem with upload module in Angular. I install module from https://github.com/nervgh/angular-file-upload
I use Angular 1.5.0
In index.html i have:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.js"></script>
<script src="scripts/app.js"></script>
My app.js
var app = angular
.module('MyApp', [
'ngAnimate',
'ngCookies',
'datatables',
'ngResource',
'ngRoute',
'angularFileUpload',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider...
This is my main.js
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','$upload','$location', 'myService', function ($rootScope, $scope,$upload,$location, myService) {
}]);
In console : Error: [$injector:unpr] Unknown provider: $uploadProvider <- $upload <- MainCtrl
$upload variable is undefined
Please help me.
Just replace $uploader to FileUploader. there is some problem with fileuploader module, and updated FileUploader module using FileUploader service.
angular.module('MyApp')
.controller('MainCtrl', ['$rootScope', '$scope','FileUploader','$location', 'myService', function ($rootScope, $scope,FileUploader,$location, myService) {
var uploader = $scope.uploader = new FileUploader({
url: 'upload.php'
});
//Any other code or processing
}]);
Wrong injector used please check above
Related
I want to inject a config into my angular app. The app contains also an run object.
But when I add the config option I get an $injector:modulerr error. And I can't find the error.
var myApp = angular.module('myApp',[
'ngAnimate',
'ui.bootstrap',
'ui.router',
'angular.filter',
'angularUtils.directives.dirPagination',
'validation.match',
'ngSanitize',
'ngCookies',
'pascalprecht.translate',
'toggle-switch',
'angucomplete-alt',
'cgPrompt',
'dndLists',
'ngFileUpload',
'ui.router.breadcrumbs',
'angular-bind-html-compile',
'rzModule', // range slider (i.e. for price filter)
'ngFileSaver',
'angular-input-stars',
'textAngular',
'textAngular-uploadImage'
]);
myApp.config(function($provide) {
$provide.decorator('taOptions', function($delegate) {
$delegate.toolbar[1].push('uploadImage');
return $delegate;
});
});
myApp.run(['$rootScope', '$window', '$location', '$stateParams', '$api', '$translate', '$transitions', '$state',
function($rootScope, $window, $location, $stateParams, $api, $translate, $transitions, $state) {
//rootscope
}]);
It's going about the textAngular-uploadImage module (https://github.com/mrded/textAngular-uploadImage). When I remove the config option my app runs fine, but of course, I can't use the module.
What is the reason for this? I included al the required files in the html, and textAngular (https://github.com/textAngular/textAngular) is working fine.
How can I solve this? Or are there any other options for a normal upload function in textAngular? I also tried this solution (https://github.com/textAngular/textAngular/issues/139#issuecomment-111205679) but I get the same error.
Try something below code..
myapp.config(['$provide', function($provide){
$provide.decorator('taOptions', ['$delegate', function(taOptions){
taOptions.toolbar[1].push('uploadImage');
}
return taOptions;
}];
});
And you would need to register upload image with editor like below
taRegisterTool('uploadImage', {
iconclass: "fa fa-user",
action: function(){
//code
}
});
how to inject ngCookies service to the controller . i get an error stating injection failed as below Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=%24cookiesProvider%20%3C-%20%24cookies%20%3C-%20Intake
app.controller("Intake", ["$scope", "$http", "$window", "$mdDialog", "$mdToast", "IntakeFactory", "fileUpload", 'ngCookies', function ($scope, $http, $window, $mdDialog, $mdToast, $Intake, $fileUpload ,$cookieStore ) {
You have to inject ngCookies not in your controller but in your module and your order of injections is incorrect.
var app= angular.module('myModuleName', ['ngCookies']);
And in your controller, you can access its properties by injecting $cookieStore like below
app.controller("Intake", ["$scope", "$http", "$window", "$mdDialog", "$mdToast", "IntakeFactory", "$fileUpload", '$cookieStore', function ($scope, $http, $window, $mdDialog, $mdToast,IntakeFactory, $fileUpload ,$cookieStore )
You can use cookie like this :
(it won't work in this snippet becuase SO doesnot allow cookies HERE)
var app = angular.module('myApp', ['ngCookies']);
app.controller('myCtrl', function($scope, $cookies) {
$cookies.putObject('cookieData', 'this is value stored by cookie');
$scope.data = $cookies.getObject('cookieData');
});
<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-cookies.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{data}}
</div>
</body>
</html>
Inject the service correctly.
Try the below one:-
angular.module('Intake', ['ngCookies']).controller('Intake', ['$cookies', function( $cookies){}])
I am getting javascript run time error
myApp is undefined
for my angular service. Don't know what wrong im doing here..
This is how i defined my app.js
app.js
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource',]);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/motors', {
templateUrl: 'View/motorList.html',
controller: 'motorController'
}).
when('/motors/:Id', {
templateUrl: 'View/motorDetails.html',
controller: 'motorDetailsController'
}).
otherwise({
redirectTo: '/motors'
});
}]);
This is how i am creating/calling myApp in controller.
Controller
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
This is how i am trying use myApp in my service. but it gives error myApp is undefined.
Service:
myApp.service('motorService', ['$http', function ($http) {
//////
}
and this is how i declared it in my html
<html ng-app="myApp">
Looking forward for some help.
Thanks
I think that the error is in the controller's declaration, because you're defining the app 'myApp' twice.
angular.module('myApp', []).controller('motorController', function ($scope, motorService) {
//////
}
should be
angular.module('myApp').controller('motorController', function ($scope, motorService) {
//////
}
Edit
#simbada
It's up to you. You can separate them in different modules.
(function(angular){
angular
.module('myApp', ['myApp.Controllers']);
angular
.module('myApp.Services', [])
.service('mySrv', function($http){
function _get(){
return $http.get('url');
}
return {
get: _get
}
});
angular
.module('myApp.Controllers', ['myApp.Services'])
.controller('myCtrl', function($scope, mySrv){
$scope.var = 'Hello';
});
})(angular);
You have passed comma in dependancy after ngResource just remove that it'll work fine.
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
I think this should be
angular.module('myApp').controller('motorController', function ($sc...
whitout [ ] brackets.
also see how you declare your service:
var myApp = angular.module('myApp', [
'ngRoute', 'motorControllers', 'motorDetailsController', 'motorServices', 'ngSanitize', 'ui.select', 'ngResource']);
when your service is 'motorService'
Your service should be:
myApp = angular.module('motorServices');
myApp.service('motorService', ['$http', function ($http) {
//////
}
i am using angle theme with Angular for my project and i am doing unit testing on this using jasmine framework. But when i run the test cases, it gives error of "Argument 'controller' is not a function, got undefined". here is my test.js file....
describe('registrationController',function(){
beforeEach(module('appTesting'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('Check Working Or Not', function() {
var $scope = {};
var controller = $controller('registrationController', { $scope: $scope });
$scope.password = 'passwordlength';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
Error -
Error: [ng:areq] Argument 'registrationController' is not a function, got undefined http://errors.angularjs.org/1.3.10/ng/areq?p0=registrationController&p1=not%20a%20function%2C%20got%20undefined
No i am using karma to run jasmine.
I am defining my module here
var App = angular.module('appTesting', ['ngRoute', 'ngAnimate', 'ngStorage', 'ngCookies', 'pascalprecht.translate', 'ui.bootstrap', 'ui.router', 'oc.lazyLoad', 'cfp.loadingBar', 'ngSanitize', 'ngResource'])
.run(["$rootScope", "$state", "$stateParams", '$window', '$templateCache', function ($rootScope, $state, $stateParams, $window, $templateCache, $location) {
// Set reference to access them from any scope
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$rootScope.$storage = $window.localStorage;
}
]);
App.config(['$stateProvider','$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'APP_REQUIRES', 'RouteHelpersProvider',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, appRequires, helper) {
'use strict';
App.controller = $controllerProvider.register;
App.directive = $compileProvider.directive;
App.filter = $filterProvider.register;
App.factory = $provide.factory;
App.service = $provide.service;
App.constant = $provide.constant;
App.value = $provide.value;
$stateProvider
.state('app.registrationState', {
url: '/registration',
title: 'Ragistration Page',
templateUrl: helper.basepath('registrationPage.html'),
resolve: helper.resolveFor('registrationController','angularFileUpload')
})
}])
.controller('NullController', function() {});
App.constant('APP_REQUIRES', {
scripts:
{
'registrationController' :['app/js/registrationcontroller.js'],
}
});
Angular
Can the controller be found?
Do you have a controller named registrationController?
Is it in a module named appTesting?
You should have the following code somewhere in your app:
angular.module("appTesting").controller("registrationController", ...);
Karma
If you are using Karma-jasmine:
Did you include the file where you define the controller (registration-controller.js) in your karma.conf.js?
karma.conf.js
module.exports = function(config) {config.set({
files : [
'src/registration-controller.js',
...
],
...
});};
Jasmine
If you're not using Karma to run Jasmine, I'm assuming you're using the Jasmine test runner (HTML file). In that case:
Did you include the controller in the HTML file?
You need to include the controller's script:
<head>
...
<script type="text/javascript" src="src/registration-controller.js"></script>
...
</head>
Either the controller cannot be found or was not created due to error on the source code where controller was defined.
In my case, it was due to a statement that had error which affected succeeding lines of code cause the controller to be not loaded.
This can happen due to variety of reasons.
-> controller name is not referenced right
-> controller is not created due to some error.
In my case, I had the controller name mismatched in
directive:
.controller('IAddController', AddController)
Jasmine spec.ts:
// Instantiate controller
addController= $controller<any>('AddController', {*
I tried to use the code below to set cookies:
angular.module('myApp').controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
$scope.setMyCookie = function () {
$cookies.put('Mykey', 'MyValue');
};
$scope.setMyCookie();
}]);
I updated to version 1.3.14 of angular cookies, I know there is a breaking change, but how should I write the above code now ?
Running the above code I get this error : Error: $cookies.put is not a function
UPDATE :
I have to do this in 2 files:
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
}]);
angular.module('myApp', ['ngCookies']).controller('cookiesExample', ['$cookies', function ($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
It happends via setting the $cookies variable:
angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Your version:
angular.module('myApp', ['ngCookies'])
.controller('myController', ['$scope', '$http','$cookies', function ($scope, $http, $cookies) {
// Retrieving a cookie
var favoriteCookie = $cookies.myFavorite;
// Setting a cookie
$cookies.myFavorite = 'oatmeal';
}]);
Source
NOTE:
Remember to include <script src="angular-cookies.js"> in your html.
You must inject ngCookies in your module:
angular.module('myApp', ['ngCookies'])
Missing ngcookies in your module
angular.module('myApp', ['ngCookies'])