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.
Related
I have an html file that I've turned into a string to be used with dangerouslySetInnerHTML. Everything renders fine except for the images within that html string. I can't seem to figure out what path I should provide. Currently I have them in a separate assets folder while the js file is in a dir one level down.
Your React .js files' location are irrelevant to the final address you need to provide to your src attributes. That's because a React up goes through a build process (development build or production build) where all the js files are bundled together and your public folder structure will be very different than the folder structure you have in your development (not to be confused with a development build).
In a normal React app setup (say we create it with create-react-app), your final html is rendered in public/index.html where public is the root of your webserver. Now, let's assume you have your images in a folder called assets directly at the root of your webserver. Then your folder structure will look like this:
public/
index.html
assets/
img1.jpg
img2.jpg
Now you need to declare your img tags as follows:
<img src="/assets/img1.jpg">
Hope that helps.
I am using sencha cmd 6 for building my application.
my folder structure is
classic
src
model
view
account
jobs
portal
portal.js
controller
store
production build process execution is successful but when i load that build its giving .js file not found error.
So i include all js files in folder structure into main js portal.js then .js error is removed and build works.
But i dont want to include all these list of files in one single js, so can we skip the js include part from portal.js and use any property or attribute to include all js files ?
You can specify with * like 'Ext.chart.*' in requires section of Ext.app.Application.
Hope this helps.
When I was creating project using Yo angular fullstack, I was selected jade is template engin. But I want to change it to html. And I want change all jade file to html file. It is possible and How can, if it is possible.
Once you've finished generating the project through Yeoman there's no way to automatically switch everything back to html. You'll have to either create a new project from scratch with new settings or edit your current project's config files (Grunt, Karma, etc.) to no longer process the .jade files. Of course, you'll have to redo all of the Jade templates into HTML.
Personally, I would create a new project with HTML selected and, then, copy and paste any files from my old project that I needed to keep into my new project.
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.