I new bee of Ionic and angular. I used Browserify to require Crypto module of nodejs for my Ionic project. Following are my steps:
I added new line to app.js file
angular.module(.....).constant('Crypto',require('crypto'))
I run the command line, which create new file perfectly with code of Crypto module and app.js file
browserify app.js > bundle.js
I replace app.js by bundle.js in index.html file
I try to test it in service.js
angular.module('mapp.services').factory('abc',['$http','Crypto',function($http,Crypto){
return {
getAllProduct:function(){ console.log(Crypto.SHA256("Message"));
});
} }]);
It return message "Crypto.SHA256 is not a function". I think that "constant" means a value, not a static object, so that I cannot pass Crypto to "constant". So, how can I require all needed modules at app.js file by Browserify and then pass use it at other js file, like $http?
Thanks!
Sorry because of my stupid question. The fact that we can assign Crypto object to constant pool. The problem is my code. To encrypt a string, the code must be
crypto.createHash('sha256').update(mystr).digest('base64');
instead of
crypto.sha256(mystr)
Now problem solved, but thanks for your all reply and comments.
I don't think Crypto will work on the client, it's the server-side library for performing encryption and is largely a wrapper around OpenSSL (see here).
The functions that it wraps cannot be called in Ionic/Angular for the simple reason that they aren't available on the client.
Try using CryptoJS instead as was proposed by this answer - it was designed to be used client-side like in your Ionic/Angular project to perform cryto-related operations.
Related
I am attempting to convert my AngularJS project to run as a hybrid (i.e. 1.x alongside 2+) following the bootstrapping steps provided at the angular.io guide page provided specifically for the task. I have followed the guide with some modifications (primarily just so that I could maintain my existing project structure). My steps in inexact order have been to
include webpack
convert my original app.module.js and all angular modules declared therein to exportable ES modules
(app.module.js became app.module.ajs.ts, which is transpiled to .js)
add a new app.module.ts for manual bootstrapping, as per the docs (looks identical to the file of the same name in the docs) and remove the ng-app directive from the html as it is no longer necessary
import the modules into all dependent controller, direcive and service files.
Now when I serve the project, which I believe is the step I should be on (the steps seemed pretty straightforward...) I get a slew of the same error:
However when I open that file up, I do actually see exports.default = ariaApp.
Also, the .ts file by the same name does indeed contain the declaration and the default export
const ariaApp = angular.module("ariaApp", [])
export default ariaApp;
Has anyone seen this before? / Does anyone know what this error indicates? It seems totally off... All suggestions appreciated! Thank you!!
I want to do some conditional operations inside my angularjs application for different versions of my app. How do I import the version property of my bower/package.json file from my Angular app locally.
I seem to get module not founderror when trying to import the json file (actually anything that's not .ts file). I am not planning to use $http.get(..) to read the json file asynchronously nor installing node/express packages to use require module.
I want to simply use the ES6 or SystemJS module loader for doing this task. Thank you :)
Solution in AngularJS Controller:
var appVersion = require('electron').remote.app.getVersion();
I now, use angularJS, requireJS, bootstrap to structure my project.Just like the title.Because of all router configured in app.js can make this file be so large and difficult to maintain in the future.So is existing some solution to solve it?Thanks.
Yes, definitely. We actually have a routing config file in each section of our site. It keeps it a lot more organized.
In the JS file you want to configure it you will just need to get a reference to your angular module and chain your config file off it. This is done by simply writing our your module as you would without the dependency brackets like this:
angular.module('myApp').config('configForThisRoute',function($stateProvider){
//define your states as usual
}
You can add your angularjs configuration in any .js file or you can give any name of file, but this file must be included first in html.
I am reading how to write a clean code as I am learning the basics of this framework.
If I understand correctly, it is preferred to have one Controller per file, and one module per file but that will end up making my index.html head tag so long if I have to link to all those controllers.js files in the head.
Please look at the image below.
Am I missing something? Thanks
Why don't you use any build tools (e.g gulp, grunt, webpack, etc.)? They can actually combine all your js into one bundle and include it in index.html automagically.
After reading hundreds of lines about browserify vs webpack and several how to of both I decided to go for webpack. The main reason it's because I liked the idea of bundling everything into a js file.
I have an angular project already working and I want to refactor it for webpack. The problem? My project is using angular 1.4.7, ng-animate and plain javascript (ES5) and all the tutorials and manuals are for ES6. I don't want to refactor my project so much. What's the way to go? I would like an example of each angular module : factory, directive, controller and so on. Many thanks
I typically have a feature.module.js file which has my module definition and requires all of the directives / services contained within the module. Also has the external dependancies.
/* module.js */
angular.module('my.module',['dependancy1', 'dependancy2']);
//External libraries
require('./dependancy1.module.js');
require('./dependancy2.module.js');
//Internal components
require('./thing.directive');
require('./thing.service';
/* service.js */
angular.module('my.module')
.directive('yourDir', function myDir(){...});
I'm dealing with the same problem now. And I found something that works (work in progress, but at least I can see progress). My steps:
Install yeoman
Run this angular-webpack generator. Select 'ES5' when asked (the other option is 'ES2015', which I guess is the same that 'ES6')
Start modifying the automatically generated boilerplate with your Angular code
Yes, you still need to learn about gulp and sass, but at least you can run a simple AngularJS app using the old ES5 syntax, and start modifying it.
I'm probably blogging about this. So, I'll update this answer then.
I tend to do this:
app.js:
require('/any/angular/deps');
var subModule = require('/some/sub/module');
var app = angular.module('myApp', []);
// pass the app module in sub modules to allow them to define their own config
subModule.configure(app);
/subModule/module.js:
var someSubDirective = require('./subDir/directive');
export function configure(app) {
someSubDirective.configure(app);
}
/subModule/subDir/directive.js:
export function configure(app) {
app.directive('myDir', myDir);
}
function myDir() {
}
My idea is to let all sub modules handle their own configuration, so declaring config or constant, factories or providers. Letting this then bubble up to the app.js. This means its really easy to delete a folder from your structure, because it is one line removal from it's parent module.
This also makes relevant file paths a lot shorter and easier to handle.