Disambiguation: Angular, Bootstrap (css & js), angular.bootstrap, UI Bootstrap, and anything else I should know about Angular and Bootstrap

Question

I recently started working on an Angular project that someone else started. I'm loving it, but am massively confused about Angular's relationship to Bootstrap. Especially because it seems like all the sites about how these relate to each other assume you already understand how they relate to each other.

Here's what I think I know:

• Angular - a js framework from Google that, while difficult to set up and understand the naming rules (took me about 5 hours to figure out you can't have an underscore in a component name because it doesn't throw any errors, it just breaks your entire application), allows you to write an application in js without it turning into a quagmire of spaghetti code. After years of writing applications in jQuery, this is like Plato showing me the light.
• Bootstrap - a js framework and set of css stylesheets from Twitter that make web pages look great without any typical css stuff. Not sure what the JS files do, and I don't understand the purpose of the tpls file. Also, version 4 needs tether.io, which, ok, but why is it that when I downloaded the tether zip it came with a billion files, all dependent on each other, and then it turned out all I needed was https://www.atlasestateagents.co.uk/javascript/tether.min.js? I mean I get that tether allows tooltips to be connected to an element and compensates for things like edge of screen, but I feel like this wasn't necessary in the last version of Bootstrap I used. Is that true?
• angular.bootstrap - an angular directive that has nothing to do with Twitter's Bootstrap, but "manually starts an angular application". I don't understand why that would be necessary.
• Bootstrap UI - "Bootstrap components written in pure AngularJS by the Angular team" - https://angular-ui.github.io/bootstrap/. Does this have anything to do with Twitter's bootstrap? I know it makes a lot of tedious website commonalities easier like Accordions, Datepickers, Modals, Progress Bars (which are actually surprisingly stubborn), etc. But, I'm not sure why it's called bootstrap ui.
• angular-boostrap and angular-ui-bootstrap - Stack Overflow seems to say these are two different things. I'm not sure if this is true though.
• Angular UI - I'm not sure what the point of this is. I've looked through the site, and have even used the grid, it seems to overlap with Bootstrap UI, even though Bootstrap UI seems to be a part of it...

I get the feeling that Twitter named their framework Bootstrap more because they thought it was clever for some reason, even though it has anything to do with a literal bootstrap, or the coding metaphor, "bootstrapping". If that is true, then screw those guys. But, again, correct me if I'm wrong.

Answer 1

Angularjs is a framework that helps you build a single page application (SPA) it provides all the necessary components to be able to do so (Routing, History Management, Templates, communication with server, Caching, data binding...etc). it does not provide you with a UI controls or a responsive designs.

Bootstrap on the other hand provides you with all the classes and a set of controls to make building a responsive and rich UI easier. Angularjs does not require Bootstrap and Bootstrap does not require angular. they complete each other. but of course you can use any UI framework to build a responsive design. Note: the JS files in bootstrap are only required when you want to use the controls from bootstrap but if you are looking to just use the grid and responsive part of bootstrap, you do not need JS files.

Bootstrap UI is a collection of directives to use the bootstrap controls in angular application, because you cannot handle bootstrap controls directly in your angular because they require a page cycle to be loaded correctly but angular life cycle is different than the page life cycle. Loading an angular template with some bootstrap controls will not work because I think it requires a document ready event so that bootstrap renders its controls, that is why the team built this group of controls.

on the other hand, Angular UI is also a set of different controls that web developers may need or familiar with, built in Angularjs, again, JQuery controls will not work inside angular templates if you load them using angular routing or other methods where there is no page life cycle.