I am developing a SPA (Single page application) using ember.js served from pyramid. The problem is that the routing is not working properly.
In pyramid, I have the following routes defined:
# Route to index.html, i.e. the SPA
config.add_route('index', '/')
# Route to css & js resources
config.add_static_view('', 'myapp:static')
And the index view is:
#view_config(route_name='index')
def index_view(request):
with open('myapp/templates/index.html', 'rt', encoding='utf-8') as fh:
html = fh.read()
return Response(html, content_type='text/html')
Here is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<script type="text/x-handlebars" data-template-name="wfw">
<section id="wfw">
<p>here is a page</p>
</section>
</script>
<script src="js/application.js"></script>
<script src="js/router.js"></script>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://builds.emberjs.com/release/ember.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="https://raw.github.com/less/less.js/master/dist/less-1.6.0.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
js/application.js:
window.Wfw = Ember.Application.create();
js/router.js:
Wfw.Router.map(function () {
this.resource('wfw', { path: '/t' });
});
When I go to localhost:6543/ I get "Hello, world!", but I don't see "here is a page". If I change the path in js/router.js to '/test' and go to localhost:6543/test, I get a 404. What am I doing wrong? Do I need to somehow disable part of pyramid's routing, or am I doing something wrong with ember?
A few things:
I think you need to move your Ember.js script tags above your application specific tags.
The path you have configured is /t so I don't think it would pick it up /test.
By default, ember doesn't use the html5 history api, so your url would need to be like: localhost:6543/#/t
Related
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app" thisIsAProp="This is what I need"></div>
<!-- built files will be auto injected -->
</body>
</html>
So in my main.js file the app is mounted on #app. In my App.js file I need the properties on the <div id="app"> element. I tried using web-components which did work for a basic app but another requirement is I need to be able to overwrite the CSS variables within the parent web page, and when creating web components, vue creates them with a shadow-dom. Is there a better way to get the values from the vue mount element?
Data can be passed from the the page to entry point either with global variables:
<script>
window.myApp = {
foo: 'bar'
}
</script>
<div id="app"></div>
And accessed inside the app like window.myApp.foo.
Arbitrary string data (including JSON) can be passed through HTML attributes, data attributes commonly serve this purpose:
<div id="app" data-foo="bar"></div>
And accessed inside the app like document.querySelector('#app').dataset.foo.
Solved my problem
I was able to get the properties from the index.html mount into my App.vue file using
beforeMount() {
this.neededData = this.$parent.$el.getAttribute("thisIsAProp");
},
Basic html page. Just starting and downloading packages. Checking if my Semantic UI setup is properly installed, but when I open up my index.html page and check the console I get 'GET file:///semantic/dist/semantic.min.css net::ERR_FILE_NOT_FOUND', along with 'GET file:///semantic/dist/semantic.min.js net::ERR_FILE_NOT_FOUND'. Which is strange!
These are my script tags within my head tag inside my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 boilerplate – all you really need…</title>
<!-- You MUST include jQuery before Fomantic -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.3.1/dist/jquery.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/semantic/dist/semantic.min.css"
/>
<script src="/semantic/dist/semantic.min.js"></script>
</head>
<body id="home">
<h1>HTML5 boilerplate</h1>
</body>
</html>
I can click on the relative paths in both tags and it will take me to the actual file in my editor.
My current folder structure is:
Semantic
dist
semantic.min.css
semantic.min.js
index.html
What gives?
Try ./semantic/dist/semantic.min.css
I am facing very strange issue with AngularJS routes. I have certain folder structure
js -> Angular ->
css -> Bootstrap ->
index.html
All the routes runs fine when hosted on some server like IIS. But I copy the entire directive & paste in some other location or share with someone. If they run with file system they start getting Files not found error.
This is my how index.html looks like.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<base href="" />
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
<!--content-->
<!--menu tabs-->
<div class="col-md-12" style="margin-top:10px;">
CAR <br/>
Mobile
</div>
<!--angular template placeholder-->
<div ng-view> </div>
<!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>
This 404 issue arises only when I have base tag present in the html.If I remove it, page renders fines. But this stops running angular routing.
I got an email from my senior that I shouldn't be specifying absolute path but I don't find anyplace in my index.html where I have specified absolute path(s).
So how do I specify relative path, so that anyone who has the same folder structure can run the demo app??
Any help/suggestion highly appreicated.
Have you tried:
<base href="/" />
If you are deploying your app into the root context (e.g.
https://myapp.com/), set the base URL to /:
<head>
<base href="/">
...
</head>
If you are deploying your app into a sub-context (e.g.
https://myapp.com/subapp/), set the base URL to the URL of the
subcontext
<head>
<base href="/subapp/">
...
</head>
Angular Docs $location/nobase
Angular Docs $location
In regards to absolute paths, CAR is not quite an absolute path, however it does force the browser to look back at the ROOT directory of the web server to look for the route. So, if someone you share with mounts the app to a sub-directory, then this will most likely cause the error.
In that event, they should set the <base href="to-wherever-they-put-the-thing" /> on their web server, OR you should specify to run it in the ROOT directory of a web server.
Use:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<!--
<base href="" />
-->
<script>
document.write('<base href="' + document.location + '" />');
</script>
<!--css-->
<link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
when I am typing react.js code that is given in bucky's react.js tutorial series it is not getting executed but when pasting it from bucky's github repo. it is getting executed.....Can any one help me out please...and the code is.
<html>
<head>
<title>
creating component
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react.min.js"></script>
<script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\react-dom.min.js"></script><script type="text/javascript" src="C:\Users\hatim\Desktop\react\React-Boilerplate-master\src\js\browser.min.js"></script>
</head>
<body>
<div id="container_new"></div>
<script type="text/babel" >
var mycomponent=React.createClass({
render: function(){
return(<p>this is new component </p>);
}
});
ReactDOM.render(<mycomponent />,document.getElementById('container_new'));
</script>
</body>
</html>
I don't believe you can include the JavaScript files in the context of the location on your hard drive "c:\". I think you need to be running them using a web server (IIS, Node, etc.) and then include them using relative or absolute web paths (http://localhost/mytest/src/js/react-dom.min.js).
I am new to angular js . I have two modules first2a,first22. Each modules have one controller model1 and model2.
Below is my Html code
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body >
<!-- MAin page -->
<div ng-app="first22" id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" ng-app="firsta" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
mainscope1.js
var first2 = angular.module('first22', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
})
var first2a=angular.module('firsta',[]);
first2a.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
})
Can anyone explain why firsta module is not working here. Thanks in advance
Try using angular boostrap , to happen when the document is ready:
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('maincontainer'), ['first22']);
angular.bootstrap(document.getElementById('Interactive_content'), ['firsta']);
});
Check this fiddle
You can only use ng-app once per page. Are you trying to create two separate web applications side by side on this page, or are you only trying to have two controllers within a single application?
If you really want them to be a single application (which is what you normally would want), you set ng-app so that both ng-controller directives are inside it. For example, you can set ng-app on the html-tag, the body-tag or a div that wraps it.
<!DOCTYPE html>
<html >
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/angular.js"></script>
<script type="text/javascript" src="globe/script/mainscope1.js"></script>
<script type="text/javascript" src="globe/script/angular-route.js"></script>
<title>
Html5 All in One
</title>
</head>
<body ng-app="myAngularApplication">
<!-- MAin page -->
<div id="maincontainer" >
<div ng-controller="model1">{{message}}</div>
</div>
<!-- MAin page End-->
<!-- Interactivity page -->
<div id="Interactive_content" >
<div ng-controller="model2">{{message}}</div>
</div>
<!-- Interactivity page End-->
</body>
</html>
And the javascript would be:
var first2 = angular.module('myAngularApplication', []);
first2.controller('model1',function($scope)
{
$scope.message="aaaaaaa";
});
first2.controller('model2',function($scope)
{
$scope.message="aaaaaaa1";
});
OR, if you want to create two fully separated applications on the same page, you need to bootstrap them manually without using ng-app. Please see this SO question for details on how to do that.
Possible duplicate of this question:
https://stackoverflow.com/a/12864137/1177295
Only one AngularJS application can be auto-bootstrapped per HTML
document. The first ngApp found in the document will be used to define
the root element to auto-bootstrap as an application. To run multiple
applications in an HTML document you must manually bootstrap them
using angular.bootstrap instead. AngularJS applications cannot be
nested within each other. --
http://docs.angularjs.org/api/ng.directive:ngApp