How can I tell whether a (Drupal 7) web app was built using Angular by looking at the page source, and not having to ask the developers?
The best way to check is to write "angular" on browser console. If you get any object [With child objects as "bind","bootstrap","callbacks","module" etc.] then its an angular web app.
You can install a chrome or firefox extension called Wappalyzer. It tells you which site you are navigated on in your browser and the stack they use.
Find it here: https://www.wappalyzer.com
You could try: angular.version.full first. If this doesn't work, try getAllAngularRootElements()[0].attributes["ng-version"]. The reason being in Angular 1 the former will work and from angular 2 onwards the later will work.
If it's an online site you can use http://builtwith.com/ and it usually can give you a good and useful bunch of information about that site.
However if they are using angular you can take a look at their page sources to see if they are using any attributes of angular like ng-repeat for example
You can also take a look at the sources that your browser get while browsing that site to see if javascript files for angularjs are included among the sources.
Application declared using ng-app directive
very simple controller and directive
check for ng-model, ng-repeater attributes in the code. All these attibutes are written in small letters.
Also you can check by typing in the console(ctrl + shift + i) and navigate to console tab. There type in window.angular.version --> it displays the version of the site your are currently inspecting.
Try
https://builtwith.com/
This is the website that currently gives you the most detailed information about what technologies a site uses. They will let you do 5 free lookups a day.
https://wappalyzer.com/
is a good one too, and serve as a complement to builtwith. I don't think there is a limit of lookups, but the results are less detailed.
Those two used together may give you more insight.
use window.getAllAngularRootElements() in the browser console if it return some value its an angular application
For Angular, in Chrome's inspector, in the Elements tab, inside the body element is an element called app-root containing ng-version, which shows the Angular version it's using.
There is a Google Chrome extension called 'ng-detector'. It may be obtained from the Google webstore:
https://chrome.google.com/webstore/detail/ng-detector/fedicaemhcfcmelihceehhaodggfeffm
It creates a small icon next to the URL bar that indicates whether or not it thinks the page was created using Angular, although I have not thoroughly tested its validity.
Install chrome extension React-Detector, it works!
window.getAllAngularRootElements() worked for me
You can install a Chrome or Firefox extension called Augury. It tells you if app is an angular or not.
Related
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
I am creating a single page app (mobile/desktop) using AngularJS. Based on the limited knowledge I have of AngularJS, I think the routing for the apps/websites is based on urls and $location/$location.path directive is used. However, in mobile or desktop apps, there is no browser. So how does AngularJS routing work in this case if views need to be switched?
Thanks
If you are talking about an Angular application by itself, it will always need something to be interpreted by something. Angular is written in JavaScript which means it will have to be interpreted by something which understands JavaScript. I am using the word interpreted instead of compiled, because JavaScript is not a compiled language.
But then how does something that interprets JavaScript display it on my screen you ask? For this you'll need a bit of background information.
The DOM
This is where we got to the Document Object Model DOM. From W3c:
The Document Object Model is a platform- and language-neutral
interface that will allow programs and scripts to dynamically access
and update the content, structure and style of documents. The document
can be further processed and the results of that processing can be
incorporated back into the presented page. This is an overview of
DOM-related materials here at W3C and around the web.
To dumb the quote above down:
you have a document (web page) which is being displayed and the DOM allows you to change this document which is being displayed.
JavaScript Engine
The link between JavaScript and the DOM is provided by an Engine. Every browser uses a JavaScript Engine. For example Chrome uses the V8 JavaScript engine. From an introduction of V8:
JavaScript is most commonly used for client-side scripting in a
browser, being used to manipulate Document Object Model (DOM) objects
for example. The DOM is not, however, typically provided by the
JavaScript engine but instead by a browser. The same is true of
V8—Google Chrome provides the DOM. V8 does however provide all the
data types, operators, objects and functions specified in the ECMA
standard.
How does this translate to your question?
Everything that wants to display a JavaScript application, needs to have a JavaScript Engine and a DOM. This could be a browser like Chrome, but could also be any other application.
A simple explanation of what a router does, is change the DOM to display different "documents". So plainly said: any application, be it a mobile or desktop application, which has a DOM understands how to use Angular's routing system.
Outside the browser means only application you are speaking about?. angular is tied to HTML pages in general. So its a framework for managing(not exactly appropriate word) the html pages to make them into Single Page Applications so that browser does not need to reload the entire the web application on request of a single page, it helps to invoke the html pages into the main html pages, this makes the application not to reload the entire, but to make available requested pages. this is where the routing comes.
Angular will work just fine there. In fact there is an Ionic project that is based on top of angular. E.g. if you are using Cordova, then the app is rendered inside a browser (or at least with the browser engine). So as far as I know it will behave exactly the same way with the exception of user not being able to type in URL or click back/forward.
Moreover I build an application for browser where I do not user URL as much as possible. E.g. I transition only between states and don't have direct url's in my application at all. Of course I need to support to the extent that a user can type in the url, but the ui-router does that on it's own if you map routes properly. But it seems much more beneficial not to rely on the urls at all for SPA (for internal stuff as you still have the edit url as I said before).
Starting with a website build with AngularJS as frontend and a ReST API set as backend. I would like to append an online help content.
Does exist a project or a framework to do that quickly (using angularjs powerfull) ?
I have no special mandatory requirements. I think that two concept could be important:
help section representation as a tree,
quick link between webapplication and online help.
JHipser may be the one you need.
I finally decided to build it without additional framework:
a flat json file that describe the structure and contents of my online help,
a controller with $http.get(...) embedded to get back the content
a dedicated help page : I re-use the bootstrap help menu and I use the ng-repeat directive to show the active content.
(Anyway Thanks #Shaojiang Cai for your suggest).
i would like to use Behat for testing my angular.js application. But the problem i'm experiencing is that when you go to a route and want to click on a link Behat doesn't know when the template is rendered, so sometimes it clicks while the content isn't available. Anyone that has experience with testing an angular.js application using Behat?
Or does anyone know how you can check in javascript if the template of the current route is done rendering? And how to check if angular.js is done bootstrapping the application on page load?
I know angular.js has ngScenario, but i want to use Behat because:
The Gherkin language which is human readable
Our backend is written in Symfony, so we can use the same framework for testing both
kind regards,
Daan
The mink api has a method wait which allows you to pause the execution of your PHP contexts until your javascript application has finished processing 'something'. There's a simple example in the docs: http://mink.behat.org/#basic-browser-interaction
$session->wait(5000,
"$('.suggestions-results').children().length > 0"
);
In the example provided, the PHP context will be paused for up to 5 seconds until the list of suggestion results has been populated. You'll need to ascertain the equivalent javascript expression which will ascertain when your route has finished rendering.
We've had some trouble in the past using jQuery expressions and have reverted back to native browser methods such as getElementById.
You'll also need to use a mink driver capable of executing javascript. We use the ZombieDriver as it runs on the command line. There are a few alternatives which may suit you better.
http://mink.behat.org/#different-browsers-drivers
I know one can host a Jekyl based static site/blog via Github pages. Can one do the same with a static site/blog based on AngularJS?
You can but you can't use html5 mode (removes the # from urls). If you use html5 mode, you have to redirect all requests to the root url since its a single page app. Since you can't use server side code on GitHub pages, you can't do this. So, if you don't mind the # in the url, go for it. If you want to use html5 mode, you need to look for hosting elsewhere.
From the Angular docs...
"Using [html5] mode requires URL rewriting on server side, basically you have to
rewrite all your links to entry point of your application (e.g. index.html)"
EDIT:
You can make use of some clever hacks to make this work if you really want to. The hacks are outlined in detail here. In summary, you rename your index.html to 404.html and github will serve it at all routes
I would say yes considering all the angular UI github pages are in fact angular apps with demos:
http://angular-ui.github.io/
http://angular-ui.github.io/bootstrap/
etc
There is one conflict between Jekyll and Angular to be aware of.
Liquid, which is included in Jekyll also uses {{ }} for evaluating expressions. To change the expressions that angular interprets (so it doesn't conflict with Liquid) use:
var myapp;
myApp = angular.module('myApp', []);
myApp.config([
'$interpolateProvider', function($interpolateProvider) {
return $interpolateProvider.startSymbol('{(').endSymbol(')}');
}
]);
Check out this blog post
Yes, you can. I recently played around with AngularJS/Typescript and github pages and was able to deploy the site.
Since AngularJS is just javascript, you can actually use any decent webserver, e.g. github pages.
Here is the demo.
You can find source code here. This repository contains typescript source code which you have to compile in order to get the appropriate javascript file. Then you basically put this include this file into your index.html and you are done.