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
Related
I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?
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
I'm implementing something where the view changes based on the selected value of a select dropdown. I'm doing this using ng-include="mySelectedValue", which is attached to <select ng-model="mySelectedValue" ng-options="..."></select> tags.
Just wondering what happens under the hood, because this is essentially a SPA with no routes that is being loaded inside one of my Rails apps.
When the app gets loaded, does it just load all the views in the browser somehow? I don't get how angular works so magically. Would love to know how views are popping up when there are no server calls.
I assume mySelectedValue is a src.
According to Angular Docs:
By default, the template URL is restricted to the same domain and
protocol as the application document. This is done by calling
$sce.getTrustedResourceUrl on it.
$sce.getTrustedResourceUrl is basically an ajax request to fetch the corresponding template. So your server call is here :)
After that, there goes the $compile for the template, and renders the view.
I'm trying to find the way of incorporating AngularJS into existing application. Application is modular, so every module has HTML markup and JS script files. Modules are loaded with requirejs and jQuery (for loading markup).
I would like to use AngularJS features in some of the modules, having in mind the possibility of migrating to AngularJS in future. So ideally I want something like this:
define([ 'angular' ], function (angular) {
return function (element) {
// The "element" parameter contains the reference to
// the detached DOM node that contains the markup.
// And what I think should be done is compiling
// or initializing AngularJS with the given DOM HTML fragment
// and with controller, etc.
angular.doSomething(element, ...something...);
// The application module engine will inject the returned element
// into the DOM tree.
return element;
};
});
Any ideas? Thanks!
Just following the tutorial, specifically Step 2 (http://docs.angularjs.org/tutorial/step_02) will show you how to just do a single controller on the page with some simple functionality.
You can just use this, or you can start expanding it by modularizing it as in Step 7. By creating an module you can then add directives and services and take advantage of all that Angular offers. You don't necessarily need to configure routes or anything, but by creating an app module, you can incorporate other modules or services offered throughout the web or by Angular.
AngularJS isn't designed to really run alongside other frameworks and be used for little bits and pieces. You could hack it together to do this but it'll probably become very messy. Angular is much better suited to becoming the basis of the entire app.
Something like jQuery is great for dropping into an app and adding functionality, but angular is far more complex.
If you do want angular to take control of certain parts though, take a look into the ng-controller directive and how it works. Then in your standard markup you'd just add the ng-controller attribute to any element, and then add a new angular controller to your javascript. It would then manage that DOM element.
Look into angular controllers for more info on that. But as I say, I'd suggest making the app entirely Angular rather than trying to just add angular bits to it
I need to know if AngularJS is used as js framework for the front-end, do we need Handlebars separately for template-engine? ... as in my view template-engine functionality can be accomplished using AngularJS itself !
You are right, Handlebars and Angular together would be pretty useless.
Handlebars and Angular are completely different things.
Handlebars is a template engine. You write a fancy templatey-string, give it a JSON object, and it renders out HTML from the data. There's no data-binding, no updating, it's just a once-off render.
AngularJS is an HTML compiler and databinder. Angular will look through the HTML for angular-templating tags, interpret/compile them, and update the HTML with changes to data on a given controller scope. Angular doesn't just render an HTML string once, it compiles the HTML, binds it to a scope, and updates when data on that scope changes.
Handlebars in one picture
AngularJS databinding/templating in one picture
AngularJS's HTML compiler in one article
AngularJS's whole overview/guide, so you can know how it actually works