I am trying to understand how AngularJS framework works. For that reason I want to debug angularjs framework code (not my application code) however I am not able to figureout how angular gets attached to DOM and starts compilation. Can anybody help me to findout which is piece of code or lines in angularjs script file from where AngularJS kicks off and starts parsing and compilation.
you need to read the application bootstrap section in the angular docs, but basically angular will take your html, starts the compilation processes, at which point it will start replacing any custom html or directives with the matching templates, no scopes or bindings done just yet, html might not even be in dom yet, afer that angular goes to linking process, where bindings are made, scopes are created and html gets attached to DOM, thats the short version you can find it here
https://docs.angularjs.org/guide/bootstrap
Related
I have started using AngularJS and recently I came across using $anchorScroll service provided by AngularJS. It works perfectly fine. However when I peered into their code I was confused to see DOM manipulation which is used to adjust scrollbar. As AngularJS always says write DOM manipulations only in directives why Core AngularJS doesn't follow this? I mean, at least in case of $anchorScroll?
I don't understand whether it's allowed to manipulate DOM in our services or not? If not why AngularJS itself takes an exception?
I'm developing a chrome extension using angularjs (with a content script open a popup),but it meet some problem when it's parent page already use angularjs, it's parent try to compile the content inserted, so is there anyway to prevent the parent angularjs instance to compile the element I added, and the angularjs instance in extension can bootstrap the element manually ?
It's hard to answer without an example, or what is your extension flow.
Basically, angular shouldn't compile anything on it's own, it either does it when bootstrapping the app, or when you explicitly tell it to.
What I guess you are doing is have the html change before angular is loaded, and then when it loads it compiles your stuff as well.
Try adding your directives etc. after angular has finished loading on the main page (how to detect that angular finished bootstrapping is a whole other question :)).
And after you add your new element with your ng-app <div ng-app="myAngularExtensionApp"></div>, however I am not sure how it will work if it's nested inside another angular application, I don't think it will allow you to do it. If the ng-app of the main application is on the body you can add your div outside the body (weird, but legit), and it shouldn't conflict. but if it's on the html it might cause problems. (I tested it, you can bootstrap another one inside an existing app, but it can cause some really weird problems, I'd avoid it).
A bullet proof solution, that makes things a little more complicated is one I used and I like it alot:
Create an iframe on the page, which you add the angularJS script inside, and it will be your application, do not set the src of the iframe, but rather use iframe.document.open() .write(
<html><body ng-app="myExtensionApp"> etc (i.e. a complete bone structure of an angular page), now since the src is the same, you won't have same origin problems, and you can access the main page with top.
I recommend having services that will interact with the main page.
I am not sure what you want to do, but if you want a directive on the main page for example, first create it in the iframe, then move it to the main page via jquery, it will belong to YOUR angular application (since scope binding is based on prototype and the chain doesn't get broken by moving the element), it will keep reacting to changes to your scope.
However you have to remember that styles are unaffected etc.
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/
Hi I'm having a strange problem. I'm not able to plunker it, so I will just try to explain and maybe someone has had the same problem or can give me a hint to where to search.
I've been setting up an angular app with some tests in webstorm. I only test services. Then, when I wanted to build the html layer on top, I can't get the html to bind with the controllers. I don't get any errors in the console, the routing works, text in the html file is displayed, and "console.logs" in the controller prints out all scope values correctly. Even custom directives work and the passing of attribute values to them.
However, all databindings in the html do not work. Wherever {{name}} and such is in the html file, nothing is displayed. The same goes for directives. Even though the "console.log(scope)" in the directive shows that the attributes have been set correctly.
Another strange thing is that I cannot write in input fields.
I really have no clue as I've checked every thing I could think of. I'm using webstorm 7.0, AngularJS v1.2.0rc1 and I'm using the "open in browser" in Webstorm.
This is working in other projects I'm making, so I'm really wondering what's going on here.
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.