Most of the time I encountered sap.ui.demo.wt as default namespace which I replaced with the name of my project(Test) and everything worked fine but lately I found this: sap.ui.demo.navi when I was trying to implement navigation between Views...should I replace sap.ui.demo.navi with Test too or it should be something else? Please help me....and thank you for your time:)
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function(Controller) {
return Controller.extend("sap.ui.demo.nav.controller.Home", {
}
});
it depends on what's the set namespace for the resource root in the bootstrap in the index.html of the application. the data-sap-ui-resourceroots attribute in the bootstrap tells the sapui5 core where the resources in the defined namespace are located in the folder structure of the application relative to the index.html of the application.
i.e. in the code sample the resources of the application are located in the same folder as the index.html. because of the "./". when the application comes across the namespace "sap.ui.demo.wt" it starts to look for any resource in the folder of the index.html.
e.g. sap.ui.demo.wt.File means that the application looks for a File in the same folder as the index.html located.
e.g. sap.ui.demo.wt.view.File means that the application looks for a File in the folder view which is located one folder up from the index.html folder, i.e. ./view1/File. whereby again "./" the folder is where the index.html is located.
i.e. it's neccessary to replace "sap.ui.demo.nav" with "Test" if "sap.ui.demo.nav" is the namespace set in the bootstrap of the index.html. should e.g. "sap.ui.demo" be the namespace and "nav" just a folder in the folder structure of the applicaton then it's neccessary to replace "sap.ui.demo" without "nav".
from the structure of "sap.ui.demo.nav.controller.Home" i guess that "sap.ui.demo.nav" is the namespace, "controller" the controller folder in the application's folder structure and "Home" a controller. that would mean it's neccessary to replace "sap.ui.demo.nav" with "Test".
<script
id="sap-ui-bootstrap"
src="/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./" // tell here the app where the resources are located
}'>
</script>
Related
i have multiple folders with other htmls, i want to link them all between each other.
folder structure looks like this:
Main Folder
index.html
nav.js
Project Folder
project1.html
project2.html
images
image1.png
image2.png
this is how i try to link:
index.html:
project1.html: <img src="./images/image1.png> <script src="./nav.js">
it works with visual code live, but doesn't work when i open just index.html.
i get error for not loading neither image or script, and when i press on a i get another error of page not found.
i want to figure out what is proper way of linking items inside multiple folders and in which case i have to use "./" or "/" and if there is anything else.
When you start a URL with "/", it goes to the very beginning (root) of the path.
When using VSCode Live Server, it runs a local server which has a root path of the directory you have open in VSCode. With live server, you will have a URL like localhost:5000/index.html. As the root path is in the same location where the index.html is located, you can just type /index.html to access it.
When you manually open the index.html, the root directory changes to the root of the drive you have the file located in (e.g. C:). If you open the file manually, your web browser is opening something like C:/Users/User/Desktop/Website/index.html. If you were to try access /index.html, it would then go to C:/index.html on your hard drive.
If you are trying to access a file that is in the same directory as the current html file you have open, you want to remove the / from the beginning of the URL.
If you are wanting to access a file that is accessible from the parent directory, you want to have it start as ../
To make what you currently have work when you directly open the .html file, make the following changes:
index.html
Before:
After:
project1.html
Before: <img src="./images/image1.png"> <script src="./nav.js">
After: <img src="../images/image1.png"> <script src="../nav.js">
I want to import a template that I downloaded off the internet into my vue project. The template has its own HTML, CSS, and Javascript files. How do I use vue-router to access the index.html that is in that project without converting them into vue components?
I'm not sure if v-html is the way to go since I have to import and then convert the HTML into a huge string.
I'm doing this for my landing page so it doesn't need to access Vuex and all the other complexities. I just need it to be displayed as a normal HTML.
Here is my folder structure
What you can do is, serve the landing page off the root of your webapp, and serve vue's dist folder from a subfolder.
For example, your landing is served from abc.com/index.html and your vue app is served from abc.com/app/index.html, and the you can use a simple anchor to send the user to the vue dist folder.
The actionable steps would be -
1. Set vue's dist folder to public/app
2. When finally deploying, set webapp root to public and make sure the index.html inside public is the one of the landing template you downloaded.
So, now, when user will go to /, your downloaded landing will be shown, but when they go to /app, vue's build folder's index.html will be returned, thus taking him to the vue app.
I'm building a multiple page website, and i would like to know what is the best way to organize folders for each page?
1
This is what i did:
I created a main folder named: www.mywebsite.com
2
And in that folder i created a folder for each page:
3
in the assets folder i have js, css, img
Is this the correct way of doing it or is there any better way, i know i can import, in my sass file other sass files and create a main file, but im not sure is that a good way?
You don't need a folder for every page. Just put your html in root folder and make a directory for js, images and css.
Your pages don't need sub folders, they're just for assets that are going to be called in i.e.e an images folder for your images and an assets folder for your CSS or JS files. If you add your pages to a sub folder then you'd need to add that into the URL: string i.e. mywebsite/home/home.html. Also, your server is looking in the root folder for home.html, or index.html (dependent on server), so it won't know where to point when you just type in mywebsite.com
Don;t forget to account for the folder paths when calling any of these in your HTML files i.e. your menu can just call '/home.html', '/about.html' etc While anything in a sub folder will need to be referenced as such i.e. 'images/image.png'
There's no need for that much folders - you can put all files in the root folder or in separate folders (that lie in the root folder) for html, css, js, php and so on
I am new to AngularJS. I am trying to use ng-include to include an external HTML page in my main HTML page. But the problem is I am not able to include it and getting 404. Following is the folder structure and the code,
Project Folder Structure:
buttonClick.jade (This is the starting page.)
doctype html
html(ng-app)
head
link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='/javascripts/angular.min.js')
body(class="mainPage")
//include footer.html
include pageinclude.html
pageinclude.html
<div>
<div>Include Page Demo</div>
<div ng-include="'footer.html'"></div>
</div>
Note:
1) When I include footer.html page directly in the .jade file then it is working fine. But when I do the same using ng-include in the HTML file it does not work.
2) I have also tried the following ng-include ways,
<div ng-include="'footer.html'"></div>
<ng-include src="'footer.html'"></ng-include>
ng-include is a client side include and as such the path to the included html file is relative to the client perception of the url.
Since jade is abstracting your folder structure and does not provide direct access to your views folder you should probably put the included html file on the public folder just as any externaly accessible file.
When you include the footer in your .jade file (As per Note 2) you are doing a server side include which uses the server directory structure.
I also had similar problem and I'm also new in Angular and Node :)
I'm not sure that my solution is safe, so if itsn't let me know about that.
I've solved it by expose partial directory with express.static middleware.
So add something like that to the app.js:
app.use(require('less-middleware')(path.join(__dirname, 'public'))); //common
app.use('/views', express.static(__dirname + '/views')); //serve views directory as assets
Then you can access your partial from client side:
<div ng-include="'/views/footer.html'"></div>
The problem I am facing is this:
<div data-role="footer">
<a class="ui-btn" href="RV2.cshtml">Anchor</a>
<p>THINGS WRITTEN IN FOOTER</p>
</div>
In href, I am passing the name of file as it is, because RV2.cshtml is in Views folder and this file, from which I am calling RV2, is also in Views folder. But its not working this way. I have to put RV2.cshtml in Assets folder and then this HTML link starts working.
Why is that?? And I want all my views in Views folder not in Assets folder. What should I do to achieve that??
Here is the snapshot of folders:
Now this works fine.
But I want it the following way:
It is just not possible for the WebView to access stuff outside assets. The files outside get compiled, while assets are not being touched and just packaged with the APK file.