How can AngularJS be used replace .asp includes? - javascript

Building a small framework for .aspx sites. Project is called Dwarf and available on GitHub.
The problem that I am addressing is working with partials. For example in one of my pages I have a section in the side bar that pulls in an .html file. The reference in the page is
<!--#include file="/_includes/template/product-pages/product-links-contact-rep.html" -->
How can I integrate AngularJS to use partials here?
I am thinking
<!-- this is just an example -->
<script type=text/ng-template id=product-links-contact-rep.html>
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
And that entire script goes in the page?, and how would the routing be addressed for a partial?
I am from a rails background and novice to ASP and new to Angular. So I would appreciate being pointed out where the gaps in my knowledge are so that I can do further research on my own.

The approach you can start with (not saying its the best one) but meets your need is to use directives in angularjs
Here's the code
main.js
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
app.directive("sidebar",function(){
return {
restrict: 'A',
templateUrl: "product-links-contact-rep.html.html",
link : function(scope,element,attr) {
// Do Great things here with your sidebar
},
}
});
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Side Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-app="myApp">
<script type="text/ng-template" id="product-links-contact-rep.html.html">
<!-- Links -->
<ul>
<li>link 1</li>
<li>link 2</li>
</ul>
</script>
<div ng-controller="MyCtrl">
<div sidebar></div>
</div>
</body>
</html>
Here is the working plunker code for reference : http://plnkr.co/edit/NAR1g5?p=preview

Related

Javascript not rendering content

I am trying to display content using javascript DOM but every time I run my solution I get a blank page. My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Radiant HQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav id="navigationcontent"></nav>
<script type="text/javascript" src="assets/js/radiant.js">
</script>
</body>
</html>
My js file looks this way:
#import ('../css/style.css');
document.getElementById("navigationcontent").innerHTML=`
<ul>
<li>Home </li>
<li>About Us </li>
<li>Research </li>
<li>Contacts </li>
</ul>`;
Your code works. There is one problem though.
It's getting stuck on the #import ('../css/style.css'); line. Try removing that whole line and include your CSS some other way. Typically this in done in the head of the document via html.

Blank page when running HTML page with JSX

I was following a tutorial on Lynda, when they first introduce us to JSX they use the following example code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<title>My First React File</title>
</head>
<body>
<div id='react-container'></div>
<script>
ReactDOM.render(<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>,
document.getElementById('react-container'))
</script>
</body>
</html>
But this doesn't seem to be working for me. When I run the HTML file in the browser containing the code above, it gives me a blank page.
Could someone please point me to what I'm doing wrong here?
As per the React docs, you need to:
Tell the browser that the JSX is not JavaScript
Transpile the JSX to JavaScript
So add to the head:
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
And change your JSX script tag to:
<script type="text/babel">

AngularJS routing not loading ng-template on the initial click

I am creating a simple static website using AngularJS.
I am routing ng-view on my template to different html pages, like this one:
home.html:
<script type="text/ng-template" id="views/home.html">
You are in home
</script>
Here is my Index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<title>My Website</title>
<base href="/">
<meta name="author" content="Me">
</head>
<body ng-controller="ContentController">
<h1>My Website</h1>
<ul class="main-nav" id="main-nav">
<li><a href="home"><i class="fa fa-home"></i>Home</li>
<li><a href="portfolio"><i class="fa fa-comment"></i>Portfolio</li>
<li><a href="articles"><i class="fa fa-comment"></i>Articles</li>
<li><a href="books"><i class="fa fa-comment"></i>Books</li>
<li><a href="about"><i class="fa fa-shield"></i>About Me</li>
</ul>
<ng-view></ng-view>
</body>
</html>
My routing works just after the second time I click on each one of the links (portfolio, articles, ...).
The first time I click on a link, the controller is executed, but the view does not show me the html content (i.e. "You are in home" does not appear on my initial click, just after the second one).
If I write the content of home.html on the index.html file, then it works correctly also on my initial click.
However, I would like to understand why it is not loading correctly on the first time I click on each one of these links.
Could you guys help me?
Is there a proper way to use ng-template on a separate file? Or should I use a work around in order to reload my ng-template after the first click?
Thank you
If I remove the ng-template, the issue is solved.
I will study more to understand how to use ng-template on separate files and will write it here.

js not working properly on page which is loaded by jquery .load()

I am new to jquery and can't even assume how deeply this issue can go.
When the external page (in this case shop.php) is loaded into index.php, by Jquery function .load(); , it falls apart. Many jquery commands and plugins, that are applied to the shop.php page, aren't working.
This confuses me, because some of js commands and plugins still works. Obviously i can't say that files are not loaded completely, just majority of them are not working.
When I paste shop.php content into index.php, it works perfect. Also when i add desired js code into shop.php (wrapped into script tag), it works as well.
I really don't expect from anyone to look deeply into this problem. I just wanna know if this is common issue, and is there simple explanation for it ?
If not i'll seek for some different approach.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/shop.js"></script>
<script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.ddslick.js"></script>
<script type="text/javascript" src="js/top-navigation.js"></script>
</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>
<div id="pageWraper"><?php include("home.php"); ?></div>
</body>
</html>
top-bar.php
<div id="nav">
<ul id="navigationWraper">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<ul class="submenu">
<li>asdasd</li>
<li>asdasdas</li>
<li>derwer</li>
</ul>
<li>Shop</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
shop.php
<div id="shop">
<div id="shopheader">
<div id="shopitemstop">
<div id="productcat">
<!-- bunch of code -->
</div>
</div>
</div>
</div>
Jquery:
$(document).ready(function(){
$(function() {
$("a.menuLink").on("click", function(e) {
e.preventDefault();
$("#pageWraper").load(this.href);
});
});
});
Hope this helps
Thanks,
Update :
I added:
<script type="text/javascript">
$(document).ready(function(){
$.getScript("js/shop.js");
$.getScript("js/jquery.touchcarousel-1.2.js");
$.getScript("js/main.js");
});
</script>
on top of shop.php page, dont know how right this is, but its working now.
Only thing that bugs me is if i remove jquery.touchcarousel-1.2.js from index.php head, page falls apart. It is like, only working if both of them are loaded ????
Question:
I really don't expect from anyone to look deeply into this problem. I
just wanna know if this is common issue, and is there simple
explanation for it ?
Answer:
Yes, it is a common problem for Ajax/dynamically loaded content.
The cause is: that most plugins work on the DOM as it exists when the plugin is run (unless they were specifically created to work with dynamic content).
The fixes include:
Find another plugin that is tolerant of dynamic content
Re-run the plugins
Strip out existing plugins and re-run the plugins (takes some effort to figure out some plugins)
Don't load content dynamically for plugins that do not support it

jQuery Mobile: Controlling what gets added to URL bar

I am building a mobile site using jquery mobile. It will contain a few static internal pages for settings etc., but primarily will be loading/linking external pages.
I have two requirements.
I do not want internal pages to affect the URL bar or add to the
urlHistory (as hashes, ie index.html/#settings)
when the user loads a new external page, I do want it to show in the
URL bar and add to the urlHistory.
This sounds simple enough, but I can not seem to get it working.
I tried the following in mobileinit. This simply NEVER modified the URL, for internal and external links.
$.mobile.changePage.defaults.changeHash = false;
Any suggestions are greatly appreciated.
You were close, mobilinit is a tricky event, it must be triggered before jQuery Mobile is loaded, here's an example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.changePage.defaults.changeHash = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="operations.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<ul data-role="listview" data-theme="a" id="test-listview">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Test it, you will find it satisfies your every requirement.
OK,
After testing various things I ran across a possibly solution that does not involve mobileinit.
For all links that I do NOT want reflected in the url bar, I set programmatically:
$.mobile.changePage("#home", {changeHash: false, transition:'fade'});
The key here is the changeHash set to false. This will transition to the page 'home' but will not make any changes in the URL bar.
I am unsure if I can do the same thing within an href tag.

Categories