AngularJS - Does Routing Harm SEO? - angularjs
I am sure there are techniques to have a better SEO approach using AngularJS features, (https://prerender.io/js-seo/angularjs-seo-get-your-site-indexed-and-to-the-top-of-the-search-results/).
As an example, the source code of a project I am currently developing, returns the next:
<html lang="en" data-ng-app="ByTheWayApp" data-ng-controller="general">
<head>
<title>ByTheWay</title>
<base href="/" />
<meta charset="utf-8" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Comfortaa:300,400,700|Courgette|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,latin-ext" rel="stylesheet">
<link
rel="stylesheet"
type="text/css"
href="/assets/css/bytheway.css">
<link
rel="stylesheet"
type="text/css"
ng-href="{{ templateCSS }}">
</head>
<body>
<app>
<div class="loading">
<span>ByTheWay</span>
</div>
<div class="app-wrapper {{ displayClass }}" load >
<header class="header h-3 fixed">
<div class="inner-wrapper">
<div class="brand wpx-7">
<a href="/">
<h1 class="title"><span>ByTheWay</span></h1>
<h2 class="slogan"><span>chasing dreams worldwide</span></h2>
</a>
</div>
<nav class="nav w-auto text-right aw-const" id="nav">
home
sign in
<strong>sign up</strong>
</nav>
</div>
</header>
<div class="page" data-ng-controller="page" data-ng-view>
<!-- Here Go Every Page Templates using $routeProvider.when('',{}); -->
</div>
</div>
</app>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script type="text/javascript" src="/assets/js/bytheway.js"></script>
</body>
</html>
.
<div class="page"></div> would contain the Template .html file content, but it is not displayed when I check the source code, does the same happen when Google Spiders/Bots crawl my site ?
ps. I am not using yet meta tags, such description, tags, etc, because I am yet defining relevant content to be displayed.
Thank you and all the best
Related
Broadleaf Commerce Standalone SOLR issue
I deployed broadleaf demo site on standalone tomcat server with mysql as backend and standalone solr server. I can access the solr server on 8983 port. I see that my cores are available at http://localhost:8983/solr/#/catalog and catalog_reindex (note the hash in url). I changed the common-shared.properties file to point to right URL but when I try to hit the SiteApplication, I get following error
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Error 405 HTTP method POST is not supported by this URL</title>
</head>
<body><h2>HTTP ERROR 405</h2>
<p>Problem accessing /solr/index.html. Reason:
<pre> HTTP method POST is not supported by this URL</pre></p>
</body>
</html>
After this I extended the SolrSearchServiceImpl and changed the request method to GET but now I am getting error Expected mime type application/octet-stream but got text/html. and in response I get an html response with no detailed reason.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html ng-app="solrAdminApp">
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<head>
<title>Solr Admin</title>
<link rel="icon" type="image/x-icon" href="img/favicon.ico?_=6.2.1">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/common.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/analysis.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/cloud.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/cores.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/collections.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/dashboard.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/dataimport.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/files.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/index.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/styles/java-properties.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/logging.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/menu.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/plugins.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/documents.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/query.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/stream.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/replication.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/schema.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/segments.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/threads.css?_=6.2.1">
<link rel="stylesheet" type="text/css" href="css/angular/chosen.css?_=6.2.1">
<meta http-equiv="x-ua-compatible" content="IE=9">
<script src="libs/jquery-2.1.3.min.js"></script>
<script src="libs/chosen.jquery.js"></script>
<script src="libs/jquery.jstree.js"></script>
<script src="libs/angular.js"></script>
<script src="libs/angular-chosen.js"></script>
<script src="libs/angular-resource.min.js"></script>
<script src="libs/angular-route.min.js"></script>
<script src="libs/angular-cookies.min.js"></script>
<script src="libs/ngtimeago.js"></script>
<script src="libs/highlight.js"></script>
<script src="libs/d3.js"></script>
<script src="js/angular/app.js"></script>
<script src="js/angular/services.js"></script>
<script src="js/angular/controllers/index.js"></script>
<script src="js/angular/controllers/logging.js"></script>
<script src="js/angular/controllers/cloud.js"></script>
<script src="js/angular/controllers/collections.js"></script>
<script src="js/angular/controllers/cores.js"></script>
<script src="js/angular/controllers/threads.js"></script>
<script src="js/angular/controllers/java-properties.js"></script>
<script src="js/angular/controllers/core-overview.js"></script>
<script src="js/angular/controllers/collection-overview.js"></script>
<script src="js/angular/controllers/analysis.js"></script>
<script src="js/angular/controllers/dataimport.js"></script>
<script src="js/angular/controllers/documents.js"></script>
<script src="js/angular/controllers/files.js"></script>
<script src="js/angular/controllers/query.js"></script>
<script src="js/angular/controllers/stream.js"></script>
<script src="js/angular/controllers/plugins.js"></script>
<script src="js/angular/controllers/replication.js"></script>
<script src="js/angular/controllers/schema.js"></script>
<script src="js/angular/controllers/segments.js"></script>
</head>
<body ng-controller="MainController">
<div id="wrapper" scrollable-when-small>
<div id="header">
<span>Apache SOLR</span>
<p id="environment"> </p>
</div>
<div id="main" class="clearfix">
<div class="header-message" id="init-failures" ng-show="showInitFailures">
<h2>SolrCore Initialization Failures</h2>
<ul>
<li ng-repeat="(core,error) in initFailures"><strong>{{core}}:</strong> {{error}}</li>
</ul>
<p>Please check your logs for more information</p>
</div>
<div id="loading" class="loader universal-loader" loading-status-message> </div>
<div id="connection-box" connection-message>
<div id="connection-status-modal">
</div>
<div class="connection-status header-message">
<h2>Connection to Solr lost</h2>
<p>Please check the Solr instance.</p>
</div>
<div class="connection-status header-message" id="connection-status-recovered" ng-show="connectionRecovered">
<h2>Connection recovered...</h2>
<p>Continuing to load data...</p>
</div>
</div>
<div id="http-exception" class="header-message" ng-repeat="(url, exception) in exceptions">
<div class="exception">{{exception.msg}}</div>
</div>
<div class="other-ui-link">
Use <a class="ul" href="/solr/old.html">original UI</a><a target="_blank" href="http://wiki.apache.org/solr/AngularUI"> <span class="help"></span></a>
</div>
<div id="content-wrapper">
<div ng-view id="content">
</div>
</div>
<div id="menu-wrapper">
<div>
<ul id="menu">
<li id="index" class="global" ng-class="{active:page=='index'}"><p>Dashboard</p></li>
<li id="logging" class="global" ng-class="{active:page=='logging'}"><p>Logging</p>
<ul ng-show="showingLogging">
<li class="level" ng-class="{active:page=='logging-levels'}">Level</li>
</ul>
</li>
<li id="cloud" class="global optional" ng-show="isCloudEnabled" ng-class="{active:showingCloud}"><p>Cloud</p>
<ul ng-show="showingCloud">
<li class="tree" ng-class="{active:page=='cloud-tree'}">Tree</li>
<li class="graph" ng-class="{active:page=='cloud-graph'}">Graph</li>
<li class="rgraph" ng-class="{active:page=='cloud-rgraph'}">Graph (Radial)</li>
<li class="dump" ng-class="{active:page=='cloud-dump'}"><a ng-click="dumpCloud()">Dump</a></li>
</ul>
</li>
<li ng-show="isCloudEnabled" id="collections" class="global" ng-class="{active:page=='collections'}"><p>Collections</p></li>
<li ng-hide="isCloudEnabled" id="cores" class="global" ng-class="{active:page=='cores'}"><p>Core Admin</p></li>
<li id="java-properties" class="global" ng-class="{active:page=='java-props'}"><p>Java Properties</li>
<li id="threads" class="global" ng-class="{active:page=='threads'}"><p>Thread Dump</p></li>
</ul>
<div id="collection-selector" ng-show="isCloudEnabled">
<div id="has-collections" ng-show="collections.length!=0">
<select data-placeholder="Collection Selector"
ng-model="currentCollection"
chosen
ng-change="showCollection(currentCollection)"
ng-options="collection.name for collection in collections"></select>
</div>
<p id="has-no-collections" ng-show="collections.length==0"><a href="#/~collections">
No collections available
<span>Go and create one</span>
</a></p>
</div>
<div id="collection-menu" class="sub-menu" ng-show="currentCollection">
<ul>
<li class="overview" ng-class="{active:page=='collection-overview'}"><span>Overview</span></li>
<li class="analysis" ng-class="{active:page=='analysis'}"><span>Analysis</span></li>
<li class="dataimport" ng-class="{active:page=='dataimport'}"><span>Dataimport</span></li>
<li class="documents" ng-class="{active:page=='documents'}"><span>Documents</span></li>
<li class="files" ng-class="{active:page=='files'}"><span>Files</span></li>
<li class="query" ng-class="{active:page=='query'}"><span>Query</span></li>
<li class="stream" ng-class="{active:page=='stream'}"><span>Stream</span></li>
<li class="schema" ng-class="{active:page=='schema'}"><span>Schema</span></li>
</ul>
</div>
<div id="core-selector">
<div id="has-cores" ng-show="cores.length!=0">
<select data-placeholder="Core Selector"
ng-model="currentCore"
chosen
ng-change="showCore(currentCore)"
ng-options="core.name for core in cores"></select>
</div>
<p id="has-no-cores" ng-show="cores.length==0"><a href="#/~cores">
No cores available
<span>Go and create one</span>
</a></p>
</div>
<div id="core-menu" class="sub-menu" ng-show="currentCore">
<ul>
<li class="overview" ng-class="{active:page=='overview'}"><span>Overview</span></li>
<li ng-hide="isCloudEnabled" class="analysis" ng-class="{active:page=='analysis'}"><span>Analysis</span></li>
<li ng-hide="isCloudEnabled" class="dataimport" ng-class="{active:page=='dataimport'}"><span>Dataimport</span></li>
<li ng-hide="isCloudEnabled" class="documents" ng-class="{active:page=='documents'}"><span>Documents</span></li>
<li ng-hide="isCloudEnabled" class="files" ng-class="{active:page=='files'}"><span>Files</span></li>
<li class="ping" ng-class="{active:page=='ping'}"><a ng-click="ping()"><span>Ping</span><small class="qtime" ng-show="showPing"> (<span>{{pingMS}}ms</span>)</small></a></li>
<li class="plugins" ng-class="{active:page=='plugins'}"><span>Plugins / Stats</span></li>
<li ng-hide="isCloudEnabled" class="query" ng-class="{active:page=='query'}"><span>Query</span></li>
<li ng-hide="isCloudEnabled" class="replication" ng-class="{active:page=='replication'}"><span>Replication</span></li>
<li ng-hide="isCloudEnabled" class="schema" ng-class="{active:page=='schema'}"><span>Schema</span></li>
<li class="segments" ng-class="{active:page=='segments'}"><span>Segments info</span></li>
</ul>
</div>
</div>
</div>
<div id="meta">
<ul>
<li class="documentation"><span>Documentation</span></li>
<li class="issues"><span>Issue Tracker</span></li>
<li class="irc"><span>IRC Channel</span></li>
<li class="mailinglist"><span>Community forum</span></li>
<li class="wiki-query-syntax"><span>Solr Query Syntax</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
My SOLR version is 6.2.1 and Broadleaf version is 5.2.1
This is something that has to do with the indexing phase in Solr. I bet that if you have a look at Solr logs you will find some error (e.g. missing required field, multiple values for a non multivalued field) Andrea P.S. I don't know Broadleaf commerce but, the URL you should configure in the admin panel shouldn't have the # symbol, this is only valid in the admin console, which is implemented using AngularJS (that's the reason why the URL looks like that)
Wow slider with react.js is not working
I have created a page with fullpage.js and in one of the sections I've integrated wow slider. Same thing is working perfectly in html page but not when integrated in react.js. Getting following error.
Uncaught TypeError: Cannot read property 'replace' of undefined
at N
Script for wow slider
function ws_glass_parallax(d,l,m){var f=jQuery;var i=f(this);var j=d.parallax||0.25;var k=f("<div>").css({position:"absolute",display:"none",top:0,left:0,width:"100%",height:"100%",overflow:"hidden"}).addClass("ws_effect ws_glass_parallax").appendTo(m);var h=!d.noCanvas&&!window.opera&&!!document.createElement("canvas").getContext;if(h){try{document.createElement("canvas").getContext("2d").getImageData(0,0,1,1)}catch(q){h=0}}function t(e){return Math.round(e*1000)/1000}var u=f("<div>").css({position:"absolute",left:0,top:0,overflow:"hidden",width:"100%",height:"100%",transform:"translate3d(0,0,0)",zIndex:1}).appendTo(k);var s=u.clone().appendTo(k);var r=u.clone().css({width:"20%"}).appendTo(k);var c;var p=u.clone().appendTo(k).css({zIndex:0});this.go=function(C,A,x){var e=f(l.get(A));e={position:"absolute",width:e.width(),height:e.height(),marginTop:e.css("marginTop"),marginLeft:e.css("marginLeft")};x=x?1:-1;var E=f(l.get(A)).clone().css(e).appendTo(u);var z=f(l.get(C)).clone().css(e).appendTo(s);var v=f(l.get(C)).clone().css(e).appendTo(r);if(x==-1){r.css({left:"auto",right:0});v.css({left:"auto",right:0})}else{r.css({left:0,right:"auto"});v.css({left:0,right:"auto"})}var D=(m.width()||d.width)*1.3;var B=m.height()||d.height;var y;if(h){if(!c){c=f("<canvas>").css({position:"absolute",left:0,top:0}).attr({width:e.width,height:e.height}).appendTo(p)}c.css(e).attr({width:e.width,height:e.height});y=o(f(l.get(C)),e,10,c.get(0))}if(!h||!y){h=0}wowAnimate(function(G){G=f.easing.swing(G);var L=t(x*G*D),F=t(x*(-D+G*D-(1-G)*D*0.2)),J=t(x*(-D*1.4+G*(D*1.4+D/1.3))),w=t(-x*D*j*G),H=t(x*D*j*(1-G)),I=t(-x*D*(j+0.2)*G),K=t(x*(-D*0.2+G*D*0.4));if(d.support.transform){u.css("transform","translate3d("+L+"px,0,0)");E.css("transform","translate3d("+w+"px,0,0)");s.css("transform","translate3d("+F+"px,0,0)");z.css("transform","translate3d("+H+"px,0,0)");r.css("transform","translate3d("+J+"px,0,0)");v.css("transform","scale(1.6) translate3d("+I+"px,0,0)");p.css("transform","translate3d("+K+"px,0,0)")}else{u.css("left",L);E.css("margin-left",w);s.css("left",F);z.css("margin-left",H);r.css("left",J);v.css("margin-left",I);p.css("left",K)}},0,1,d.duration,function(){k.hide();E.remove();z.remove();v.remove();i.trigger("effectEnd")})};function o(C,A,B,v){var F=(parseInt(C.parent().css("z-index"))||0)+1;if(h){var I=v.getContext("2d");I.drawImage(C.get(0),0,0,A.width,A.height);if(!a(I,0,0,v.width,v.height,B)){return 0}return f(v)}var J=f("<div></div>").css({position:"absolute","z-index":F,left:0,top:0}).css(A).appendTo(v);var H=(Math.sqrt(5)+1)/2;var w=1-H/2;for(var z=0;w*z<B;z++){var D=Math.PI*H*z;var e=(w*z+1);var G=e*Math.cos(D);var E=e*Math.sin(D);f(document.createElement("img")).attr("src",C.attr("src")).css({opacity:1/(z/1.8+1),position:"absolute","z-index":F,left:Math.round(G)+"px",top:Math.round(E)+"px",width:"100%",height:"100%"}).appendTo(J)}return J}var g=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];var n=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function a(am,U,S,v,w,ad){if(isNaN(ad)||ad<1){return}ad|=0;var ah;try{ah=am.getImageData(U,S,v,w)}catch(al){console.log("error:unable to access image data: "+al);return false}var C=ah.data;var ab,aa,aj,ag,J,M,G,A,B,R,H,T,P,X,ac,K,F,L,N,W;var ak=ad+ad+1;var Y=v<<2;var I=v-1;var af=w-1;var E=ad+1;var ae=E*(E+1)/2;var V=new b();var Q=V;for(aj=1;aj<ak;aj++){Q=Q.next=new b();if(aj==E){var D=Q}}Q.next=V;var ai=null;var Z=null;G=M=0;var O=g[ad];var z=n[ad];for(aa=0;aa<w;aa++){X=ac=K=A=B=R=0;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}for(aj=1;aj<E;aj++){ag=M+((I<aj?I:aj)<<2);A+=(Q.r=(F=C[ag]))*(W=E-aj);B+=(Q.g=(L=C[ag+1]))*W;R+=(Q.b=(N=C[ag+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next}ai=V;Z=D;for(ab=0;ab<v;ab++){C[M]=(A*O)>>z;C[M+1]=(B*O)>>z;C[M+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(G+((ag=ab+ad+1)<I?ag:I))<<2;X+=(ai.r=C[ag]);ac+=(ai.g=C[ag+1]);K+=(ai.b=C[ag+2]);A+=X;B+=ac;R+=K;ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=4}G+=v}for(ab=0;ab<v;ab++){ac=K=X=B=R=A=0;M=ab<<2;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}J=v;for(aj=1;aj<=ad;aj++){M=(J+ab)<<2;A+=(Q.r=(F=C[M]))*(W=E-aj);B+=(Q.g=(L=C[M+1]))*W;R+=(Q.b=(N=C[M+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next;if(aj<af){J+=v}}M=ab;ai=V;Z=D;for(aa=0;aa<w;aa++){ag=M<<2;C[ag]=(A*O)>>z;C[ag+1]=(B*O)>>z;C[ag+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(ab+(((ag=aa+E)<af?ag:af)*v))<<2;A+=(X+=(ai.r=C[ag]));B+=(ac+=(ai.g=C[ag+1]));R+=(K+=(ai.b=C[ag+2]));ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=v}}am.putImageData(ah,U,S);return true}function b(){this.r=0;this.g=0;this.b=0;this.a=0;this.next=null}};
jQuery("#wowslider-container1").wowSlider({effect:"glass_parallax",prev:"",next:"",duration:20*100,delay:20*100,width:640,height:360,autoPlay:false,autoPlayVideo:false,playPause:false,stopOnHover:false,loop:false,bullets:1,caption:true,captionEffect:"traces",controls:false,controlsThumb:false,responsive:2,fullScreen:false,gestures:2,onBeforeStep:0,images:0});
Created app using create-react-app
App.js code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<ul id="menu">
<li data-menuanchor="firstPage">firstPage</li>
<li data-menuanchor="secondPage">secondPage</li>
<li data-menuanchor="3rdPage">3rdPage</li>
<li data-menuanchor="4thpage">4thpage</li>
<li data-menuanchor="5thpage">5thpage</li>
</ul>
<div id="fullpage">
<div className="section " id="section0">
<div className="intro">
<p>Your Virtual Assistant</p>
<p>Free your time for the things that matter to you.</p>
<p>be part of the first release, <br/> duw out shortly</p>
Sign up today
</div>
</div>
<div className="section" id="section1">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section2">
<div id="wowslider-container1">
<div className="ws_images"><ul>
<li><img src="images/background_1.jpg" alt="Background_1" title="Background_1" id="wows1_0"/></li>
<li><img src="images/sample_1.jpg" alt="Sample_1" title="Sample_1" id="wows1_1"/></li>
<li><img src="images/sample_2.jpg" alt="javascript carousel" title="Sample_2" id="wows1_2"/></li>
<li><img src="images/sample_3.jpg" alt="Sample_3" title="Sample_3" id="wows1_3"/></li>
</ul></div>
<div className="ws_bullets"><div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div></div><div className="ws_script" >css image gallery by WOWSlider.com v8.8m</div>
<div className="ws_shadow"></div>
</div>
</div>
<div className="section" id="section3">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section4">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
index.html page code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.min.css">
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/examples.js"></script>
<script type="text/javascript" src="js/wowslider.js"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
// anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
sectionsColor: ['#4A6FB1', '#939FAA', '#323539','#4A6FB1','#939FAA'],
// scrollOverflow: true
// sectionsColor: ['', '#939FAA', '#fff','#fff','','#fff','',''],
anchors:
['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage','6thpage','7thpage','8thpage'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000,
scrollOverflow: true,
fixedElements: '10',
// paddingTop: '3em',
lockAnchors: true,
// scrollBar:true,
onLeave: function(){
}
});
});
</script>
</body>
</html>
If you want to keep the revision as little as possible, try to prefix the window to external library (use as global variable)
jQuery("#wowslider-container1").wowSlider(...)
to
window.jQuery("#wowslider-container1").wowSlider(...)
Here is explanation on CRA doc.
The part I could not understand is that why you need the function
function ws_glass_parallax(d,l,m){...}
in your script.js.
But I cannot make sure it would work as expected cause that I think this is not the anticipated way to develop in react.
My suggestion, including the fullpage utilization you deployed in index.html should just move to componentDidMount() which could roughly seem as the same place as $(document).ready(function() {})
so the whole picture should be:
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
window.JQuery(this.refs.fullpageEle).fullpage({...});
window.JQuery(this.refs.wow).wowSlider({...});
}
render() {
return (
<div className="App">
<ul id="menu"> ... </ul>
<div id="fullpage" ref="fullpage" >
<div className="section" id="section0"> ... </div>
<div className="section" id="section1"> ... </div>
<div className="section" id="section2">
<div id="wowslider-container1" ref="wow">
</div>
</div>
<div className="section" id="section3"> ... </div>
<div className="section" id="section4"> ... </div>
</div>
</div>);
}
}
export default App;
Something may be new to you is ref which I add in your target element and we refer the element by it in componenetDidMount(), here is the description on official doc.
And leave index.html only including external source but not JS code.
Angularjs app doesn't render well on slow internet connection
I got excited over the prospects of AngularJS. So I started learning it right away. However, to my dismay, AngularJS doesn't render content well on slow internet connections as you can see from the screenshots.
My Flask App basically displays my Linux machines details. I do this by running an ajax call to the server-side code and return json which I then display to the browser using Angular.
Is this a known problem with the framework or is it the way am writing my code. I call Angularjs at the footer as rendered by many users.
Here's a skeleton structure of my html page
<!DOCTYPE html>
<html >
<head>
<title>My flask app</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-glyphicons.css') }}">
<!-- font awesome -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css') }}">
<!-- custom-->
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body ng-app="flaskApp">
<header>
<div class="container">
<h1 class="logo">Flask App</h1>
<strong><nav>
<ul class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav></strong>
</div>
</header>
<div class="container">
{% block content %}
{% endblock %}
</div>
<!-- Jquery JS-->
<script src="{{ url_for('static', filename='js/jquery-1.11.3.min.js')}}"></script>
<!-- Angular JS-->
<script src="{{ url_for('static', filename='js/angular.js')}}"></script>
<!-- Bootstrap JS -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
<!-- Custom JS -->
<!-- <script src="{{ url_for('static', filename='js/admin.js')}}"></script> -->
<script src="{{ url_for('static', filename='js/cmd.js')}}"></script>
</body>
</html>
Take a look at ngClock directive. It is used to prevent Angular from displaying uncompiled templates.
Add this to your CSS file:
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
and include de ng-cloak directive where you want. I usually put it in the body tag.
Angular working with KendoUI mobile
So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial
Leave intact specific section of page when using Angular Snap
I'm using Angular Snap module but I can't make it only use a section of my page. For example I want yo leave header and footer intact when "snaping".
The follow example code describe my issue http://plnkr.co/edit/qOilojtXpCcBm99ynuzQ?p=preview
Code
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="angular-snap.css" type="text/css" />
<script src="snap.js" type="text/javascript" charset="utf-8"></script>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js" data-semver="1.2.4"></script>
<script src="angular-snap.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<!-- Header Image should here -->
<header>
<h1>Header</h1>
</header>
<!-- Menu Bar goes here -->
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li class="active"><a class="test" href="#">This is the one</a>
<ul class="submenu">
<li>Submenu item 1
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
<!-- Both Snap-drawer and Snap-content should go below the Menu bar -->
<snap-drawer>
<button snap-toggle>Another Toggle Button</button>
</snap-drawer>
<snap-content snap-options="{tapToClose:false}">
<button snap-toggle>Toggle</button>
</snap-content>
</body>
</html>
Thanks
Plugin creator gives me answer for this on https://github.com/jtrussell/angular-snap.js/issues/75 I copy answer here for Archive purpose: It's doable, here's an example with a fixed footer from a previous thread, Snap still applies to the whole page we're just showing content over it: http://plnkr.co/edit/Vdz0AZ3tnlfErERmjcrY?p=preview You can change it to a fixed header by updating the nav element like so: <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:red"> <div class="container"> Bottom container stuff! </div> </nav> Just fair warning there are some issues with using fixed position elements, just something to keep in mind. The snap-content directive should expand to fill it's container, so you may also be able to get something working by wrapping that element in a non-static positioned element. Here's a rough demo.