We Keep Coding

What is the correct way to use javascript (with dependencies) in a Laravel (5.4) Package?

I have created some functionality in my Laravel 5.4 project which I think will be useful in other projects. To make it reusable, I've implemented it as a Laravel Package (following instructions here: https://laravel.com/docs/5.4/packages)
The package defines some views, and the views require some javascript, and this javascript requires jQuery.
So how can I set things up so that the scripts get executed when my views are rendered?
The Laravel documentation describes how to use the service provider's publish() method in order to have package scripts copied to the public directory (https://laravel.com/docs/5.4/packages#public-assets). But does this assume the scripts are already compiled / minified? And once they're in the public directory, how should we load them? And how do we handle script dependencies (in my case jQuery)? We don't want it being included more than once.
And where does Laravel Mix come into this?
I think ideally we should to be able to put the javascript source code somewhere in the package:
require('jquery');
// do things with jquery
Then when I run npm run dev (or npm run production) the package javascript is compiled by Mix along with the app javascript and all their dependencies, and the end user's browser just needs to download app.js.
Can anyone suggest how to accomplish this?
Or if I'm going about this all wrong, then can anyone suggest how to do this the 'right' way?

Include AngularJS partial templates in Closure Compiler output

I'm just starting out with AngularJS (1.4.7) and hoping to produce a concise build output using Closure Compiler for a new application.
I'm successfully generating a single output file containing all my application's JavaScript preceded by each of the libraries on which it depends.
However, my application uses ngRoute and this is loading a controller and a partial html template for each route when visited. Each template is loaded as required so the first time a route is used there is a delay as the template downloads.
I'm used to working with RequireJS in which a template can be treated as a resource and bundled into the compiled build product, however I don't see a way to do this with Angular and Closure.
I assume this is a problem that has previously been addressed but I've had a very hard time finding relevant information via Google.
Is it possible to include partial templates in a build product, produced either with Closure Compiler or some other tool?

The best way to handle this is a two step process:
Use the r.js optimizer to order your dependencies and create a single JS file.
Use closure-compiler to compress the output file from r.js.
The require js optimizer is available as both a grunt and gulp plugin.
With gulp, you would simply pipe the requirejs output into a compilation task. For grunt, you'll need to set the optimize property to none and generate an intermediate file. The intermediate file will be your js input file for closure-compiler.

AngularJS share app core with multiple projects with Gulp

I'm currently developing an app with angularjs and cordova. I use Gulp to compile all the js, less, etc and merge it into a www folder. It's a big project and many apps will be created based on the same base core. I don't want to "clone" the entire project each time a have a new client because if a bug is found or a feature has to change I will have to redo everything in every single project.
I want to know if there's a way to create a build system with Gulp, where I could have a base core js/less, and that base js/less core could be replaced if the same js (or angular module name for instance) is found on another folder.
Example image:
folder structure
In the above example, I will need a specific task to build "ProjectA".
I was thinking in something like "gulp build ProjectA" and then all files in "AppCore" folder would be compile only if there wasn't the same js, less or angular module inside "ProjectA" folder.
Or I don't know if is possible also to compile everything in "AppCore" and then override that result with the content found in "ProjectA" if equal. If something new in "ProjectA" that would be added.
Is there any gulp plugin to achieve this? Or does this have to be done in a different way?
What is the best way to create a flexible project like this with a shared based code core?
Thank you

Building a angular JS web project

I am trying to build an angular js web project. The project will be such that, on UI side, I will have html with angular to handle presentation. Data on/from UI will be obtained/posted using ajax.
These ajax calls will take us to one of the methods in spring controller. These method will connect to another Rest WS application to obtain data / save data.
I have been able to understand the Angular JS framework and I feel comfortable to an extent working on it now. However I have no experience in designing an application structure from scratch. I have read http://scotch.io/tutorials/javascript/angularjs-best-practices-directory-structure to understand the directory structure's best practices.
I have integrated angular with my eclipse IDE.
Now, my question is, how should I go ahead with designing my application. Will it be the way we normally use js in a J2EE application? Or it is to be done in some other better/advisable way?
Any help is appreciated.
PS: Is it advisable to build an angular JS as static Web Project? I read this somewhere, I cant find the link now.
Thanks

Here are some tips:
Separate your javascript files and organize them so that they are functionally together.
Setup multiple SPAs if necessary, and organize your files/folders in the same way for each SPA:
home\index.html
home\index.js
home\index-controller.js
home\module.js // contains the Angular module definition
home\templates\user-control1.html
admin\index.html
admin\index.js
admin\index-controller.js
admin\module.js
admin\templates\user-control2.html
Create Angular UI modules specific to your application so that they can be re-used
shared\your-ui.js // this angular module contains UI directives
shared\your-ui\directives\table.js
shared\your-ui\directives\table-controller.js
shared\your-ui\directives\templates\user-control.html
shared\your-ui\services\test-service.js
Use Grunt or Gulp to build your JS files, minify them, run automated tests, and deploy them to where they need to be. Deploy your Angular UI modules and deploy your App.js module.
Use a javascript module loader (RequireJS, Webpack) so that dependent files can remain separate.

Is this a good method for template cache busting in angular?

I'm trying to implement some cache busting on my angular application in a way that it will still allow caching but break it anytime we push new code to production. My setup so far involves using grunt cache-breaker https://www.npmjs.org/package/grunt-cache-breaker to dig through my concatenated angular app.js file and append query params to any string ending in a .html file extension. I also do this for any template files I have that are using an ng-include. One complication this creates is that now I need to first copy my template files to a dist/ directory so I can safely .gitignore the cache-busted versions and not have to commit all of my templates everytime the cache is busted (and create conflicts).
My question is not how to do this but more of a sanity check as to if this is a practical way of avoiding template caching on new code? I have seen examples of disabling template caching in angular but it seems like it is something I would want to use in between code pushes when files are not changing.
How do other navigate this issue?

I think a popular approach is to use something like ng-templates (with a grunt plugin) to generate a JS file that pre-caches all of your templates. Then use the usemin grunt workflow along with an asset versioning task to version the JS file.