Sorry if this is obvious but their site lists Bootstrap css as a dependency, I have installed the angular bootstrap package with bower and used it to build a page, but it does not look as intended, it looks similar to what happens when regular bootstrap fails to load.
I can see in the package bower installed some .less files but they seem too few to cover most of the widgets angular ui bootstrap boasts, so my question is does the bootstrap css come with the angular ui bootstrap module (from bower) or must it be installed separately ?
I think the doc is clear enough :
Dependencies
This repository contains a set of native AngularJS directives based on
Bootstrap's markup and CSS. As a result no dependency on jQuery or
Bootstrap's JavaScript is required. The only required dependencies
are:
AngularJS (minimal version 1.0.8)
Bootstrap CSS (tested with version 3.0.3). This version of the library (0.10.0) works only with Bootstrap CSS in version 3.x. 0.8.0
is the last version of this library that supports Bootstrap CSS in
version 2.3.x.
cf : http://angular-ui.github.io/bootstrap/
Angular-ui-bootstrap contains mainly JS directives and templates to angularjsify it.
Note that their is also a angular-bootstrap bower package that contains html2js-ready templates.
Related
Say, I need to use Wysiwyg editor and I found a 3rd party directive for it.
It has a good readme and how to setup in my project(Local).
Demo link: Wysiwyg Editor
Considering that I have done all the npms and integrations in my local project.
How can I deploy the project with new changes?
Maybe I am asking because I don't know about gulp or bower. Does my project needs to have gulp ad bower in order to use such directives. If so, how will the deployment go post setup and integration.
Assumption : There are no gulpfile.js and bower setup already.
In Jquery using a plugin is quite simple. Add a script tag for js file of plugin and use it in html or js as instructed. Does the process has to complicated always for using a 3rd party angular directive?
No. It is not compulsory to use gulp. Gulp just runs task like adding css,js to your file , minifing it and like.
you need to add js file which contain directive code. In your case it is
this is your link of directive
Now you can save this data in one of your js file and add it in index.html
OR
you can give this online link.
Using external directive need to add js n css file.
Question is will it work? We have to see dependancies of any external module we are using so what are dependancies of this module?
enter link description here
you need to add this module also
ADVANTAGES:
Using bower: you can install module in your project. bower install will download all your dependancies also.
using gulp : Gulp task will make sure of adding your css and js files in index.html
Which BootStrap local CSS version is compatible to use with AngularJS tpls 0.14.3 version?
I am using version 3.3.5 with no issues. I've been testing with 3.3.6 and have found no problems so far.
I'm trying to use a bower library that does not have a dependency to be added to the AngularJS module.
Typically to include a bower library in angular I would bower install the library and then add that library to my app.js like so
angular.module('myModule', ['bower library']);
However I'm trying to add this bower library https://github.com/Caged/d3-tip which does not have a angular dependency to be injected. So I have nothing to inject into angular.module.
My overall question is how does one get a bower library that does not have an angular dependency to be injected into an angular app?
My overall question is how does one get a bower library that does not have an angular dependency to be injected into an angular app?
You don't. If a library is not an Angular module, it cannot be (and does not need to be) injected as a dependency into your Angular module.
The good news is that in most cases, libraries like that can be used globally out-of-the-box. In this case, it looks like that library adds functionality to D3.js. So when you use d3, just use d3.tip().
I am having some issues with the Angular filters, everyone says: is because you are not using angular 1.3.8 or above versions, I just realized my version by doing angular.version on the console and:
Object {full: "1.3.6", major: 1, minor: 3, dot: 6, codeName: "robofunky-danceblaster"} comes up, so, how do I update to 1.3.8 at least ? or update to the latest ?
Is there a way to do that, or I have to work with that version of Angular until the Ionic people updates it ?
ionic.bundle.js is a concatenation of:
ionic.js
angular.js
angular-animate.js
angular-sanitize.js
angular-ui-router.js
ionic-angular.js
If you want to use a newer AngularJS version than the one included in the bundle you can include them separately with preferred version (instead of loading ionic.bundle.js).
Do note that the AngularJS version that is included in the newest Ionic version is the version that is/was used during testing (I assume). So by manually including a newer version Ionic may break.
If you are using Bower to manage your packages you don't want to manually include a different <script> tag for angular.
If you need to override the angular version (and you are using bower) just add angular as a dependancy in your bower.json, same place ionic should be. And then specify the version number. But please note, that as tasseKATT says, it may break things in ionic if you use an angular version different to what ionic is expecting.
If you still wish to do this, you can do it in two ways. Using the bower command line tool or manually.
Bower command line:
In the root of your application you can do the following which will add the latest version of angular to your bower.json
bower install angular --save
Or manually:
"dependencies": {
"ionic": "driftyco/ionic-bower#1.2.4",
"angular": "1.5.0"
}
Of course whether via the bower command or manually, make sure the resulting version now specified in your bower.json is the one you want.
You may find you need to add a conflict resolution in bower.json to choose your version over the one ionic suggests. However, as tasseKATT says, it may break things if you use an angular version different to what ionic is expecting.
Unable to find a suitable version for angular, please choose one:
1) angular#1.4.3 which resolved to 1.4.3 and is required by ionic#1.2.4
2) angular#^1.5.0 which resolved to 1.5.0 and is required by product-picker
3) angular#>= 1.0.8 which resolved to 1.5.0 and is required by angular-ui-router#0.2.13
4) angular#^1.x which resolved to 1.5.0 and is required by angular-local-storage#0.2.5
5) angular#1.5.0 which resolved to 1.5.0 and is required by angular-mocks#1.5.0
6) angular#^1.5.0 which resolved to 1.5.0
Then you choose an option, prefix it with ! to save the resoltion to bower.json, or just add the below, and change it to the version you want:
"resolutions": {
"angular": "1.5.0"
}
So now your project will say "I need angular version X" and then Ionic says I need a different one, but you in your bower.json you specify which to override. If you want to look into this more, look at the bower.json file within bower_components/ionic/bower.json (There is also a .bower.json, not quite sure of the difference here.
Once you have done everything, so a final:
bower update
And this checks that everything is happy and installed. Any other conflicts will then come up at this point, which you can resolve using the above methods.
This is all you need to do:
ionic lib update
see documentation on Github!
Points to note in the excellent Plunker from #tasseKATT above:
the version of angular in index.html e.g. <script src="https://code.angularjs.org/1.5.0-beta.2/angular.js"></script> must precede the inclusion of ionic.bundle.js
you may need to add https://code.angularjs.org:* to your <meta http-equiv="Content-Security-Policy" ...
You can check that you've loaded the version you want in a browser console using angular.version
I am using AngularJS v1.2.0-rc.3 with a project using ng-boilerplate. I want to use Bootstrap 3 so I've changed the bower file to use the branch for version 3, but now grunt fails when running the karma tests. I've isolated the problem to module dependencies on ui.bootstrap but I can't figure out what's wrong. Any ideas?
You'll probably need to fork it for now and change the dependency on ui.bootstrap to use their BS3 branch found here: https://github.com/angular-ui/bootstrap/tree/bootstrap3_bis2
It turns out that I had to build the angular-ui-bootstrap package with grunt and change build.config.js vendor_files to use vendor/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.6.0-SNAPSHOT.min.js
If you're relatively new to ng-boilerplate and want to get jump started with angular support for boostrap3 this fork might be helpful.
https://github.com/MorrisLLC/ng-boilerplate
It uses the lastest versions of the boilerplate vendor libraries and most recent versions of the grunt tasks.
See the Quick Start for modified instructions on building angular-bootstrap. You have to build it because the current angular bootstrap branch does not include the tpls files (templates).
I ran into the same issue and already had written a lot in bootstrap 2.3.2. Instead of starting all over with someone else's git repo, you could just update several files:
build.config.js add in the vendor/bootstrap/js/.js where the file is the javascript that you are planning to use.
less/main.less which imports the bootstrap less. You could use specific less files from bootstrap or do an import of everything with:
#import '../../vendor/bootstrap/less/bootstrap.less';