I have an angular app and I concatenate and minify all of the angular.js files so it is more difficult for a user to "borrow" my code. I want to restrict access to my angular directory, which is inside the web root. I tried the following, but it doesn't work:
app.get('/angular/', function(req, res) {
res.redirect('/');
});
The problem is that anyone can enter mydomain.com/angular/controllers.js, for example, and see the controllers.js file. I am a bit surprised since I thought that I specified in the routes to redirect the user when attempting to access any file inside the angular directory. What am I doing wrong?
A user can just open the web inspector for their browser and read your code once it's running in their browser so doing this won't solve your problem.
You should instead minify and uglify the code into a single bundle perhaps? I do this using browserify as you can see in this project https://github.com/evanshortiss/cordova-angular-browserify. Then you can just run the code that has been bundled through uglify.
If you don't want to use browserify you could just find another way such as reading the JS files in your html file, then read them all and dump them into a single .js file in the correct order.
As there are beautify solutions, Minify or uglify can't be good solutions!
You can move your private files/folders into directories which are not http accessible.
Hope this helps! :)
Related
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example
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 have created a directive that uses angular-translate and it is working fine with this configuration :
$translateProvider.useSanitizeValueStrategy('escape');
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/messages_',
suffix: '.json'
});
$translateProvider.preferredLanguage('fr');
$translateProvider.fallbackLanguage('fr');
$translateProvider.useLocalStorage();
and two files in i18n folders :
* messages_en.json
* messages_fr.json
Now I want this directive to be usable in another angular application so I use it as a bower dependency of my new application with all necessary .js and .html needed but the json files in a single .js file using templateCache.
The directive is working in my new application, however my new application is trying to load the json file from http://localhost:9000/i18n/messages_fr.json ans gives a 404 error.
This error is normal as I do not include the json files in my dependency, however I do not not know where and how I should. If I include them in my bower depdency or add it in templateCache, it is not working.
An easy solution is to copy the file in a i18n/ folder of my application but it is not what I want, I want to reuse the files defined with my directive. I tried modifying the useStatidFilesLoader attributes but without success so far.
EDIT
I figured the real problem was I intended to use two configurations of the translateProvider :
- one with common messages file in my dependency config
- another one with another message file name in my new application config.
But as it is a provider, hence a singleton, only one configuration gets executed. So it is not possible to load messages from two different files or I missed something in ngtranslate configuration.
What I did is including the common messages file in my bower dependency and add a grunt task in my new application that merge this message file with my new application message file. To do this I use grunt-merge-json.
I had the same question and here is your answer. All you need is
$translateProvider.useLoaderCache('$templateCache');
Would it be possible to support the $templateCache?
I was unable to find any open source video recorder that can be integrated with an angularjs app. I came across Youtube-direct-lite but I have no idea how to integrate this with an angular app. I am trying to host my own instance of youtube-direct-lite
I have already configured the config.js as been told in this doc. Should I just copy paste all the js, css files to my project and use the index.html as a partial to display the recorder?
about configuring direct lite:
in config.js enter your developer-key and client-id.
then read the README file
download nodejs console
browse to the folder with the source in it
run this command : node r.js -o app.build.js
and it'll build the minified source for you, then copy and paste that source into your website and use the index.html & admin.html as the
and i'll work just fine.
about angular with direct lite:
I've seen so far only one implementation for it that is in youtube/dev/demos
http://www.youtube.com/yt/dev/demos.html#/upload
if you opened the sources, you'll find that it is uses angular, and it applies ytdirectlite, but I don't know how to use it and I still cannot find the opensource for it.