Avoid multiple src files in my html page - javascript

I have a website I'm working on in Visual Studio 2013 and I'm mainly using AngularJS 1.2.6. In my index.html I have a src line for each .js file which for 3 page is 6 lines, 1 js file for each controller and 1 js page for each view.
Is there a way I could consolidate all of these lines into 1 .js file and call that .js file in my index.html?

Yes, you can use something like grunt.js to build a custom build script for your .js files. In your case, you may want to use grunt-contrib-concat with grunt-contrib-watch.
If you are not familiar with grunt, feel free to read the tutorial.

Related

Is there a way to define a new directory for files in Oracle

When using Angular the output creates files in folders such as "dist", "src", etc.
Is there a way in Apex 4.1 to tell the system to look for and use files within sub-directories [inside the images folder?]?
Reason being, I want to create a Dashboard App in Apex 4.1 that integrates an Angular App built using node.
So build the App using Node.js and Angular, then output to Production.
Then take those output files (HTML, CSS, JS) and incorporate them into an Apex 4.1 Theme that uses Oracle database to populate widgets in the dashboard.
This has been easy when using jQuery mobile, but getting Angular to work has been an issue so far due to the directory structure of the output files.
I have been able to get the <body ng-app="app"> code into the <body> tag, just haven't figured out how to tell Apex to use a new folder path in the theme editor.
So far all I can do is use #WORKSPACE_IMAGES# and call files within the images folder:
<script src="#WORKSPACE_IMAGES#jquery.mobile-1.3.0-beta.1.js"></script>
I need to be able to call files like this:
<script src="#WORKSPACE_IMAGES#/dist/index.html"></script>
<script src="#WORKSPACE_IMAGES#/src/index.html"></script>
etc. etc., which doesn't work.
Older versions of Angular seem to create only one output folder: src; and inside that folder is only one .html file, one .css file and one .js file.
Newer angular versions don't seem to support one folder with all the files in it?

How to automatically link asset files that I add manually to my project (JS and CSS) to a template file

I have been using AngularJS for around 6 months now and have recently started using Yeoman and Grunt to help with my workflow.
Is there a way to have grunt update my index.html file for files/scripts that I add manually into my app folder?
I know that if I use the command:
$ yo angular:service New-Service
then a boilerplate file will be created and my index.html file will be updated to reference the new file.
Is there a way to have this functionality for files that I do not add with the syntax shown above?
Thanks for the help.
You are searching a linker. There are several grunt plugins to do this job :
- grunt-asset-linker
- grunt-sails-linker
Here is what you have to do :
Add a grunt task with (grunt-contrib-watch) to watch folders where files are added
Add a task with (E.g : grunt-asset-linker) to link all files from one or many folder to your index.html

Laravel Asset Manager and serving CSS/JS as modules

I'm searching for days now for a proper way to serve the static content for my Laravel 4 website in a most optimal speed performance way. What I tend to obtain is serving only the needed JS and CSS, already minified to each requested page.
Example:
page1.html
-> styles.css - for this page it includes bootstrap.css, jquery-ui, selectize.css, google-custom-maps.css
-> scripts.js - for this page it includes boostrap.js, jquery.js, selectize.ks, google-custom-maps.js
page2.html
-> styles.css - for this page it includes only bootstrap.css
-> scripts.js - for this page it includes boostrap.js
Currently I have all my plugins installed with bower and using gulp tasks I managed to minify all the less, css and js scripts at once, the only problem is I don't know If it is possible to serve only the needed files for a custom page.
In my opinion an optimal solution would be that in each view.blade.php file i provide all the needed assests using
{{ asset('front/css/bootstrap.css') }}
{{ asset('front/css/jquery.css') }}
{{ asset('front/css/selectize.css') }}
And at first run this is compiled and cached. Is there any package that can do that?
I have been always using template system where I include all the needed files in one place and other blade.php files extend this template.

What is templates/system directory in Joomla 1.5?

What is templates/system directory in Joomla 1.5? Is it system template or common directory for all templates? May I put some javascript widgets there?
templates/system directory in Joomla 1.5 is not a complete template which you can apply likewise other templates - beez or ja_purity.
If you place the templateDetails.xml file in the system directory, it will also be listed in the template manager and you can make this template as default too. But, this template is almost blank. Styles and images are very less. index.php file in this template is just including component.php file which is just importing css only.
Hope this clarify your doubts. :)

How to optimize project with Require.js to produce only ONE Javascript file?

I managed to use require.js and it's optimizer to optimize my project. But it generates 3 javascript files:
1. main file
The require.js config file (the one referenced in html as data-main )
2. require.js library
The code for require.js.
3. My application code
Is it possible to merge these 3 javascript files into one single file?
Take a look at the grunt js project, with specific to :
grunt concat
and the plugin for require js:
https://github.com/asciidisco/grunt-requirejs

Categories

Resources