Can batarang debug angular inside jsp? - angularjs

I am new to angularjs and downloaded latest batarang chrome extension.
We have a jsp pages with angularjs in it. Could such application be debugged by batarang ?

Best way to know is to try ...
That being said, Batarang seems to be a client side technology, so it should not care about how your HTML was generated. I see no reason for it not to work.
Note that I have no experience with Batarang.

Related

Angular app Won't load on IE8

I'm developing an app with angular.
There is no much Javascript code, since it only make up.
It work fine in chrome/firefox/safari/ie9+
In IE8 it won't load the page, it throws several angular exceptions before the page loads.
I have read this post and tried, the errors are less, but there are some yet.
Angular does not have I8 support anymore? Is there anyway to fix that?
angular 1.3+ does not support ie8 anymore. If you want to use it on IE8, use angular 1.2 and below

How can I tell whether a web app was built using Angular (or other technologies)?

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.

Debugging techniques to troubleshoot angularjs controller not being initialised

I've run into an issue with an angular app I'm working on. I've defined a controller which adds one variable to the scope. After the page loads, I can see that the scope doesn't have the variable - when I try to inspect it in chrome dev tools, it returns an undefined. I've put a break point in the controller code which initialises the variable and I can see that it is not being hit. I've checked for javascript errors and there are none.
But now I'm stuck - I don't know how to proceed with debugging this issue. Why would a controller that has been specified on the page with an ng-controller directive not be initialised? And what techniques are available for debugging such an issue?
Update: I've already tried batarang - doesn't help. The moment I try to enable inspection in batarang, it reloads the page. I'm able to inspect the scope using techniques specified in ng-book (https://www.ng-book.com/p/Debugging-AngularJS/) but I'm still not making much headway.
Finally figured out the problem: There were 2 issues:
angular auto bootstrap - there were two nested elements in the DOM which were trying to do auto bootstrap. This is not supported according to the documentation.
the angular bootstrap was kicking in before the DOM had finished loading.
So we used requirejs' domready plugin to defer angular bootstrapping till the dom is ready.
Try the chrome extension Batarang, it extends developer tools. Its handy for debugging scopes, models & dependencies.
https://github.com/angular/angularjs-batarang/
https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk
UpDate:
Just found this, javascript stack trace Spy-js:
https://github.com/spy-js/spy-js
http://spy-js.com/

angular-ui-route with IE8

I'm trying to use angular-ui-router in my current project - and it was all fine in chrome & firefox. But when it comes to trying it out in IE8, it doesnt seem to work. I'm getting the error 'TypeError: Object doesn't support this property or methodundefined'.
I initially thought that I must have done something wrong, so I tried the sample app that is linked from the angular-ui-router page: http://angular-ui.github.io/ui-router/sample/. But this sample app doesnt seem to work either (with the same error message).
So my question is... is IE8 supported? Or do I have to use angular-router? I would really love to use ui-router (for nested partials, multiple partials per page .. ) :(
Thanks!
Regards,
Alex
Ok. Angular-ui-router doesnt seem to be supported on IE8 by default, as there's a lot of Javascript incompatibility. After including es5-shim, it all works fine.

Can I use AngularJS 'ng-view' in TideSDK 1.3.1beta?

I've got a simple TideSDK application going, using AngularJS. Works nicely.
Recently as I started adding features, I replaced my single ng-include with ng-view and Angular routing. It works great in Chrome, but errors galore in TideSDK.
Is it possible to use ng-view in an application built with TideSDK 1.3.1beta?
This is due to the age of the embedded webkit within TideSDK. TideKit is on its way to release quite soon and includes latest webkit for much greater HTML5 compliance. You will be able to migrate your existing code once it is available.

Resources