Angularjs UI-Router Issue - html

So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. This is how I like my app to do. But in my real app I'd like to not include a tag that contain my secondview.html. I would like it to be in its own separate file. But when I do that the prism css file won't work inside the ui-view.
Is there any configuration I would have to do? I believe it has something to do with the ng-binding.Here is what it looks like inside the ui-view. I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render.
This is what it looks like when the view is in its own separate file(Not Working)
The Code below me has the secondview.html inside the index.html(Works)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});
<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Need a directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div>:
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
Then it worked.
Plunder demo here.

Related

Using jQuery to load another HTML page into current HTML page

I have a file called navbar.html which I want to load onto my index.html.
I am trying to load via jQuery, but this does not seem to be working.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<title>Home | title</title>
<link rel="stylesheet" href = "style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="hello">testing</div>
<div id="nav-placeholder">
</div>
<script>
$(document).ready(function(){
$('#nav-placeholder').load("./navbar.html");
});
</script>
</body>
</html>
Here is my navbar.html
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href="style.css">
</head>
<body>
<!---Create the navigation bar.-->
<div class="top_navigation_bar">
<span>
nav title
</span>
Projects
About Me
Home
</header>
</body>
</html>

react js simple script does not work

Im trying to learn react js by following this tutortial in youtube. My program is just a very simple html code with some react.js. I follow every single step he made but I did not get the same result as he did. Can you please tell me what is wrong in my code and why is it not working?
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Haime Computer Shop</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/babel">
var myReactObj = React.createClass({
render: function(){
return (<h2>This is a component!</h2>);
}
});
ReactDOM.render(<myReactObj/>, document.getElementById('container'));
</script>
</body>
</html>
I can only see the "Home, About Us, Services, Contact Us" text. What I can not see is the "This is a component!" text inside the myReactObject.
Thanks in advance for the help...
The problem you are facing is because you are trying to deal with JSX syntax (javascript with html tags embedded) directly through your browser, but you need the Babel to transpile your code.
At this point, you have 2 options:
Add babel to your HTML:
JSX
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>With Babel</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/babel">
var myReactObj = React.createClass({
render: function(){
return (<h2>This is a component!</h2>);
}
});
ReactDOM.render(
React.createElement(myReactObj),
document.getElementById('container')
);
</script>
</body>
</html>
Change your code to use javascript only, as the sample below:
javascript
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Without Babel</title>
<link rel="stylesheet" type="text/css" href="index_css.css">
<script src="src/js/react.min.js"></script>
<script src="src/js/react-dom.min.js"></script>
<script src="src/js/browser.min.js"></script>
</head>
<body>
<div class="homeLinks_dcls">
<p> Home</p>
<p> About Us</p>
<p> Services</p>
<p> Contact us</p>
</div>
<div id="container"></div>
<script type="text/javascript">
var myReactObj = React.createClass({
render: function(){
return React.createElement('h2', { }, 'This is a component!');
}
});
ReactDOM.render(
React.createElement(myReactObj),
document.getElementById('container')
);
</script>
</body>
</html>

not able to get html view after linking angular app to index.html using ui-view

My HTML pages are not getting routed via ui-view used in index.html. However
I defined all declarations in my controller. I used $stateProvider in my controller to get into a particular HTML. This is showing
"....index.html#/welcome" in browser URL location but nothing is displayed into the page. Please help me to get out of this situation.
index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bower_components/font-awesome-
4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/angular-loading-bar/loading-
bar.css">
<link rel="stylesheet"
href="bower_components/chosen/chosen.css">
<!-- endbuild -->
<!-- build:css content/css/main.css -->
<link rel="stylesheet" href="content/css/bootstrap.min.css">
<link rel="stylesheet" href="content/css/bootstrap-
select.min.css">
<link rel="stylesheet" href="content/css/style.css">
<link rel="stylesheet" href="content/css/common.css">
</head >
<body >
<!--[if lt IE 9]>
<p class="browserupgrade">You are using an
<strong>outdated</strong> browser. Please upgrade your browser to improve your
experience.</p>
<![endif]-->
<div>
<div class="body-overlay" style="z-index:1051;">
<div class="overlay-content" id="bodyOverlayContent">
<p></p>
</div>
</div>
<div class="main-section" ng-app="testApp">
<div ui-view="welcome" ng-cloak>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="angular-ui-router.js"></script>
<script src="mytest.controller.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
</body>
</html>
mytest.controller.js
var app = angular.module('testApp', ['ui.router']);
app.config(['$stateProvider',
'$urlRouterProvider',function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('welcome', {
url : '/welcome',
templateUrl : 'welcome.html',
controller : 'testController'
});
$urlRouterProvider.otherwise('/welcome');
console.log($stateProvider);
}]);
app.controller('testController', function($scope) {
$scope.showInfoMessages="Contact Information";
});
welcome.html
<div><p> Hi </p></div>
Remove the string assign to ui-view
change
<div ui-view="welcome" ng-cloak>
to this
<div ui-view ng-cloak=""></div>
also add the ng-app on html tag
Demo

Can't get Boostrap CSS to load in a React App

This is my HTML file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="{{ url_for('static',filename='styles/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href= "{{ url_for('static',filename='styles/style.css') }}">
<script src="https://npmcdn.com/react#15.3.0/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom#15.3.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.js"></script>
<meta charset="utf-8">
<title>Dashboard</title>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="/static/js/dashboard.js"></script>
</body>
</html>
The file is located in:
/Simple_flask_app
-hello.py
/static
-js
/styles
-boostrap.min.css
-style.css
I created a simple component just to try to get the CSS to load:
var Dashboard = React.createClass({
render: function(){
return (
<div>
<div class="jumbotron">
<h1>Test</h1>
</div>
</div>
)
ReactDOM.render(<Dashboard />, document.getElementById('content'));
I was trying to get this giant grey box to load - https://getbootstrap.com/examples/navbar/
Do I have to do something special because I'm in React?
Within JSX in React, you must use 'className' instead of 'class'.
So you should change <div class="jumbotron"> to <div className="jumbotron">

iFrame not loading on page load (jQuery Mobile)

I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});