Angularjs Routing want it to work [closed] - angular-routing

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I know that there are many example for angularjs routing but don't know why this is not working for me. I have trying to do one by myself. Below is plunk I am using please point me where I am going wrong... What I am missing because it is not working on my system.
Plnkr
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21"></script>
<script data-require="angular-route#1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<h1>My app</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</header>
<div class="content">
<div ng-view></div>
</div>
</body>
script.js
angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'home';
}]
})
.when('/about', {
template: '<h2>{{page}}</h2>',
controller: ['$scope', function($scope){
$scope.page = 'about';
}]
})
.otherwise({redirectTo: '/'});
}]);

you are missing https in angular-route.js
use this src="https://code.angularjs.org/1.2.21/angular-route.js"
Following was the error in console:
Mixed Content: The page at 'https://plnkr.co/edit/AK32mYeV41F2AlFBUFMB?p=preview' was loaded over HTTPS, but requested an insecure script 'http://code.angularjs.org/1.2.21/angular-route.js'. This request has been blocked; the content must be served over HTTPS.

Related

sails.js and foundation 6 - TypeError: url.indexOf is not a function

I am trying to use sails.js and Zurb Foundation 6.2. I used this handy npm generator that sets up my grunt tasks. The output looks pretty good. I have a single js file that contains jquery, foundation, etc.
In my layout.ejs, I have this:
<!DOCTYPE html>
<html>
<head>
<title><%=typeof title == 'undefined' ? 'New Sails App' : title%></title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--STYLES-->
<link rel="stylesheet" href="/styles/app.css">
<!--STYLES END-->
</head>
<body>
... some html ...
<%- body %>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/foundation.js"></script>
<!--SCRIPTS END-->
<script>
$(document).foundation();
</script>
</body>
</html>
When I run the page, I get this error:
**TypeError: url.indexOf is not a function
jQuery.fn.load()
foundation.js:9612
<anonymous>
foundation.js:11913
<anonymous>**
My reading on this suggests that the issue is either that something is not be loaded, is being loaded more than once, or is in the wrong order. How do I narrow that down? I tried to use CDN's for each piece and still couldn't make it work.
Thank you for your help.
Foundation is not currently compatible with jQuery 3.0.0, Foundation is using the deprecated jQuery.fn.load(). Use jQuery 2.2.x for now. See issue and PR:
https://github.com/zurb/foundation-sites/issues/8834
https://github.com/zurb/foundation-sites/pull/8923

Minimum includes for Alfresco Share custom page?

I am creating a custom Share page that must have none of the Alfresco UI on it, but which still needs access to the Alfresco and YAHOO objects.
I have successfully created the page and caused it to open in a new tab, but I get errors that the Alfresco and YAHOO objects are undefined.
What are the minimum includes I must add to my Freemarker template to get access to those objects?
Update: I have gotten the Alfresco and YAHOO objects to load, but now am getting "Uncaught Error: extend failed, please check that all dependencies are included."
Here are the freemarker and javascript includes I've got so far, if it'll help:
<#import "import/alfresco-common.ftl" as common />
...
<script type="text/javascript" src="../scripts/ajax/yahoo/yahoo-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/yahoo/connection/connection-min.js"> </script>
<script type="text/javascript" src="../scripts/ajax/common.js"> </script>
<script type="text/javascript" src="../scripts/ajax/utilities/utilities.js"> </script>
<script type="text/javascript" src="../yui/yuiloader/yuiloader.js"> </script>
<script type="text/javascript" src="../js/alfresco.js"> </script>
Update 2: Based on the first answer, the first few lines of the template look like this and again yield Uncaught ReferenceError: YAHOO is not defined:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<region-id>head-resources</region-id>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title></title>
<script>
var urlParams;
Update 3: I've reduced the source to the minimum necessary to demonstrate the problem. What follows next is the template component definition file, followed by the freemarker template itself. Definition:
<?xml version='1.0' encoding='UTF-8'?>
<page>
<title>iPad Viewer</title>
<title-id>page.iPad.title</title-id>
<description>iPad Viewer</description>
<description-id>page.iPad.description</description-id>
<template-instance>viewer-ipad</template-instance>
<authentication>user</authentication>
</page>
Freemarker template:
<html>
<body>
<div class="content">
<#region-id>head-resources</#region-id>
<script>
alert(YAHOO);
alert(Alfresco);
</script>
</div>
</body>
</html>
Error is:
Caused by: freemarker.core.ParseException: Parsing error in template "org/alfresco/viewer-ipad.ftl" in line 11, column 7: Unclosed #... when the end of the file was reached.
I'm not sure how you created the page, but this is not needed when you define your regions.
Probably there are all in the <region-id>head-resources</region-id> So if you include that in the page-template that should suffice.

Create a flash object in CQ 5.6.1

I am implementing amcharts in CQ. I get the data by calling a servlet which I temporarily hosted in a local glassfish server. Following is the code snippet of my amchart component jsp.
<%#include file="/libs/foundation/global.jsp"%><%
%><%#page session="false" %><%
%><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test amcharts generation</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
<div id="singlesection" class="norm" >
<div class="norm">
<script type="text/javascript" src="/apps/geometrixx/components/amchart/am/swfobject.js"></script>
<div id="flashcontent"><strong>You need to upgrade your Flash Player</strong></div>
<div id="result"></div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/apps/geometrixx/components/amchart/am/amstock.swf", "amstock", "600", "400", "8", "#FFFFFF");
var uri = "http://localhost:8080/Charts/apps/CreateXMLFileServlet?r="+Math.random()+"&fc=03";
so.addVariable("settings_file", encodeURIComponent(uri));
so.addVariable("chart_id", "amstock");
so.addVariable("key", "106-d0564444fe0a5ce6839d84f70655375c");
so.write("flashcontent");
// ]]>
</script>
</div>
</div>
</div>
</body>
The issue is, the servlet is not getting called. If I try the servlet url directly from the browser, I get the response. Please suggest what I am doing wrong here. Thank you.
It sounds like you may be running into a cross-domain security restriction. If you are loading the page the has the SWF code from one domain, but then calling a different domain to get the data, you are likely running into security restrictions. Can you list the full domains for both pieces?
Check out http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html for info on how to get around this.

How to load dojo into html file in order to call dojox.mobile functions?

Ok so I'm fairly new to dojo and I'm trying to make a really simple sample mobile app. I'm using eclipse to run the code which uses an android emulator to install/run the app. The problem I'm having is that I keep getting Uncaught Reference Errors for either "require is not defined" or "dojo is not defined", causing my app to appear as plain text instead of formatted like an android app using dojox.mobile widgets.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
<title>PhoneGap</title>
<!-- DOJO -->
<script src="/assets/www/lib/dojo/dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad:true">
</script>
<link rel="stylesheet" href="/assets/www/lib/dojo/dojox/mobile/themes/android/android.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="/assets/www/cordova-1.6.0.js"></script>
<script>
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
</script>
</head>
<!-- END DOJO -->
<body>
<!-- ACCIDENT TOOLKIT PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accHelp" selected="true">
<h1 data-dojo-type="dojox.mobile.Heading">Accident</h1>
<div class="text">If you are in an accident, you should first move to a safe
location. Below are some additional actions you can take:</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
<li data-dojo-type="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Exchange Driver Info</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Record Accident Location</li>
<li data-dojo-type="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
onClick="itemClicked();">Take Photos of Accident</li>
</ul>
</div>
<!-- EXCHANGE DRIVER INFO PAGE -->
<div data-dojo-type="dojox.mobile.View" id="accInfo">
<h1 data-dojo-type="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
onClick="console.log('Going back');">Driver</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Other Driver Info</h2>
</div>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
</html>
Does anything appear wrong with the code itself? Especially where I'm using the script scr... to point to the dojo.js and where I'm using require to call the dojo.mobile functions. I was under the impression that as long as the src pointed to the right location in the package tree, it didn't much matter where I copied the file in.
I have tried using the Google CDN to call dojo.js, but the emulator throws errors when I do so, possibly because it doesn't utilize an internet connection?
Any help would be great!
Try removing /assets/www/ from your local URLs
Your require statement looks like this:
require(["dojo"], function(dojo) {
dojo.require("dojox/mobile")
dojo.require("dojox/mobile/parser")
});
And it should look something like this:
require([
"dojo/mobile",
"dojo/mobile/parser"
],
function(mobile, parser) {
// your code here;
});

Is this XHTML document valid for parsing with the iPhone

I would be grateful if someone could clarify if this document is valid for xhtml parsing using the iphone SDK using xpaths:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>East Lancs Radio - Now Playing</title>
<META HTTP-EQUIV="REFRESH" CONTENT="45">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="player-currently-playing">
Currently Playing
<div class="player-track">
Lush
</div>
<div class="player-artist">
Ladykillers
</div>
</div>
<div id="player-playing-next">
Playing Next
<div class="player-track">
Javine
</div>
<div class="player-artist">
Surrender (Your...
</div>
</div>
</body>
</html>
I'm trying to extract the currently playing player-track 'lush' and player-artist 'ladykillers' through using xpath. If I do an xpath search for: //#class and then print the result to screen, I get player-track, player-artist.. etc outputted?
Am I missing something fairly obvious here?
Thanks
Dan
The W3C Markup Validation Service comes up with 9 errors in this document.
So, this is not a valid XHTML document, for iPhone usage or otherwise.
Your XPath result is giving you what you're asking for which is the values of the class attributes.
To get the currently playing player-track use:
//*[#id = 'player-currently-playing']/*[#class = 'player-track']/text()
and to get the currently playing player-artist use:
//*[#id = 'player-currently-playing']/*[#class = 'player-artist']/text()