How add cookie to my controller correct?
It`s error when I use $cookie otherwise everything works.
angular.module('app', ['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});
Error
angular.js:13920 Error: [$injector:unpr]
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24cookiesProvider%20%3C-%20%24cookies%20%3C-%20loginCtrl
at Error (native)
at http://localhost:64757/Scripts/angular.min.js:6:412
at http://localhost:64757/Scripts/angular.min.js:43:174
at Object.d [as get] (http://localhost:64757/Scripts/angular.min.js:40:432)
at http://localhost:64757/Scripts/angular.min.js:43:236
at d (http://localhost:64757/Scripts/angular.min.js:40:432)
at e (http://localhost:64757/Scripts/angular.min.js:41:158)
at Object.instantiate (http://localhost:64757/Scripts/angular.min.js:42:24)
at http://localhost:64757/Scripts/angular.min.js:90:32
at q (http://localhost:64757/Scripts/AngularUI/ui-router.min.js:7:14338)
If you go to the url that the error gives you: https://docs.angularjs.org/error/$injector/unpr?p0=$cookiesProvider%20%3C-%20$cookies%20%3C-%20loginCtrl
Your angular app is unable to find your dependency. Did you install the angular cookies file? You can install it with:
npm install angular-cookies
OR
bower install angular-cookies
Also when you declare your angular app you should assign it to a variable then use it for your controllers.
var app = angular.module('app',['ngCookies']);
app.controller('loginCtrl', function ($scope, $http, $state, Authorization, $cookies) {
$cookies.put('expires', 'example');
});
Related
I've included this line to use ngStorage
<script src="js/angularjs/ngStorage.min.js"></script>
and injected it to my controller named bookController like I always do
.controller('bookController', ['$scope', 'bookService', '$location', '$sessionStorage', function($scope, bookService, $location, $sessionStorage)
Why am I still getting injector error like this?
angular.min.js:118 Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=<div ng-view="" class="ng-scope">essionStorageProvider%20%3C-%20%24sessionStorage%20%3C-%20bookController
at http://localhost/cm0665/js/angularjs/angular.min.js:6:412
at http://localhost/cm0665/js/angularjs/angular.min.js:43:174
at Object.d [as get] (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at http://localhost/cm0665/js/angularjs/angular.min.js:43:236
at d (http://localhost/cm0665/js/angularjs/angular.min.js:40:432)
at e (http://localhost/cm0665/js/angularjs/angular.min.js:41:158)
at Object.instantiate (http://localhost/cm0665/js/angularjs/angular.min.js:42:24)
at http://localhost/cm0665/js/angularjs/angular.min.js:90:32
at Object.link (http://localhost/cm0665/js/angularjs/angular-route.min.js:7:274)
at http://localhost/cm0665/js/angularjs/angular.min.js:16:71
You help is much appreciated!
You need to inject the ngStorage module into your module.
Then you can use $sessionStorage in your controller.
I'm attempting to use the ng-file-upload directive (https://github.com/danialfarid/ng-file-upload) to add file-uploading functionality to my project, but keep getting this error:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=UploadProvider%20%3C-%20Upload%20%3C-%20ExperimentController
at Error (native)
at http://localhost:8000/static/editor/js/angular.min.js:6:416
at http://localhost:8000/static/editor/js/angular.min.js:40:409
at Object.d [as get] (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at http://localhost:8000/static/editor/js/angular.min.js:40:483
at d (http://localhost:8000/static/editor/js/angular.min.js:38:394)
at e (http://localhost:8000/static/editor/js/angular.min.js:39:161)
at Object.instantiate (http://localhost:8000/static/editor/js/angular.min.js:39:310)
at http://localhost:8000/static/editor/js/angular.min.js:80:313
at A.link (http://localhost:8000/static/editor/js/angular-route.min.js:7:268) <div ng-view="" ng-show="main.results==null" class="ng-scope">
I'm including the correct files in my index.html:
<script src="/static/editor/js/angular.min.js"></script>
<script src="/static/editor/js/ng-file-upload-shim.js"></script>
<script src="/static/editor/js/ng-file-upload.js"></script>
I'm declaring it my module:
(function() {
angular
.module('myApp', [
'ngRoute',
'ngAnimate',
'ngCookies',
'ngFileUpload'
]);
})();
But when I attempt to inject it into my controller, it throws the above error:
(function() {
angular
.module('myApp')
.controller('myController', myController);
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'Upload'];
function myController($routeParams,
$compile,
$scope,
$interval,
Upload) {
....
I'm using Angular 1.4.6, and ng-file-upload 9.0.14. I downloaded the files manually, and included the indicated .js files in my project directory. Are there maybe some extra dependencies that are included via bower or npm that I'm missing?
Any help would be greatly appreciated!
UPDATE: Viewing the ng-file-upload directive's live demo page with AngularJS 1.4.6 (https://angular-file-upload.appspot.com/#/1.4.6) also causes numerous errors, so this might just be an incompatibility with 1.4.6 and the lastest version of ng-file-upload.
You are trying to inject unknown service called "Upload", if you mean the upload service of ng-file-upload you need to inject "ngFileUpload" instead of "Upload".
myController.$inject = ['$routeParams',
'$compile',
'$scope',
'$interval',
'ngFileUpload'];
function myController($routeParams,
$compile,
$scope,
$interval,
ngFileUpload) {
....
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
UPDATE: ISSUE RESOLVED
Turns out I was not aware that the ngCookies was a separate service which is not part of the standard angular.js. My bower.json file was referencing angular 1.4beta but the angular-cookies was still loading 1.3. I changed that to 1.4beta and everything is working as expected.
I am using $cookies in a controller in an Angular 1.4 project but I am getting the following error when I reference $cookies:
TypeError: undefined is not a function
at Object.<anonymous> (http://localhost:9000/bower_components/angular-cookies/angular-cookies.js:60:16)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at Object.enforcedReturnValue [as $get] (http://localhost:9000/bower_components/angular/angular.js:4224:37)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:4371:17)
at http://localhost:9000/bower_components/angular/angular.js:4189:37
at getService (http://localhost:9000/bower_components/angular/angular.js:4330:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:4362:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:4379:27)
at http://localhost:9000/bower_components/angular/angular.js:8668:28
at link (http://localhost:9000/bower_components/angular-route/angular-route.js:981:26) <div ng-view="" class="ng-scope">
My code:
angular.module('supportalApp', [
'ngCookies',
'ngAnimate',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'cfp.hotkeys',
'ngClipboard']);
angular.module('supportalApp')
.controller('ToolsCtrl', function($scope, $cookies) {....
});
If I remove $cookies, no errors are rendered. And just to confirm, I have included 'ngCookie' in the app
Note that the $cookies API used to be an associative array before AngularJS v1.4.0-beta.6, and the online documentation (defaulting to a development snapshot) already refers to the new get/put API. The relevant change is https://github.com/angular/angular.js/commit/38fbe3ee8370fc449b82d80df07b5c2ed2cd5fbe
With AngularJS <= v1.4.0-beta.5, you have the following choices:
Use $cookieProvider
$cookies["key"] = value
$cookies.key = value
(Upgrade AngularJS)
I don't see 'ngCookies' added in your module dependency, please add it.
angular.module('supportalApp', ['ngCookies'])
.controller('ToolsCtrl', function($scope, $cookies) {....
});
I am having a hard time figuring out why http.post method is not being called within my tests, which is indicated by the message saying ~ "nothing to flush" as well as adding console.log statements to both the success and the error promise methods.
The api code does work when using the app. This is my first angular controller test so I could be missing something simple.
I have been using David Mosher's example as a template https://github.com/davemo/lineman-angular-template/blob/master/spec/controllers/login_controller_spec.coffee
# controller
"use strict"
angular.module("woddlyApp").controller "SignupCtrl", ($scope, $http, $location) ->
$scope.user = {}
$scope.save = (user, role) ->
user.role = role
$http.post('/users', user)
.success (data, status, headers, config) ->
$location.path '/dashboard'
.error (data, status, headers, config) ->
# tests
'use strict'
describe 'Controller: SignupCtrl', ->
# load the controller's module
beforeEach -> module('woddlyApp')
# Initialize the controller and a mock scope
beforeEach inject ($controller, $rootScope, #$location, #$httpBackend) ->
#scope = $rootScope.$new()
#redirect = spyOn($location, 'path')
$controller 'SignupCtrl', { $scope: #scope, $location: $location }
afterEach ->
#$httpBackend.verifyNoOutstandingRequest()
#$httpBackend.verifyNoOutstandingExpectation()
describe 'Successful signup', ->
beforeEach ->
#$httpBackend.expectPOST('/users', #scope.user).respond(200)
#scope.save(#scope.user, 'member')
#$httpBackend.flush()
it 'redirects the user to the dashboard page', ->
expect(#redirect).toHaveBeenCalledWith '/dashboard'
Error
Chrome 28.0 (Linux) Controller: SignupCtrl Successful signup redirects the user to the dashboard page FAILED
Error: No pending request to flush !
at Error (<anonymous>)
at Function.$httpBackend.flush (/home/chris/projects/personal/woddly/client/app/components/angular-mocks/angular-mocks.js:1195:34)
at null.<anonymous> (/home/chris/projects/personal/woddly/client/.tmp/spec/controllers/signup.js:25:34)
Expected spy path to have been called with [ '/dashboard' ] but it was never called.
Error: Expected spy path to have been called with [ '/dashboard' ] but it was never called.
at null.<anonymous> (/home/chris/projects/personal/woddly/client/.tmp/spec/controllers/signup.js:30:38)
Error: Unsatisfied requests: POST /users
at Error (<anonymous>)
at Function.$httpBackend.verifyNoOutstandingExpectation (/home/chris/projects/personal/woddly/client/app/components/angular-mocks/angular-mocks.js:1228:13)
at null.<anonymous> (/home/chris/projects/personal/woddly/client/.tmp/spec/controllers/signup.js:19:32)
As mentioned in the comments I am using angular 1.1.5 (for the new ng-animate). To get my tests passing I needed to install the angular-mocks 1.1.5.
bower install angular-mocks-unstable
or update the bower.js (or components.js) file and run:
bower install
And update my karma.conf.js file
files = [
JASMINE,
JASMINE_ADAPTER,
'app/components/angular-unstable/angular.js',
'app/components/angular-mocks-unstable/angular-mocks.js', // need unstable here
'.tmp/scripts/*.js',
'.tmp/scripts/**/*.js',
'.tmp/spec/**/*.js'
];