I am new in AngularJs, and I was reading this tutorial for begginers http://www.ng-newsletter.com/posts/beginner2expert-how_to_start.html .
Somewhere the author says "...When we refresh the page, Angular will bootstrap myApp.".
What exactly this means?
I know bootstrap method in statistics, I know the Bootsrap3, but I can not understand what boostarp means in this context.
Can someone explain?
Bootstrapping Angular means starting up a Angular Application. It can be automatic or you can do it manually by calling the method angular.bootstrap. From the docs:
Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is
evaluated if at that time document.readyState is set to 'complete'. At
this point Angular looks for the ng-app directive which designates
your application root. If the ng-app directive is found then Angular
will:
load the module associated with the directive.
create the application injector
compile the DOM treating the ng-app directive as the root of the compilation. This allows you to > tell it to treat only a portion of the DOM as an Angular application.
You can read more on the docs: Bootstrap
Related
I have posted the issue in the source github issues page
https://github.com/Siyfion/angular-typeahead/issues/84
but was wondering if I could find a quicker resolution here.
I am following the loading dependencies, namely jQuery, Angular, and typeahead (bundle), by placing them ahead in my index.html file of the angular-typeahead directive.
Yet I get an error in my Angular template when I include the directive as a class. I have wrapped the controller code in a document ready function and that did not resolve it. I am able to type $("input").typeaway in the browser console, and it is eventually defined. Adding a timeout wrapper in the typeaway source directive code didn't resolve this timing issue. Any thoughts?
Can I dynamically assign the directive using pure jQuery in my controller and have the scope refresh? Simply adding the class "sfTypeahead" and then $scope.$apply() did nothing but add the class.
Thanks - any ideas would be MUCH appreciated.
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
I'm reading a book called Angularjs . In it this is stated "Angular traverses the template and looks for directives and bindings. This results in registration of listeners and DOM manipulation, as well as fetching initial data from the server. The end result of this work is that the app is bootstrapped and the template is converted into a view."
What is meant by "App is bootstrapped and the template is converted into a view." ?
I'm confused by what is meant by bootstrapping in this case ?
There is no main() method in AngularJS. When you create an angular application, you simply declare modules with controllers, directives, etc. When the page loads, angular looks for elements in the DOM with an attribute called 'ng-app', and if found, it boostraps, or starts if you prefer, the application.
See http://docs.angularjs.org/api/ng.directive:ngApp and http://docs.angularjs.org/guide/bootstrap
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/
I am using Angular UI Bootstrap Datepicker. I want to add behavior to this component. According to this guide, Extending Directives, I proposed some changes to this component. Changes can be view there: GitHub PR #257.
So now, I am trying to require it inside my extension but Angular keep saying he can't find datepicker controller.
I read this thread on SO AngularJS directive controllers requiring parent directive controllers? in which the answer basically shows the same and it seems working, Fiddle.
I looked at the Angular version which is 1.0.3 in the Fiddle and I am using Angular 1.1.5.
Did this change in latest Angular version or am I doing it wrong?
According to the comments, indeed, it still works with AngularJS 1.1.5. And ended finding what was messing up. As I wanted to extend the core functionalities, I wanted to edit the original template so I used the templateUrl and provided a path to a custom template, which worked when stacking the directives but the same when requiring directives mess the things up.
Do you know how I can override original template in this context?