I've developed an AngularJS SPA application, I'm seeing issues with my js files being mixed with the older versions because of cache even after the new deployment. Anyone know how to clear the cache through the angular code or some js code or through html every time the app loads for the first time, so that it won't mix both the new and old code.
I think this is typically done by having version numbers in the tags:
<script type='text/javascript' src='/jsfile.js?v=1'></script>
<link rel="stylesheet" href="/cssfile.css?v=1">
Then you just increment the versions every time you want to force an update.
Related
I want to crawl my SPA built by the Vue framework (Relatively same as React framework). However, I see that the content is not rendered while crawling. The result is:
<!doctype html>
<HTML>
<body>
<div id=app>
</div>
<script type=text/javascript src=/static/js/manifest.2ae2e69a05c33dfc65f8.js></script>
<script type=text/javascript src=/static/js/vendor.60c471696de493d48a1c.js></script>
<script type=text/javascript src=/static/js/app.335a9e9866cb7dc6a517.js></script>
</body>
</html>
Are the component-based javascript frameworks anti crawling? How can I make the component to be rendered by the crawler?
I'm using Abot framework for crawling propose
All Abot does is send a request to the target website, parse the data, and pass it back to you. As you probably know, frameworks like React or Vue are 100% JavaScript based, meaning no data will be rendered unless you run the JavaScript. So the solution here is to launch a headless browser or another DOM engine and scrape the data.
Several engines you could use are Selenium (browser automation framework available in Python and some other languages), Puppeteer (Chromium-based web-scraper in NodeJS), or a DOM engine like JSDOM.
Moral of the story is: if you want to see result rendered by JavaScript you must execute the JavaScript inside a DOM.
As we know, angular is a good MVC framework to build your application with single page, but I'm afraid that if taking too much work in one page, will it be a problem to load lots of javascript libs in index.html? some issue like loading slowly or even performance/network issue.
As my demo below, there's lots of js libs, and about the 'test/restful/restful.js', I want to load it when my router goes to restful.html, but I need to declare the controller in router, in index.html, otherwise the 'RestfulCtrl' cannot be recognized by angular lifecycle, so how to separate resources to reduce the work of index.html, or it is the common defect of single page MVC
The size of your controller is tiny compared to the size of all the libraries (jquery, angular, etc.) you're already loading. Having one HTTP request for each and every controller or service JS file is obviously not a good idea, but you should simply concatenate and minify those at build time, and have a single JS file to load that contains your whole application. So
<script src="app.js"></script>
<script src="FirstCtrl.js"></script>
<script src="SecondCtrl.js"></script>
<script src="FirstService.js"></script>
<script src="SecondService.js"></script>
should become
<script src="myCompleteApp.min.js"></script>
You can also choose to concatenate all the libraries and your own minified application into a single big file if you prefer, which would allow loading a single big JS file containing everything, in a single HTTP request.
Grunt and Gulp are the two main tools used to do that.
I have currently started trying my hand at client side development with bootstrap and angularjs. I've been given a task to make a more or less isolated feature of our website (an angularjs application) and have been working on it but noticed that the bootstrap functions I learned were not working.
Upon inspection I found that our app is using bootstrap 2.3.x and I want to use features of bootstrap 3.0
Because bootstrap has made quite a huge change in its new version, the main web app coders do not want to switch over so that is not an option. (at least not yet).
My question: is there a way I could have my isolated view use bootstrap 3 while the rest of the app uses bootstrap 2? I really don't want to take the time to learn deprecated technology so any advice would be greatly appreciated.
If you are creating an isolated feature on your site, will it be embed in one of the pages or is it a section in its own right? Your app pages can use bootstrap 3.x without it causing problems on other pages if the script links are only in the header of your app pages and not added to other pages in the site. The link will not leak bootstrap 3.x to previous code that does not have these script tags in the header. If that is the case, you can go ahead and use bootstrap 3.x and angular.js and should have no issues.
I would stick your app in a separate folder on the website and design away with the more up-to-date tools.
I'll use some buzzwords here:
Shadow DOM
Web Components
Polymer
Scoped styling is one of the many features of Shadow DOM. Styles defined inside the shadow tree don’t leak out and page styles don’t bleed in.
https://www.polymer-project.org/articles/styling-elements.html
http://plnkr.co/edit/hypZyjc4yFxIubfOn31N?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.5.2/webcomponents.min.js"></script>
<link rel="import" href="your-component.html">
</head>
<body>
<h1>Bootstrap 3.3.1</h1>
<your-component></your-component>
</body>
</html>
your-component.html
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="your-component">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<template>
<h1>Bootstrap 2.3.2</h1>
</template>
<script>
Polymer({});
</script>
</polymer-element>
I am studying AngularJS home page samples and particularly the project/Wire up a Backend one:
http://angularjs.org/#project-html
By opening the jsFiddle "Edit me" page, I noticed that the "list.html" page is inlined in the main page as follows:
<script type="text/ng-template" id="list.html">
etc...
Is this the best way to proceed or are there other alternatives?
Thanks in advance for your comments.
What you see in the main page is the usage of the <script> directive documented here: http://docs.angularjs.org/api/ng.directive:script
By using this directive you can make sure that templates (partials) for your application are loaded up-front and not on demand. This results in fewer HTTP round-trips and - generally speaking - better user experience with less "waiting" time. There are other techniques that you can use to pre-load partials, all of them described in this response: https://stackoverflow.com/a/12346901/1418796
But AngularJS is perfectly capable of downloading partials on the fly so you can remove the <script> tags, put partials on your WWW server and have AngularJS download them when needed.
So all depends on the context: during the development time you would sometimes want your partials downloaded on demand for faster turn-arounds. For production deployments you would likely want to pre-load partials as described in the mentioned SO response.
I would like to know if it is possible to nest/tunnel javascript rendered sites.
What I mean concrete:
I got a site bugs.example.org which serves a bug tracker application built on Backbone Routers, Views and Models.
over bugs.example.org/#/mybugs we can list all our bugs.
Now I have for example a second project worksuite.example.org.
This project serves roadmaps, presentations, etc. unfortunately this worksuite app doesn't serve an independent bug tracker. Instead it has a joint venture with bugs.example.org.
Now worksuite.example.org want to include/nest the bugtracker views in its own application.
This could look like:
worksuite client calls worksuite.example.org/#/bugs now the worksuite app calls a GET to bugs.example.org/#/mybugs and does a $el.html(requestedContent).
Does this work?
Another application which could work similar, which I know is the google captcha service which you nest with some js
Is there a keyword for such behavior?
Depending on how well the backbone app is architected, you can have worksuite.example.org just pull all of bugs.example.org's JS files, but use its own base html/css:
<!-- on bugs.example.org -->
<script src="mybackbonestuff.js"></script>
<link href="mycss.css"></link>
<!-- on worksuite.example.org -->
<script src="http://bugs.example.org/mybackbonestuff.js"></script>
<link href="worksuite.css"></link>