Develop Reference

bootstrap data-target requirements/dependencies/debugging?

I'm working on an existing Bootstrap solution in my workplace. It has the following markup:
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myModal">Open Modal</button>
I'm somewhat new to Bootstrap but I did some basic googling. data-target is used to specify a child modal window to open. Markup similar to the markup above successfully opens a new modal window in a different enterprise website.
What are the requirements/dependencies for this implementation to work? For example, which supporting files are necessary? I'm assuming that should handle this this natively as opposed to requiring a jQuery click event wireup.
Can you please confirm if this is the case? I'm new to Bootstrap but this will help me focus my debugging. If the code above isn't working then what would you investigate as most likely root causes?

As mentioned in the comments jquery.js is required by bootstrap as well as a few others.
I believe this link may be helpful for your question as well:
http://getbootstrap.com/javascript/#modals-related-target

Ionic basics - which elements to use for a basic app?

The ionic documentation is very frustrating. First of all I can't install it via the method described on the site, on my Mac or PC I get a "Your version of Cordova is too old. Please reinstall." error and despite following instructions I can't fix it.
Tbh I'm not a huge fan of installing things on the command line if I can just download the files (a la jQuery mobile) and get on with it. So I got the latest Ionic beta and I've been trying to build some tests with it. The todo app on the Ionic site pretty much works (though the project list text is white when you Phonegap Build it).
Anyway, my question is this: Which elements am I supposed to use for building - the CSS ones or the JavaScript ones?
I'm hoping I'm missing something really obvious but I've used the docs here: http://ionicframework.com/docs/components/ and here: http://ionicframework.com/docs/api/
Let's take headers. The CSS page says you can build them like this:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
and the JavaScript page says like this:
<ion-header-bar class="bar-light">
<h1 class="title">bar-light</h1>
</ion-header-bar>
Both work for me, locally at least. So which is it? The CSS elements aren't all mirrored in the Javascript page. I'm just baffled by this and I don't want to use the slower, less efficient or less flexible method.

Essentially, Ionic is both a css framework and a javascript framework.
You could theoretically use just the css class and build an app that way.
But since Ionic is built on top of angular, it allows us to create simple elements that already have those classes applied to them. So let's look at an example.
Classes
<ul class="list>
<li class="item" ng-repeat="item in items">
{{item.name}}
</li>
<ul>
Directive
<ion-list>
<ion-item ng-repeat="item in items">
{{item.name}}
</ion-item>
<ion-list>
Both of these two blocks will render the exact same thing. A element with a class of list and some items inside that with a class of item.
The difference is, if you wanted to add some functionality with the lists (reorder the items, swipe option buttons) you would want to use the directives. Because we're using directives, we can use the pre-defined functionality and not have to have a user wire that logic up themselves (like you would for a jQuery plugin).
Now this example is quite tame, but you can imagine this in the context of our Sidemenu component. While you could technically build out the sidemenu using classes, you would have to wire up the logic yourself, which is not ideal.
Hopefully this explains things a bit better.

You can have pretty good examples from website codepen.io/ionic/
Always try to use the latest versions of library (as of now it is 0.9 beta), latest version are more faster and efficient.
I have used Phonegap build, and referred only ionic library and css files, it was cool.

You can use either the JS or the CSS method. I personally prefer the CSS method.
You do not need to use the CLI to install Ionic. Simply download all of the files here on Ionic's GitHub to your project and use the references here from Ionic's guide in your index.html. Your app will be able to use all of Ionic and Angular.js!

AngularJs and jQuery UI, how to ensure no UI code in controller

I am using AngularJS as the framework for building a web app. The DI is good for unit testing and AnguarJS also has a best practice that not have DOM UI related code in controller. I am also using jQuery UI for building UI. Then I have a problem:
For example I am using jQuery UI dialog http://jqueryui.com/dialog/#modal-confirmation, so in the HTML I have the code for declaring the dialog:
<div id="dialog-confirm" title="Empty the recycle bin?">
<p>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
Then I have a button by clicking on it the dialog will pop up
<a ng-click="showDialog()>Click me</a>
Then in the controller I have the code
$scope.showDialog = function() {
$('#dialog-confirm').dialog( //DOM UI code in controller!
//...
});
}
This is the basic workflow by following jQuery UI demo code: http://jqueryui.com/dialog/#modal-confirmation and I just combined it with AngularJS. It works, but I think there is a big problem in my code: I mixed DOM UI code and logic in my controller thus it breaks the test-ability of the controller.
What should I do to use jQueryUI with AngularJS without breaking DI principle and test-ability?

That's not as easy as it may seem. Angular has so called directives that are used to encapsulate DOM code, but writing directives isn't exactly trivial - it can be tough to get it right.
Your best bet it to use angular-ui which implements similar functionality using bootstrap and pure angularjs (no jquery / jquery ui dependency). It doesn't try to replicate jQuery UI though, but bootstrap's JS functionality, so that's not a drop-in-replacement. I'd suggest you try finding a pure angularjs solution first, if possible.
If you have to use jQueryUI, you can write custom directives that delegate the actual work to jQuery UI. Here's a datepicker example, and there are more examples scattered around the net. The directive keyword will help in googling.
If you really want to delve into the depths of writing angular directives, the source code of angular-ui is very instructive, but it requires an in-depth understanding of scopes, scope inheritance, data binding and angular's compilation process.

How do I bootstrap multiple modules to display on same page with Angular.js

I have looked on the Google groups, angularjs.org as well as some serious Googling but I am not finding any clear examples or explanation for what I'm trying to do.
What I am trying to do is break my application into views using multiple modules. I know from reading online you need to manually bootstrap but I'm still not getting it write
I currently have 2 modules "thermostatApp" and "PeopleApp", and I want to attach them to their own containers shown below:
<div id="thermostatApp_container">
<div data-ng-include="'modules/thermostat/thermostat.html'"/>
</div>
<div id="peopleApp_container">
<div data-ng-include="'modules/people/people.html'"/>
</div>
what I was trying to do was to bootstrap to each container element like so:
angular.element($('#peopleApp_container')).ready(function() {
angular.bootstrap($('#peopleApp_container'), ['peopleApp']);
});
angular.element($('#thermostatApp_container')).ready(function() {
angular.bootstrap($('#thermostatApp_container'), ['thermostatApp']);
});
This isn't working for me, I know you can attach multiple modules using an array of modules but How do you specif a element to bootstrap it to? Is it possible to do what I'm describing? If not what is the best way to approach it? I do want to keep modules as separated as possible.

I feel very Silly! I did't need to attach to specific elements, I just attached to the document and passed an array of modules like so:
angular.element(document)).ready(function() {
angular.bootstrap(document, ['peopleApp','thermostatApp']);
});

Does using only plugins from twitter bootstrap make sense?

I'm not currently using twitter bootstrap, but I do like some of the components. Does it make sense to use a few plugins from that framework when I'm not using the rest of the framework? bootstrap-alert.js for example. I'm also not sure how mutually exclusive the plugins are from the rest of the framework. Would i have to load everything to use a couple, in which case it probably would make more sense to look elsewhere for nice popovers etc.

Use the customise section of the website to create a smaller version of the framework with just the components you want to use. I've used a few of their components in conjunction with ExtJS to get the look I wanted. i.e. Buttons, Badges and Alerts.
Customize Twitter Bootstrap