Ember - how do I do simplest possible routes? - javascript

Ok, being minimalist, I have an index.html that has
<html>
<body>
hello world
<script type="text/x-handlebars" data-template-name="lists">
<h1>in route lists</h1>
</script>
<script src="http://builds.emberjs.com/beta/ember.js"></script>
<script src="app.js"></script>
</body>
</html>
and an app.js with
var App = window.App = Ember.Application.create({
LOG_TRANSITIONS: true
});
App.Router.map(function() {
this.resource('lists');
});
Shouldn't that be enough to get me a page with 'in route lists' when I navigate to AppURL/lists?

This is enough to get you a page with 'in route lists'. The page will be at APP_URL/#/lists though as by default ember uses the browsers hash for routing. If you wish to use hashless urls you need to tell your router to use the HTML5 history API:
App.Router.reopen({
location: 'history'
});
You can read more about this here:
http://emberjs.com/guides/routing/specifying-the-location-api/
and find a JSBin to play about here:
http://emberjs.jsbin.com/seweqedi/2/

Related

Load vue app with jsonld data passed as parameter to the url

Let's say I have an Vue app http://www.example.com/?url=https://example-data.com/activity-sets/example/sample.jsonld .
I would like the vue app to load the page with the jsonld passed through the path given in the url i.e. https://example-data.com/activity-sets/example/sample.jsonld
The idea is : anyone should be able to modify the url to a different jsonld data located anywhere in the world. How can I achieve this?
I am new to Vue and am not getting a clear idea of what to do.
It's fairly easy to something like that. Just create a HTML document (index.html) in the root of your webserver and add the following contents:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var $_GET=[];
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(a,name,value){$_GET[name]=value;});
new Vue({
el: '#app',
data () {
return {
url: $_GET['url']
}
},
template: '<iframe :src="url"></iframe>'
})
</script>
</body>
</html>
It will read the ?url= contents from the url and insert it as an iFrame src.
In theory this will do the trick. If you test this with eg. ?url=https://twitter.com/chucknorris you will end up with an "Content Security Policy" violation. Most sites will be secured this way, so you should test this with your purpose.

Not load a JS file for a specific path

I have a website by mean-stack.
Normally, all my external references are listed in index.html
I realize that one external JS library (e.g., https://cdnjs.cloudflare.com/troublelibrary.js) I am using has some conflit with a part of my website. So a workaround I am looking for is to NOT load it for a specific path https://www.myexample.com/specific.
Does anyone know how to achieve this in the routing?
Edit 1: (see the full question here)
Actually, the library that has conflit is history.js. My initial code which loads it all the time is as follows. As a result https://localhost:3000/home in a browser is always https://localhost:3000/home (i.e., will not add # because of history.js)
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script src="https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js"></script>
Then, if I try the following code, as Ben suggests:
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
<script>
var newScript = document.createElement('script');
newScript.src = 'https://cdn.rawgit.com/devote/HTML5-History-API/master/history.js';
document.head.appendChild(newScript);
console.log(window.location.href)
</script>
I realize that for the first time of loading https://localhost:3000/home will not change. But, if I refresh the browser, it can change to https://localhost:3000/#/home.
So appending the script is not exactly the same as a direct reference, does anyone know why?
I see your problem in a different perspective. You mentioned that you use the history.js to avoid # on the URL. But you do not need history.js to do that. I think you understood your problem in the wrong way. There is an inbuilt Angular functionality to get rid off # paths. Because # is used to keep track of the relative path on any route. If we want we can override that default functionality.
But if you use this approach the server should responsible to redirect the user to index or home page on any application route since Angular handle all the routing in the application.
First you should add
<base href="/" />
in your HTML file.
Then you should enable HTML5 Mode inside Angular application as follows.
$locationProvider.html5Mode(true);
By adding these two attributes you can get rid off the # path and this is the recommended way.
Following is a complete example.
var app = angular.module("app", ["ngRoute"]);
app.controller("MainController", function($scope){
});
//Add route handler
app.config(["$routeProvider", "$locationProvider", function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
template: '<h1>Home</h1>',
reloadOnSearch: true
})
.when('/about', {
template: '<h1>About</h1>',
reloadOnSearch: true
}).otherwise({
redirectTo: '/'
});
// This will remove hash bang from the routes
$locationProvider.html5Mode(true);
}]);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.js"></script>
<base href="/" />
</head>
<body>
<div>
Home
About
</div>
<div ng-app="app" ng-controller="MainController">
<ng-view></ng-view>
</div>
</body>
</html>
As you can see on the above example when you click on the about link the server responds with not found on /about. This means the # bang is removed.
This is one way to do it:
if(window.location.href !== 'https://url.com/path/to/trouble/page'){
var newScript = document.createElement('script');
newScript.src = 'https://url.com/path/to/script';
document.head.appendChild(newScript);
}
Add this to the <head> of the document. It will not load the trouble script on the page you specify in the if statement. Make sure not to load the trouble script anywhere else on the page as well.
you can do lazy loading of script in angular
<script type="text/javascript" ng-src="{{exUrl1}}"></script>
and somewhere in your code (based on whatever logic you want)
$rootScope.exUrl1 = $sce.trustAsResourceUrl(confserver.example.url);

Angular new router error Cannot read property 'path' of undefined

I'm trying to write an app in angularjs by using the new router. But, don't know what's i'm doing wrong. From two days i went through a lot of articles,videos but till now can't able to get a grip on this.
Right now, i'm following this article - http://goo.gl/ayPmxr . My folder setting is like this..
- components
-- home
--- home.html
- angular.js
- app.js
- index.html
- router.es5.js
My Files -
index.html
Test new router
<body ng-app="app" ng-controller="AppController">
<!-- Multiple viewports require a name -->
<div ng-viewport="nav"></div>
<div ng-viewport="main"></div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="router.es5.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
app.js
Chrome Console error
Can any one please help me to find out where I'm doing wrong & how I can fix that.
That's because you are not specifying any component for the nav viewport/outlet.
You should either remove from your view
<div ng-viewport="nav"></div>
or specify a component in your routes, something like
components: { 'nav': 'home', 'main': 'home' }
It's a known behavior/bug: https://github.com/angular/router/issues/207
As of 2016-01-12, the following works for me:
(just the body of index.html):
<body ng-app="app" ng-controller="AppController">
<ng-viewport></ng-viewport>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-new-router/dist/router.es5.js"></script>
<script src="./app.js"></script>
<script src="./components/home/home.js"></script>
</body>
// app.js
// This example works as of 2016-01-12 using
// angular 1.5.0-rc.0
// angular-new-router 0.5.3
// Assumes:
// 1. app.js is in the root of the folder structure
// 2. components/home/ folder exists off the root and contains:
// a. home.js
// b. home.html
angular.module('app', ['ngNewRouter', 'app.home'])
.controller('AppController', ['$router', AppController]);
function AppController ($router) {
console.log('made it to AppController');
$router.config([
{path: '/', component: 'home' }
]);
}
I can post home.js and home.html, if needed, but based on the question, the problem is within app.js.
One key difference I spot right away is my (perhaps simplistic) example does NOT enclose the route confiuration inside of a components {} object.
Hope this helps.

ng-view Angular not showing the text output

<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {templateUrl: "one.html"})
.when("/cats", {templateUrl: "two.html"})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
I am unable to get the message in paragraph 'Here are the cats' or 'Here are the dogs' on clicking the two links; these files are saved as one.html and two.html in the same folder.
I have downloaded and added the angular-route.js file in the same folder. Kindly help!
I have put controllers in routerProvider but it is not necessary, and adding it to it wont run! :(
You are forgetting to insert the controllers for your templates inside the object in when. See below:
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="angular-route.js"></script>
</head>
</head>
<body ng-app="myApp" ng-controller="cont1">
<a href=#dogs>dogs</a> <a href=#cats>cats</a>
<div ng-view></div>
<script>
angular.module("myApp", ['ngRoute']).config ('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
templateUrl: "one.html",
controller: "cont1"
})
.when("/cats", {
templateUrl: "two.html",
controller: "cont1"
})
.otherwise("/cats", {redirectTo: "/dogs"})
});
app.controller("cont1", function($scope){ $scope.model = {message: "This is my app One!!!"} });
</script>
</body>
</html>
If you're opening this html file directly in the browser, it won't work. This is because your template files will be loaded using AJAX. To make sure the user's data from one site cannot be fetched by a malicious other site, AJAX requests must adhere to the Same origin policy. The minute details of this policy are outside the scope of this answer, but it means that one site page can't make requests to another site. Files loaded directly from disk (loaded using the `file://' url scheme) don't have an origin so the cross origin policy check will always fail.
To solve this problem, put your files on a server, and try acessing them from there. If you're using a mac, you canuse Python's simple http server, which comes preinstalled on your mac. On windows, you can use mongoose.
When you use the minify-proof syntax for angular you pass the parameters as an array, so instead of:
config('$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
});
you needed:
config(['$routeProvider',function($routeProvider){
$routeProvider.when("/dogs", {
...
}]);
http://plnkr.co/edit/7NiWduPXCIKutSF243Hg?p=preview
I checked it out with Team. I just had to remove the controller from the top part of the code in Html file, and it would work fine.
<body ng-app="myApp" ng-controller="cont1">
should be turned to ...
<body ng-app="myApp">
Thanks buddies for helping me though!

Ember.js Unable to find view at path when returning to route

I have a simple example ember.js app and I want to include a view on the index template.
This works for the initial render.
When I link to a second route and return back to the original I get the error Unable to find view at path 'App.testView'
Example code: JSFiddle
The HTML page...
<div id="test"></div>
<script type="text/x-handlebars">
<h1>Test Layout</h1>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<h2>Index Template</h2>
<p>{{#linkTo test}}test route{{/linkTo}}</p>
<div>{{view App.testView}}</div>
</script>
<script type="text/x-handlebars" data-template-name="test">
<h2>Test Template</h2>
<p>{{#linkTo index}}index route{{/linkTo}}</p>
</script>
<script type="text/x-handlebars" data-template-name="testview">
<p>Test View</p>
</script>
The Javascript...
window.App = Ember.Application.create();
App.Router.map(function() {
this.route("test");
});
App.testView = Ember.View.create({
templateName: 'testview'
});
Fixed JSFiddle
Using Ember.View.extend instead of Ember.View.create will fix this issue.
According to the Ember API for the {{view}} helper you need to pass it a class, not an instance. The helper will create a new instance of the View and insert it.
one simple syntax mistake am able to identify is path attribute not added. Update the code Router.map() with this
App.Router.map(function() {
this.route("test",{path:"/"});
});

Categories

Resources