I am implementing AngularJS Directive.
There is an javasctipt file and Html template file under /src folder.
I want to use Gulp to compile them together, and output to /dist folder.
How can I do it?
First of all i would like to say that is not a good practice to combine two different extensions file in one.
But if you willing to do, you can achieve it by concatenate the files.
here is the good one link
another link
Related
Below I have shared my current directory structure for my AngularJS application that I have been rewriting from the first time I wrote it while I was learning the javascript framework. I have been revising this project structure to be more of a component-based application in case I need to further add new features to the project.
I currently have two index.html files and trying to figure out which one I should keep. Should keep the file existing in the public directory or should I keep the file inside of the src directory? Keep in mind that I have run a build script to create my app.css and app.js file.
In both index.html files, I have an ng-include file where I am attempting to load view partials and none of them are loading. I do not receive any javascript errors.
<ng-include src="../app/components/employees/views/form.html"></ng-include>
<ng-include src="../app/components/employees/views/stats.html"></ng-include>
<ng-include src="../app/components/employees/views/table.html"></ng-include>
I was able to restructure my application and my build processes which easily removed the need for a public directory. By doing this I also was able to adjust the path to the partial files so they could render propertly.
following this application structure in angular 2.
angular app structure
If I put the compiled .js and .map files in the same directory as typescript file it becomes more cluttered structure.
so, where should I place the compiled js files (.js) and map (.js.map) files?
where should I place the compiled js files (.js) and map (.js.map) files?
You can git ignore these .js / .js.map files and they will not clutter your git history and stuff (and your IDE might support hiding them as well).
That said you are free to use the outDir option to move the generated assets into a seperate directory 🌹
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.
I'm looking at this sample Angular App.
In the main html file called [index.html][2], there is this line:
<div ng-include="'header.tpl.html'"></div>
However, there is not file header.tpl.html in the same directory.
How then does Angular know where to find this file?
The linked sample app is built using Grunt, so the file/folder structure of the built application differs from the one you see in the repository.
For example, the templates you are asking about, are collected by html2js (Grunt task) and compiled into a single JavaScript file containing code that adds all templates to $templateCache (causing them all to be included on app initialization instead of being lazily loaded when required). When the ng-include starts looking for files, its first step is looking into the $templateCache. Only when it cannot find the template there, it tries to load it from the server (and save it to $templateCache for subsequent uses).
See Gruntfile.js in the repository for build process details.
I have set up my application based on this example
http://backbonetutorials.com/organizing-backbone-using-modules/
The thing that I now have more than 50 html files. It takes more than 5 seconds to load all files on first load. I know using node.js and require.js I can compress or minify the .js file and .css files but was wonder if there are any way we can compress all html templates into one file to speed up.
I'm about to face this very problem in my project and here's what I plan to do:
Write template loader function so that details of how templates are retrieved are encapsulated within. After that I only have to change one place in code when template handling logic changes.
At build time, compile my Handlebars.js templates into JS code. The process is described here.
Use R.js from require.js package to build single JS file from all compiled templates.
If you are using templates like described in that article (with require !text, _.template etc), then they will be compressed into JavaScript file as well. Give it a shot.
It doesn't make sense that 50 html files are loaded simultaneously into the browser, by right the require.js and node.js should be loaded once into the browser. Then ur index.html will select the html file amongst the 50 to append further as its content.