I'm trying to implement an example of iconPicker so the files which I should import are:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min.js"></script>
I installed the component with bower
<script src="#routes.Assets.versioned("bower_components/angular/angular.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
the problem is when I try to change the cdn link to local one I can't found this bootstrap-tpls.min.js I found it in angular-bootstrap and it didn't work for me there is any difference?
Please Install angular bootstrap
bower install angular-bootstrap
Ref: angular ui bootstrap doc
Please see this line.
Note: do not install 'angular-ui-bootstrap'. A separate repository -
bootstrap-bower - hosts the compiled javascript file and bower.json In
above link.
angular-ui-bootstrap : https://github.com/angular-ui/bootstrap-bower
This repository contains required ui-bootstrap.js and ui-boostrap-tpls.js files. basically its bower repository to hold Angular UI Bootstrap.
we get this files from this command bower install ui-bootstrap
ui-bootstrap-tpls.js file contains ui-bootstrap.min.js + html templates.
angular-bootstrap : https://github.com/angular-ui/bootstrap.
This is main repository for the angular bootstrap.
Here you see this line in source <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls.js"></script> because this file contains all html + template code which used to show example of bootstrap in angular. So its reuse of ui-bootstrap-tpls.js.
I suggest please install bootstrap using bower install angular-bootstrap
and remove angular-ui-bootstrap folder.
Ref: Please see this link. It shows the difference clearly. https://stackoverflow.com/a/19820670/2681997
I hope this will clear your doubt.
Thanks
Bonus: Use this to Tool for installing bower dependencies that won't include entire repos in your project.
bower installer
Related
I am using dropwizard along with webjars to package my web dependencies. Relatively new to using dropwizard.
In my initialize() method in the Bootstrap application, I am loading my asset and web bundles as below
bootstrap.addBundle(new AssetsBundle("/webapp", "/ui", "index.html"));
bootstrap.addBundle(new WebJarBundle("org.webjars.bower", "org.webjars"));
In my index.html file I refer to my js dependencies as below
<!-- Third Party -->
<script src="/webjars/jquery/jquery.js"></script>
<script src="/webjars/angular/angular.js"></script>
<script src="/webjars/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/webjars/lodash/dist/lodash.js"></script>
<script src="/webjars/bootstrap/js/bootstrap.js"></script>
<script src="/webjars/tether/tether.js"></script>
<script src="/webjars/devextreme/js/dx.all.js"></script>
<script src="/webjars/ngstorage/ngStorage.js"></script>
<!-- App Configuration -->
<script src="ui/app/app.module.js"></script>
<script src="ui/app/app.routing.js"></script>
<script src="ui/app/app.constants.js"></script>
<script src="ui/app/app.run.js"></script>
How do I find out the exact path to provide in index.html to refer to the js files. I tried unzipping the dependency jars but could not find any information to identify the path. For example angular-ui-router is under release folder while the other js files aren't.
I have included bootstrap version 4.0.0-alpha.6-1 and that required tether which I have also include in my pom.xml . I presume I am not referring the path for tether.js correctly in index.html. I see both the dependencies available in my fat jar. What should be the correct path, may be answer to #1 will help me resolve this question.
org.webjars tether 1.4.0
org.webjars bootstrap 4.0.0-alpha.6-1
**Error**
Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
at bootstrap.js:2749
at bootstrap.js:3350
at bootstrap.js:3535
I want to use Materialize CSS library along with Ionic app. Can I use it? Will it have any performance issues?
Is there any other library so that I can give a 'Material Design' feel to my app
You can use either Materializecss or Google Material Design. Either will work fine with Ionic. Both have plenty of documentation. Assuming you're using bower -
For Google MDL
bower install material-design-lite --save
then just include the css and js in your index.html file
<link href="lib/material-design-lite/material.min.css" rel="stylesheet">
<script src="lib/material-design-lite/material.min.js"></script>
For Materializecss
bower install materialize
then include the basic files in your index.html file.
<link href="lib/materialize/dist/css/materialize.min.css" rel="stylesheet">
<script src="lib/materialize/dist/js/materialize.min.js"></script>
You may have to change the directories to the correct path of your bower installs.
Documentation on both for referring to components, css, javascript.
Google MDL = https://getmdl.io/components/index.html
Materializecss = http://materializecss.com/
Hi i would like to use angular-snap into my j-hipster project.
I've installed it with bower in my project root, then I added the module in j-hipster app.js
angular.module('smeshApp', [....., 'snap']);
then i included in my index.html
<script src="bower_components/angular-snap/angular-snap.js"></script>
<script src="bower_components/snapjs/snap.js"></script>
finally i tried to use the directive snap-drawer and snap-content
but doesn't work and also my j-hipster app doesn't work anymore.
where did I go wrong?
I am making use of yeoman angular fullstack generator
i want to install admin-lte-angular theme in my app
i have installed it using bower
but i don't know how install it in angular app
please help to install it
Add the css and the javascript libs to the index.html:
<link href="bower_components/admin-lte-angular/admin-lte-angular.css">
// angular.js must be loaded first!
<script src="bower_components/admin-lte-angular/admin-lte-angular.js"></script>
Add 'admin-lte-angular' to the module dependencies:
angular.module('dashboardApp', [ 'admin-lte-angular' ])
If you are using this https://github.com/sarahhenderson/admin-lte-angular
Note that the author stated it is a working in progress. So I don't think it is a stable code to use.
I have looked at this question on stackoverflow and followed all the answers, but still i can not get ui-bootstrap to work. I have downloaded angular-ui via bouwer and included in my index.html, after tried to inject it in app module, but then the app breaks.
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="app.js"></script>
and in app.js
angular.module("qanda",['ui-bootstrap'])
.controller('mainCtrl',['$scope','$http',function($scope,$http){
$scope.testList = [];
Github: https://github.com/khanharis87/quizz_game
You should use the angular version which goes with the bootstrap one,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
<script src="app.js"></script>
You are writing the module name wrong. It should be 'ui.bootstrap'. So the module should be like this:
angular.module('qanda', ['ui.bootstrap'])
And be sure that you include bootstrap css files, but not js files. Use angular-ui directives.
Just in case, when you are installing the bootstrap-ui from bower make sure to use --save at your main folder like so
bower install angular-bootstrap --save
if you use bower's "--save" you wouldn't need to add in the css or script tags in the header or at the end of the body yourself .. bower does it automatically (and correctly) for you.