Angular: Relative js/css path - javascript

I'm new in angular, bower, grunt, etc stuff so I completely stuck with current issue.
My project is built based on angular.
In my index.html path to js/css like this
<script src="/scripts/shared/flow-item.js"></script>
after compiling with grunt path to js/css in index.html
<script src="scripts/app.da1aee60.js">
so that if i deploy project in ROOT on tomcat everything works perfect
but if i deploy it in some folder like MyProject/ and call index.html we see application still looks for scripts by path http://localhost:8080/scripts/app.da1aee60.js instead http://localhost:8080/MyProject/scripts/app.da1aee60.js
Is it possible in some say project look for script in proper path?

You can set base path in html (inside head tag):
<base href="/scripts/MyProject/" />

Related

I can't use Javascript in Dreamweaver

My Javascript wont activate on dreamweaver. I attached it and everything but when i try to call it with script tags it does not appear on my live preview. i have it attached by this code
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
If someone could please help that would be awesome! :D
Live mode runs Your code in some virtual webserver and it cannot get local js file. Since browser may block resource from sharing (CORS). Think about putting js file to relative to html file and defining relative url to js file. Create js folder near to html file and put js file there and in Your html file define src="js/Untitled-2.js" – num8er 12 mins ago
Thanks Num8er
In my opinion, it is best practice to keep all files relative to the project. This means setting up a project folder and keeping files organised in sub-folders.
Consider this project structure:
Project folder
CSS folder
style.css
Javascript folder
script.js
Images folder
image.jpg
index.html
The sub-folders are directly children of the project folder, and inside each folder is the corresponding files.
The html file is also a direct child of the project folder (it's not in any other folder).
This means all the related files are relative to the html file.
So in your html file, you can link up these files easier.
<link href="CSS/style.css" rel="stylesheet">
<script src="Javascript/script.js" type="text/javascript"></script>
<img src="Images/image.jpg">
As you can see all the files are linked without a full path, this is called relative linking. Absolute linking is the opposite in which you specify the full path, such like you are doing at the moment:
<script src="file:///C:/Users/Matthew/Desktop/Untitled-2.js" type="text/script"></script>
This is good in certain places, however you should always try to aim for relative linking. If you follow this, you shouldn't have any more problems.

Linking a local copy of bootstrap

So Im trying to link a local copy of bootstrap (It works with a CDN). I have bootstrap.css installed in the same directory as index.ejs and yet I keep getting these 404 errors.
So the file path for bootstrap.css is /home/daniel/scheduler/doc_display/app/bootstrap.css
and index is: /home/daniel/scheduler/doc_display/app/index.ejs
Any help would be much apreciated
Your browser is going to look for the file relative to the location of the page it loads, so you need to make sure your path is correct.
Right now it's looking for it in the same folder as the index, which it looks like isn't where it's located.
I put the bootstrap.css file inside of my dist directory then included the new path inside the link tag. For some reason webpack seems to find paths when they are in the dist directory

gh-pages ignoring project directory when searching for resources?

I have a website I have been working on that works just fine locally but when deployed to gh-pages has many 404's when trying to pull in resources.
For example, I have a line of css for the background which is
background: #fff url(/assets/images/bg.jpg) repeat top left;
the 404 I get is this{
github.io/assets/images/bg.jpg
The path should be
github.io/myProject/assets/images/bg.jpg
How can I change this to work?
What is happening is that in your local setup the assets folder is in the same directory.
Lets say your local path looks someting like this:
file:///index.html where your assets folder is a sibling to index.html. In this case it works because / goes to the beggining of the directory. which in this case is : file:/// and there it see's the assets folder so it works locally.
On github now, you have a repo which is basically my-project. In my-project you have index.html and the folder assets. So when you say /assets/ here the begginnig directory is github.io so it looks for assets there which obviously doesn't exist.
Solution
Dont add / before assets. As long as assets is in the same directory as where this code is written you should be fine.
Also take a closer look at relative paths to understand it better: http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
While gh-pages are generated by Jekyll, you can use his magic to ease development.
Create a _config.yml file at the root, containing :
baseurl: myProject/
You can now call any resource with {{site.baseurl}}assets/images/bg.jpg
which will automatically translate to myProject/assets/images/bg.jpg.

ASP.NET MVC Bundling Subfolders structure

I want to include javascript files from whole folder and subfolders into a single ASP.NET Bundle. The purpose of this is to load all files from that folder at once.
The idea is to create an angular application and load all app files with a single bundle.
Is this idea ok ?
The problem I have is that the Script tags added to HTML don't respect the subfolder strucutre of my application and the files can't be found.
Bundle config:
bundles.Add(new ScriptBundle("~/bundles/app").IncludeDirectory(
"~/app", "*.js", true));
Folder Structure
app
controller/appMenu.js
modules/navigation.js
app.js
On client side the included tags look like this:
<script src="/app/appMenu.js"></script>
<script src="/app/navigation.js"></script>
I think it might be related to this:
http://aspnetoptimization.codeplex.com/workitem/105
What version of the System.Web.Optimizations assembly are you using?

Including JS files in Derby.js

I am trying to learn Derby.js and I am having a lot of trouble. I know I can include packages such as jQuery through npm and add it to the node_modules folder, but this isn't quite what I want to do. I want to be able to include these files like I do in normal HTML.
So I want to do something like <Head:> <script src="js/jquery.js"></script>. This does not work though because it cannot find the js directory. I expect this has something to do with the way node.js runs an app and that the app itself will not hold the js directory.
Any help would be appreciated!
Derby offers the Script: tag:
<Scripts:>
<script type="text/javascript" src="/components/jquery/jquery.js"></script>
The components directory is because of the usage of bower. Put the components directory into the public directory. According to the express FAQ, the static routes search below the given directory (which is public in derby's example application). Configure bower to put the files under public/components (Choose bower install directory).
The public directory is configured at lib/server/index.js: .use(gzippo.staticGzip(publicPath, {maxAge: ONE_YEAR})), where publicPath is configured above to path.join(root, 'public').
Be aware that the "idea behind the inline script is that it runs immediately, before any of the external scripts are loaded. This should only be used in rare cases where the script should run before the page is displayed in the browser, such as sizing something to the window or autofuocusing an element in browsers that don't support the "autofocus" attribute." Nate Smith in the derby google group.
Inline scripts should be placed in inline.js, located in the same directory as the application's index.js.
If you require jQuery to do something on the loaded page, following code snipped worked at my side (Firefox, Chrome) in inline.js:
window.onload = function() {
alert($(this));
}

Categories