I am looking at using Angular JS to mamange my HTML builds more effectively and am trying my hand at templating some of my HTML. However, it doesn't seem to work? I have;
<div class="container">
<div ng-include='"templates/menu.html"'></div>
<div class="row">
<div class="col-xs-12">
<h1>Hello, baby!</h1>
<p>This is the first ever Angular JS I have ever done.</p>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="_includes/scripts/angular.js"></script>
Then I created a folder called, templates, where I have placed a HTML file, called menu, containing a navigation ul saving his obviously as menu.html. When I view index.html in my browser the menu is not rendered. Any help welcome. Thanks
Updated answer (summary of discussion below).
Working example in: http://jsfiddle.net/uo04c05h/
Angular should be started by ng-app directive
<div ng-app class="container">
Path to files is relative to the file where angular is initiated
Related
I am new to angular and this is first time working with angular.js . I am trying to build an single page application in angular which has the following pages
Index.html - which is main page for all rendering
Home page - holds the content of home page
some more pages
All my pages have jquery script to handle modal popup form submission etc.
All of them work, but when i render those pages with ng-view inside index.html. Those script doesn't work,. They do not render as well.
Can anyone please tell me how can i fix this issue or if there is any other way of doing the same keeping those jquery functions.
Here is my file structure
Index.html
<html>
......
<header>
<script src="<ANGULAR.JS>"></script>
<script src="<ANGULAR ROUTE.JS"></script>
<script src="<JQUERY>"></script>
<script defer src="<OTHER SCRIPTS>"></script>
</header>
<body>
<ng-view></ng-view>
</body>
</html>
home.html
<div>
<LOTS OF HTML CONTENTS>
</div>
<script src="<PATH TO JS FILE>"></script>
Switching places of angular with jQuery fixed the issue as suggested by #arnold thanks a lot :)
Basically I need a way to inherit one HTML template(file) from another. The way I see it: parent.html:
<h1><!-- header --></h1>
<div class="container">
<!-- container -->
</div>
child.html:
<!-- extends: ./parent.html -->
<!-- <header> -->
Child Page
<!-- </header> -->
<!-- <content> -->
<span>Content</span>
<!-- </content> -->
Total duplicate of master page feature available in ASP .NET MVC or layouts of RoR.
Can anyone point me to a library that does something similar? (I going to use it as a loader for webpack, so if there is already a loader for this it would be perfect).
I recommend Nunjucks from Mozilla. You can use it via NPM or browser, also it is compiled.
https://mozilla.github.io/nunjucks/templating.html#template-inheritance
I am developing using jQuery mobile and it has a multipage template as below.
I feel that writing html content inside the same html is bloated.
As such, i would like to separate the content in different html and include standalone html page. It should be mobile browser proven. What is the best practice on this and how it could be done?
Note: I do not expect server side scripting (eg: PHP) to solve this problem. It should be done solely on client side without any templating engine. Something like angularJS ng-include.
Sample of what i expect
<div data-role="page" id="foo1">
<html-include src="foo1.html"></html-include>
</div>
Mobile html multipage
<div data-role="page" id="foo1">
<!-- Content 1 here -->
</div>
<div data-role="page" id="foo2">
<!-- Content 2 here -->
</div>
<div data-role="page" id="foo3">
<!-- Content 3 here -->
</div>
<div data-role="page" id="foo1" data-url="foo1.html">
</div>
And use javascript like so:
$('[data-url]').each(function (k,elem){
$(elem).load(elem.data('url'));
});
This will find all elements that have data-url as attribute, and load that page in AJAX, takes the html received and put in it the corresponding html element.
I have been working on large angularJs application which have multiple modules. Problem is that now I have to include static website in that application and that website have whole different layout than my application.
I did some R&D and found some answers which were mostly dependent on angular.bootstrap
https://docs.angularjs.org/api/ng/function/angular.bootstrap
but my application's ng-view is declared in html tag not in body and further my layout is like mentioned below.
<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper" ui-view="sidebar">
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ui-view="content">
</div>
</div>
<!-- END CONTENT -->
</div>
but website structure is totally different from this structure so can anyone please suggest how tackle this situation
should I use two ng-views in my index.html if yes than how can I use two ng-views while declare in html tag.
Thanks
What you're describing is like nested views? which the default router does not support so if you want to use of nested views for that you have to use third-party module.
I'm using OnePageScroll.js for my Drupal website but somehow the Javascript file isn't doing anything. Everything is perfectly imported, even the .js file. I put an alert box in it and it works but somehow he doesn't do the rest.
Link to OnePageScroll.js
<section class="page1">
<div class="page_container">
<h1>One Page Scroll</h1>
</div>
</section>
<section class="page2">
<div class="page_container">
<h1>One Page Scroll2</h1>
</div>
</section>
When I open it in a simple .html file then I have result but when I upload it to my server to my Drupal website then it doesn't do anything. I noticed the JS file doesn't add the extra class to certain divs..
edit:
The jQuery files I added:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
I would say you have not linket the jQuery files correctly. Plain alert works even if you do not have jQuery linked because it is plain javascript. Try to alert the following in order to find out:
alert($("div:first").text());