Javascript plugin written in AngularJS - javascript

I made an app in Rails and AngularJS. A startup approached me to port the technology over to their site, but they have very limited technology resources, so the idea is to make it very easy to integrate.
I want it to work a bit like Google Analytics - they include one external javascript file and add a snippet of code with a reference id/code in it. Then the rest is handled on my side.
I haven’t done this before, especially not in AngularJS. I want to use AngularJS in a section of their site without them needing to install it.
Should I just put all the directives and services into a minified file or should I have a smarter setup?
I would appreciate it if anyone could point me in the right direction. I'm also looking for any recommended gems/tools that can help me with this. I’m happy to explain further if needed.
Update
I ended up using Brunch, this article was very helpful.

You could create a grunt build task that will inline your html templates as strings into your js, and then concatenate and minifying your code.

Related

any solution like T4MVC for external JS files?

I m using T4MVC in MVC project. My question is is there such a solution for external JS files ? Many times there need to use URLs or strings (to compare) in external JS files. A change in sting break application. Or please advice T4MVC can be used for same.
Highly appreciate your time, help and sharing.
Try T4MVCJS
We got it to work on a proof of concept project, However we managed to delete that project and cannot get it to work with any of our existing projects. Maybe you'll have more luck than us.

Most efficient way to get a Three.js project to work in a ruby on rails app?

I'm trying -unsuccessfully- to get a Three.js project to work within the Ruby on Rails framework
I keep thinking that there must be an easier way to do this than the way I'm doing it at the moment
First I googled for a guide/tutorial on how to port working Three.js code to rails and found very little on the subject. Which I figure means: either people don't do it very often -or- that it's so obvious that no one has bothered to document it.
Next
I googled for a three.js gem and found one here - http://rubygems.org/gems/threejs-rails
(which I gave up trying to get to work - after much messing around with the manifest file)
Next
I installed the source of Three.js into the vendors folder and messed around with the manifest file again. This time I had more success - although there seems to be dependency issues within Three.js that require_tree (and myself) are oblivious to.
So theoretically, I could probably get it to work after a several hours of figuring out the Three.js loading sequence, but this doesn't feel right.
I feel like I've gone down a blind alley here and I'm missing something obvious.
is there a better way to do this?
Rails is, primarily, a back end server side framework. Three.js is a front end library for rendering WebGL in a browser. They have little to do with each other. I think you're trying too hard.
The process is the same as adding something like jQuery, or any other javascript library.
Drop the three.js file in app/assets/javascripts/three.js
Add #= require three to your application.js.coffee
Ensure that javascript_include_tag('application') is part of your application layout template
Now launch the server, load a page, and type THREE in the javascript console. If you get a return value, your good! Now write some custom javascript, save it in app/assets/javascripts and include it on the pages you want to do awesome 3D stuff.
You can also use the following gem threejs-rails that I created for my rails app today. It works right out of the box if you're on rails 4+. Fork and submit a PR if you need further support on it!
Most efficient would obviously be via CDN, I plan to add that support soon.
I found it the probably easiest way - though not the proper Rails way - to include all dependencies as written here https://guides.rubyonrails.org/working_with_javascript_in_rails.html
and then to simply create a partial with the JS code inside of a script type="module" tag. Though Alex Wayne's way is probably better, this one works, too.

How can I reverse engineer my JavaScript files with js/uml?

Goal
My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.
How far I've come
I searched the internet and found out js/uml is the first place to go.
I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:
mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))
I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.
Problem
Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.
Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.
https://www.npmjs.org/package/wavi
Well, I think I have come quite close.
There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.
I tried it, it does generate the graphs but somehow i can't make to do right.
I hope this will help you or someone.

Packaging JavaScript & CSS

I was tasked with figuring out how to package JavaScript and CSS into one file per each. We have a java servlet application and we use JQuery if that makes any difference. We use ant to script our builds, so easy integration with Ant would be nice. We want to do this to reduce caching issues and to reduce number of requests to the servlet.
I found few tools out there, but not sure what are pros/cons of each. Here is the list so far:
JAWR (http://jawr.java.net/)
Juicer
(http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool)
JSBuilder2
(http://www.sencha.com/products/jsbuilder/)
JSLint
(http://code.google.com/p/jslint4java/)
(JavaScript only)
Quilt
(https://github.com/kitgoncharov/quilt)
(JavaScript only)
Do you guys have any recommendations, warnings, advices? Or maybe a better tool/framework?
Thanks in advance!
For JavaScript, the closure compiler integrates with Ant. It can concatenate and minify your JS. You can also use YUI compressor. Here's an example of using YUI compressor with Ant for JS and CSS.
By far my favorite template is HTML5 Biolerplate The build script there is pretty good as a template.
Also, versioned files with long cache times will greatly improve load times.
Replace "being nice" with "a must". You absolutely want something that integrates with your build tool since you do not want to minimize your files manually again and again and again and again and again and again and again and again and again and again.
Jawr - very nice library, makes everything for you, simple to integrate (at least with its Grails PLugin).
The small problem, I havn't found a way (may be it exists) to integrate ALL bundle's dependencies in a single file. (if you don't have dependencies between bundles (modules), you won't regret this decision).

How to work on Javascript projects?

I am trying to write my own Javascript Framework something like jQuery.
I use Aptana Studio for designing websites. I was planning to create a web page and write the Javascript code just as we would do for a website. Then I noticed that Aptana Studio also has a Javascript Project. So I created a new Javascript Project. But it primarily allows you to create only .js files and no HTML files. I wonder what a standalone .js file would do? Would't I need an HTML file to execute and test my Javascript code?
Certainly there must be some advantage to using the Javascript Project. But I am not able to figure it out. Can someone please explain how to use the Javascript Project?
I don't know anything about Aptana Studio, but I'm guessing that you're intended to drive your JavaScript project from another project. Think of the JavaScript project like a self-contained library. It doesn't make sense to include the test code in the library itself, because consumers of the library probably don't want to deal with it. Try creating a second project that imports your JavaScript project and allows you to play with it and test it.
I would recommend that you try Javascript-Test Driver. It has an IDE support and also it seems to be fairly good at helping you debug code. Find more details here:
http://code.google.com/p/js-test-driver/
I would say that while you DO need HTML files; you'd probably wanna do more according to the testing framework you choose; as some work with fixtures other loads up iframe and stuff. But I would presume that writing a whole framework would take more than just HTML pages and a unit testing framework would be more apt for the req.
Screw Unit for JS
http://github.com/nkallen/screw-unit
I know I have deviated from your question; but I just felt that rather than right project structure and HTML for testing what would be more important is a testing framework that keeps development agile and fast.
But that's just me.

Categories

Resources