angular-ui-bootstrap Getting started with angular-ui-bootstrap
Remarks
This section provides an overview of what angular-ui-bootstrap is, and why a developer might want to use it.
It should also mention any large subjects within angular-ui-bootstrap, and link out to the related topics. Since the Documentation for angular-ui-bootstrap is new, you may need to create initial versions of those related topics.
Installation or Setup
The official site of angular-ui-bootstrap is here.
Follow the below instructions in order. The list of files that are to be downloaded is in this link
Include all references in this order.
- angular.js
- angular-animate.js
- ui-bootstrap-tpls-2.2.0.js (Reference to UI Bootstrap )
- angular-sanitize.js
Note:
- It is important that all of the above scripts are referenced and done so in the order shown above.
Here are a few CDN LINKS to reference these files
//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js
//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js
//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js
//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.2.0.js
Inject the dependency for ui-bootstrap into your module as
angular.module('myApp', ['ui.bootstrap']);
Your module is setup to work with angular-ui-bootstrap.
Common Errors:
-
[$injector:modulerr]
Solution:
- Ensure that script files are included
- For CDN references, you must include the // before the link which uses either http or https to include those scripts.
-
Component will not be displayed or behaviour is not as expected.
Solution:
- Ensure that the mandatory settings for the corresponding directives are available in your Controller.
