All is in the title. I want to use the CrytoJS lib in an AngularJS application and I can't get rid of this.
I install crytoJS with bower:
bower install cryptojslib
Then I load the lib I need :
<script type="text/javascript" src="/public/system/lib/cryptojslib/rollups/md5.js"></script>
<script type="text/javascript" src="/public/system/lib/cryptojslib/components/enc-base64-min.js"></script>
And I try to use the CryptoJS like that :
var pwd = CryptoJS.MD5(params.email+'|'+params.password).toString(CryptoJS.enc.Base64);
When I run this code, I've got the following error :
'CryptoJS is not defined'
I've read that it should be possible to wrap the CryptoJS into a module but I don't know how to do.
Any help would be greatly appreciated.
JM.
Shouldn't be any problems with AngularJS and CryptoJS. I setup a quick Plunker that has a hash created in a controller. No errors...
http://plnkr.co/edit/kzrr3EdHNXELVof6DVSp?p=preview
In the controller:
$scope.hash = CryptoJS.MD5("Message");
In the HTML:
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
Is this different than what you are trying?
include the jsfile from rollups folder.
Even I was also getting the same error 'CryptoJS is not defined'. After this change, CryptoJS object was available
var hashObj = CryptoJS.SHA512(myString);
var hashString = hash.toString(CryptoJS.enc.HEX);
Related
When i try to load my ui-calendar in my angular.module i am getting Uncaught Error: Injector error. How will i include my ui-calendar. I am using npm install.
This is my error:
Uncaught Error: [$injector:modulerr]
at angular.js:38
at angular.js:4408
at n (angular.js:336)
at g (angular.js:4369)
at eb (angular.js:4294)
at d (angular.js:1655)
at yc (angular.js:1676)
at Zd (angular.js:1570)
at HTMLDocument.<anonymous> (angular.js:28683)
at j (jquery.js:3148)
This is my module were i am including ui-calendar:
var ebsapp = angular.module("ebs", ['ui.bootstrap', 'angular.filter', 'toastr', 'ui.calendar']);
Or is there any other script tags that needed to be included. if so please give me the script tags.
My injector error got resolved. I want to get a full calendar view.
I am using this div code:
<div ui-calendar ng-model="eventSources"></div>
How to get a simple calendar view??
Is these are the scripts i need to load ??
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
I tried to implement form https://jsfiddle.net/yy1rud17/326/ website where in i got the following out;
Whether i need to initialise my calendar??
I have an app which worked great, until I decided to refactor the code and use Gulp for my project. Here is the error I get:
Error: [$injector:unpr] Unknown provider: _Provider <- _ <- utilsFactory <- storageService <- httpRequestInterceptor <- $http <- $templateFactory <- $view <- $state
Since I'm not sure how to read this error and if they all have an issue or if it's only one of them, here are the two places where I use some of these providers when I start my app:
app.run(function($rootScope, $state, storageService, modalsFactory, appFactory, _) { ... }
And:
angular.module("mediaControl").controller("loginCtrl", function ($state, $translate, authService, utilsFactory, appFactory, storageService) { ... }
In my index.html file, I have:
<!-- inject:js -->
<script src="src/mediaControl.js"></script>
...
<script src="src/login/providers/httpRequestInterceptor.service.js"></script>
...
<script src="src/common/providers/utils.factory.js"></script>
<script src="src/common/providers/storage.service.js"></script>
...
<script src="src/login/login.controller.js"></script>
...
<!-- endinject -->
What I checked/did:
Check if Gulp put all of the necessary js files in index.html and in the good order (seems ok to me)
Check the names of the providers (I didn't change them during the refactoring though)
Try to remove my custom providers from loginCtrl and app.run (I still have the same error when I'm doing this)
I read the documentation and some SO questions, but I don't see anything that I would do wrong, considering that my app worked before the refactoring (which consists in reorganizing my file structure, renaming the files, and starting to rewrite the code using ES6 standards). Any idea about what could be wrong here?
As noticed by #shaunhusain, the lodash provider was missing in my index.html. I fixed my Gulpfile so that the file is injected as well, and it works.
http://cloudinary.com/blog/how_to_build_an_image_library_with_react_cloudinary
(except I used create-react-app instead of manually configuring webpack)
Where the script is added to of index.html:
<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"></script>
and then the functionality is included in a component:
uploadWidget() {
cloudinary.openUploadWidget({ cloud_name: 'CLOUD_NAME', upload_preset: 'PRESET', tags:['xmas']},
function(error, result) {
console.log(result);
});
}
However I am getting the error: 'cloudinary' is not defined
Is cloudinary supposed to be available there after simply adding the script? Am I missing a step?
Try to access it through window.cloudinary. Also make sure that the script is included before your React script is included.
I have a really weird issue with my AngularJS app on iPad / iPhone safari.
The issue occurs only of first load (after clearing history / website data).
The issue that the application wont start at all - I get a white page and the console (from MacBook develop tools) is full with errors,
Sometimes I'm getting lots of
TypeError: undefined is not an object (evaluating 'd.module')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 'd.$$minErr')
ReferenceError: Can't find variable: angular
TypeError: undefined is not an object (evaluating 't.noop')
ReferenceError: Can't find variable: angular
ReferenceError: Can't find variable: angular
...
Sometimes I'm getting Error: $injector:unpr - Unknown Provider
And sometimes Error: $injector:nomod - Unknown Provider
But if I hit page refresh after getting the white page / errors - all works just fine.
This is part of the third party js libs/plugins I include on my index.html
<script src="resources/plugins/head.load.min.js"></script>
<script src="resources/plugins/modernizr-custom.js"></script>
<script src="resources/lib/jquery/jquery-2.1.0.min.js"></script>
<script src="resources/lib/angular/angular.min.js"></script>
<script src="resources/lib/angular/angular-resource.min.js"></script>
<script src="resources/lib/angular/angular-route.min.js"></script>
<script src="resources/lib/angular/angular-animate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate.min.js"></script>
<script src="resources/lib/angular-translate/angular-translate-loader-static-files.js"></script>
<script src="resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js"></script>
<script src="resources/lib/ng-table/ng-table.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload-shim.min.js"></script>
<script src="resources/lib/file-upload/ng-file-upload.min.js"></script>
I'm really lost here...
Another thing: I have noticed on my Mac (Resources->Scripts) that if I open a file, lets say Resources->Scripts->FileNameOne.js the content is actually of another file FileNameTwo.js ??? is it a flaw of the dev tools of the Mac that confuses the names/content or can it be related to the problem???
Any Ideas?
Here is the complete solution with Grunt
Content of the Gruntfile.js
'use strict';
module.exports = function(grunt){
grunt.initConfig({
concat: {
dist: {
src: ['WebContent/resources/plugins/head.load.min.js', 'WebContent/resources/plugins/modernizr-custom.js',
'WebContent/resources/lib/jquery/jquery-2.1.0.min.js',
'WebContent/resources/lib/angular/angular.min.js', 'WebContent/resources/lib/angular/angular-resource.min.js', 'WebContent/resources/lib/angular/angular-route.min.js', 'WebContent/resources/lib/angular/angular-animate.min.js',
'WebContent/resources/lib/angular-translate/angular-translate.min.js', 'WebContent/resources/lib/angular-translate/angular-translate-loader-static-files.js',
'WebContent/resources/lib/angular-ui/ui-bootstrap-custom-tpls-0.14.1.min.js',
'WebContent/resources/lib/ng-table/ng-table.min.js',
'WebContent/resources/lib/websockify/util.js', 'WebContent/resources/lib/websockify/base64.js', 'WebContent/resources/lib/websockify/websock.js',
'WebContent/resources/lib/file-upload/ng-file-upload.min.js',
'WebContent/resources/js/services/*',
'WebContent/resources/js/services/dialogs/*',
'WebContent/resources/js/controllers/*',
'WebContent/resources/js/directives/*',
'WebContent/resources/plugins/*'],
dest: 'dist/myWebAppInOneFile.js',
},
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['concat']);
};
Then just call grunt from the relevant folder and you'll get your file
What build toolchain are you using. One option would be to concatenate all of the includes into a single file, this should stop the error where the wrong scripts are being loaded - As mentioned by Marcus H
Gulp
https://github.com/contra/gulp-concat
Grunt
https://github.com/gruntjs/grunt-contrib-concat
This question is a follow up to Definition for gapi in an Angular controller? which is posted yesterday.
User pinoyyid pointed me to his git repo ngDrive (https://github.com/pinoyyid/ngDrive)
I was working through the quit start and ran into an error saying 'ngDrive' is not defined in my console.
This was the code that cause this error
angular.module('ngm.ngDrive')
.provider('OauthService', ngDrive.Config)
.config(function (OauthServiceProvider) {
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('2231299-2bvf1.apps.googleusercontent.com');
OauthServiceProvider.setTokenRefreshPolicy(ngDrive.TokenRefreshPolicy.ON_DEMAND);
OauthServiceProvider.setNoAccessTokenPolicy(999); // 0 = fail, > 0 = retry after x
});
Specifically the ngDrive.Config
I had no issue when injecting the service into my app.js file as shown below
angular
.module('App', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.sortable',
'firebase',
'angular-toArrayFilter',
'ngm.ngDrive'
])
I have also placed the script tag for the library as specified:
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="bower_components/ngDrive/build/module.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/login_controller.js"></script>
<script src="scripts/controllers/view_resources_ctrl.js"></script>
<!-- endbuild -->
I'm not quite sure what I'm doing wrong here. I don't see anything in the guide that I might have accidentally skipped.
Thanks for your time.
I did bower install ngDrive --save, included <script src="../bower_components/ngDrive/build/module.js"></script> (my index.js is in an app folder) before app.js, injected the ngm.ngDrive, copy-pasted the .provider('OauthService', ngDrive.Config). Then I added into config,
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('2231299-2bvf1.apps.googleusercontent.com');
OauthServiceProvider.setTokenRefreshPolicy(ngDrive.TokenRefreshPolicy.ON_DEMAND);
OauthServiceProvider.setNoAccessTokenPolicy(999);
Nothing complained about ngDrive.Config. But I do get errors:
Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:3000/bower_components/ngDrive/build/module.js.map (resource that I did not explicitly request for loading)
OauthServiceProvider.setNoAccessTokenPolicy is not a function. (In 'OauthServiceProvider.setNoAccessTokenPolicy(999)', 'OauthServiceProvider.setNoAccessTokenPolicy' is undefined). (checked the source and It seems this method does not exist in the current version of the module)
I tried but can't reproduce your error.
The 'ngDrive' is not defined is caused by module.js failing to load. If you look at the network tab, you'll see a 404.
Also, there is a bug in the documentation, setNoAccessTokenPolicy is no longer a feature, so you should delete that line. Version 0.1.10 fixes the documentation.