I learned about ng-include and used it for templates but I am not able to include the page.
The index.html and menu.html are in the same directory and menu.html is to be loaded in index.html
<ng-include src="'menu.html'"></ng-include>
I have included the app's name in index.html.
I want to include menu.html between header and footer. So I have deleted everything in the menu.html except the container div which I want to include. The links and references have also been properly set in index.html
I am really stuck here. Please help me out! Thanks.
edit:
Here is my project structure -
Project-
app-
fonts-...
images-...
scripts-
app.js
controllers.js
services.js
styles-...
index.html
menu.html
...
edit -2
I just found out that when I change my browser, i.e. from chrome to firefox, it loads successfully! Now why is this happening?
Are you using a webserver ?
from https://docs.angularjs.org/api/ng/directive/ngInclude
In addition, the browser's Same Origin Policy and Cross-Origin
Resource Sharing (CORS) policy may further restrict whether the
template is successfully loaded. For example, ngInclude won't work for
cross-domain requests on all browsers and for file:// access on some
browsers.
Related
I have two javascript files:
vendor.js - where I have angular.js and another libs;
app.js - own code.
But when I loaded it prerender not opened my page.
When I concatenate it to one file - all OK.
How can I fix it?
Looks like you might be loading those <script> tags in the <body> of your page. Scripts that are in the body are loaded asynchronously so they can load out of order (and cause javascript errors if loaded out of order). Chrome and most browsers handle this nicely but PhantomJS can load them out of order.
I'd suggest trying to move those <script> tags into the <head> and see if that fixes your issue.
I am creating a static site using angular 1. I done routing with ui-router.
Now I want to remove # tag from the url.
I googled it and got solution to enable html5 mode.
I done it as below:
app.config(function($locationProvider){
$locationProvider.html5mode= true;
})
and in index.html is added <base href="/"> but its not working.
and when i hitt localhost/myapp/ its showing Internal server error.
Please help me how to fix it.
Once you enable html5mode, you will need to rewrite your server.
Without html5mode, your browser would be making a request to http://localhost/ when the URL bar read http://localhost/#/myapp/ (because the browser doesn't send anything after the # symbol).
With html5mode, now that the # symbol is gone, the browser is making a request to http://localhost/myapp/, which your server may not be configured to handle.
Here's a resource that might help you out: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I have an Angular app which I am serving from Play.
The main routes within Play all serve some HTML pages which contain ng-include statements to some angular templates which are in a "templates" folder in public...
<div ng-include="'#routes.Assets.versioned("templates/test.html")'"></div>
This works fine as I can use Play to reference the assets as normal. Now when the page loads in the browser, each of these templates load and in turn try to pull in further angular templates...
<div ng-include="'templates/test2.html'"></div>
But this results in a 404 as the "templates" folder cannot be resolved.
How can I have a truly public "templates" folder with Play where each of angular can pull in whatever templates it needs in the browser?
Thanks
You will need something like this in your PLAY routes file:
GET /templates/*file controllers.Assets.at(path="/public/templates", file)
In this link you can see the whole solution
I have an angularjs (v 1.2.19) application that consists of two separate html pages (or actually these are two seperate angularjs apps in one folder):
index.html
edit.html
I am having some well-known compatibility issues on IE 8 and 9 (both do not support the html5 history API).
My config contains: $locationProvider.html5Mode(true).hashPrefix('!');
I do not have any routing in the application - index.html and edit.html can be seen as separate angularjs apps - that have separate angularjs initialization, etc.
The problem looks like this:
Whenever I open the link: http://server/app or http://server/app/index.html everything works fine.
Whenever I open the link: http://server/app/edit.html from ng-click or directly in the browser the page is automatically redirected to http://server/#!app/edit.html
How can I disable the "hashbang" redirection? Edit.html is not a part of the index.html, so it should be loaded directly without any index.html redirection and "hash" routing.
I tried the code located below, but it leads to infinite loop of redirections...
<!--[if lt IE 10]>
<script>
window.location = window.location.href.replace( /#.*/, "");
</script>
<![endif]-->
Any help appreciated.
Try to disable html5mode
$locationProvider.html5Mode(false).hashPrefix('!');
or remove this string completely.
I am using angularJS for implementation. I have created a directory structure for my application so that html pages and js will be identified. I have created a header.html which contains only header part of my application. I am including the header.html by using ng-inlcude in my dashboard page which is on root, in this header.html page I am using some image tags like src="theme/img/logo/my_logo.png".
When I am trying to use the header.html in some of other HTML page which is in directory structure I am not able to get the image on the src in header.html. So to get the image I need to use src="../theme/img/logo/my_logo.png".
Can anyone please give me the solution how I can to use relative or context path for image so that the header.html can work for root pages as well for the pages which are in directory structure.
Thanking You.
Sachin Warke.
Set a base url with
<base href="<path here>">
if you don't want to use absolute urls.