Include the Menu.html in All pages - javascript

I am Developing a static responsive HTML website using bootstrap.
There are 10 pages in the website. here i need a menu(navbar) to access all pages, the menu is in the separate html page.
what i need to do is, include that menu.html page into all pages in my website.
I've tried the following,
<div id="menuArea" ng-controller="menuAreaCtrl" ng-view ng-include src="'menu.html'" ></div>
but it is not worked.
I've already include the angular js as same as below:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
Thanks in advance...


According to angularjs docs you can use ngInclude
<div ng-include="menu.html"></div>


Don't use ng view
<div id="menuArea" ng-controller="menuAreaCtrl" ng-include src="'menu.html'" ></div>


You can also simply use , something like this :
<?php require("navigation.php"); ?>

Related

header.html added with ng-include loads late

I'm new in javascript. I'm making a simple website with a common header in the file header.html and I included it in each page of the site with ng-include.
My problem is that the content of the page loads first and then the header, that pushes the rest of the page down. Is there a way to make the header to load first?
Thanks
EDIT: I also include a footer that has the same problem.

you can load header form external view
<div ng-include src="'views/header.html'"></div>
and then the rest of your app, notice you can put your angular refrence in head section

Did you try adding header via PHP include?
<?php include 'header.html'; ?>
I did find that most efficient way for my website and did the same with footer.

Angularjs include a template from another page

I've got a template in a html page to include in another page. This is because the two html are very long and i can't use only one page to both. So i decided to separate them. Summary this is my case:
in partials/template.html
<script type="text/ng-template" id="myTemplate">
myTemplate..
</script>
and in partials/my_layout.html
<ng-include src="'./partials/template.html'"></div>
But it's not working now. Nothing is showing when the page is loaded. How can i access to the template of the template.html page?

Its likely a relative path issue. The path should be from index.html to your template, not the path from one template to another. Try something like this:
<ng-include src="'partials/template.html'"></div>
EDIT
I just noticed this was a script template. The id that you give the template is the key that you can use to access it in the src of the ng-include. Try this:
<ng-include src="'myTemplate'"></div>

How to render a html partial in another html page?

I need to render a simple HTML page as partial within this div.It is a simple HTML5 application, not of MVC architecture hence Html.RenderPartial is not working.Any help??
<div id= "this_div_will_contain_partial">
</div>

Use jquery's load:
<script>
$(function(){
$('#this_div_will_contain_partial').load('http://www.urpartialurl.com');
});
</script>
I have noticed that you haven't included javascript tag but this is the only option to achieve this. Also the page you are trying to access needs to be on the same domain.

How to Autoload dependencies in AngularJS?

I have an Angular app. I am creating different widgets in HTML5 as follows.
<html ng-app>
<div ng-controller="widget1">
</div>
<div ng-controller="widget2">
</div>
</html>
How do I autoload widget1.js and widget2.js whenever they appear in the markup? I don't want to stuff <script> tags in the header for each widget. I am new to Angular. How is it actually handled?
Thanks!

Wouldn't a directive be a better option then? You could place the contents of widget1.js and widget2.js in the respective link functions. That way they will only be loaded if the directive is in the markup.
Or so I believe, someone please correct me if I'm wrong.

Blogger's layout tag Not supported in HTML : need javascript help

i am working on BLOGGER and i have came across 1 query.
I want to integrate following in the blogger template.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>
</div>
i want to add it from the HTML widget but HTML do not understand
data:post.url or data:post.title
So can i use javascript and how?

I think, you would add the Facebook comment box.
http://www.bloggermint.com/2010/05/how-to-add-facebook-comment-box-on-blogger-blogs/

Categories