Map webjar path in html files to load dependencies - angularjs

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

Related

Runtime Error webpackJsonp is not defined Stack ReferenceError: webpackJsonp is not defined at http://localhost:8100/build/main.js:1:1

[W][webpackJsonp]
Unlikely returned an reference error "WebpackJsonp not defined" in error popup.
I found one of Stackoverflow answered to put your vendor.js before main.js but unfortunately it's not work in my case.
Breaking Changes
This means that src/index.html must be modified to include a new vendor script tag . This new script tag must be placed above the main.js script tag. For exampl
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>

include ui-bootstrap-tpls.js script

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

How to load Angular UI Bootstrap and dependencies

I'm experimenting with the Angular UI Bootstrap libraries (specifically modal) but I'm having trouble getting the right versions of each library loaded in the right order, but I keep coming up against the No module: template/accordion/accordion-group.html error. I've switched back to Bootstrap 2.3 but it's still there. My application header is below, can anyone spot any wrong versions or JS files out of order? I'm also using Angular UI Sortable, hence its inclusion.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
My app declaration looks like this:
var app = angular.module('myModule', ['ui', 'ui.bootstrap']);
Edit
I managed to get it working like this:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">
<link rel="stylesheet" href="style.css" />
</head>
and
var app = angular.module('myModule', ['ui.sortable', 'ui.bootstrap']);
did you download all the files? according to their docs
Files to download
Build files for all directives are distributed in several flavours:
minified for production usage, un-minified for development, with or
without templates. All the options are described and can be downloaded
from here. It should be noted that the -tpls files contain the
templates bundled in JavaScript, while the regular version does not
contain the bundled templates. For more information, check out the FAQ
here and the README here.
Alternativelly, if you are only interested in a subset of directives,
you can create your own build.
Whichever method you choose the good news that the overall size of a
download is very small: <76kB for all directives (~20kB with gzip
compression!)
Looks like your error is with a template not begin available or loaded. Maybe you missed the download which packaged the templates. In your case the accordian template isn't being loaded.
After reading the FAQs I'm also wondering if having both angular-ui cdns is causing your problem. The angular-ui is loading first without templates and then your loading angular-ui-bootstrap with templates.
Angular-ui-bootstrap FAQ
This project comes with several deliverables described here:
https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If
the roles of those files are not clear for you just pick
ui-bootstrap-tpls-[version].min.js, but be sure to include only one
file in your project.
You're showing this
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
Try just loading
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
More info on the builds from github
the excerpt i'm reading is
Now it should be clear that files with the -tpls in their name have
bootstrap-specific templates bundled with directives. For people who
want to take all the directives and don't need to customize anything
the solution is to grab a file named
ui-bootstrap-tpls-[version].min.js. If, on the other hand default
templates are not what you need you could take
ui-bootstrap-[version].min.js and provide your own templates, taking
the default ones
(https://github.com/angular-ui/bootstrap/tree/master/template) as a
starting point.
Did you add 'ui.router' and 'ui.sortable' as dependency in your app.js file ?
var myApp = angular.module('myApp', ['ui.router','ui.sortable']);
I would use a package manager such as Bower or WebPack to manage your client side dependencies.
According to the Angular UI docs you only need to add:
AngularJS and Bootstrap CSS. No need for jQuery.
And then you should initialize your Angular App module with ui.bootstrap dependency:
angular.module('myModule', ['ui.bootstrap']);
== UPDATE
According to this example, this should be everything you need:
index.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>
```
app.js
var myapp = angular.module('sortableApp', ['ui.sortable']);
Let me know if this helps you

ui-bootstrap dependency inside app.module is not working

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.

How to add cordova to existing angular project

I've been searching high and low and couldn't get a direct answer or getting my code to work.
I have an existing Angular project that was started via yeoman with Angular and PhoneGap setup together. My setup uses yo and bower to generate the files.
I've tried to import certain cordova plugins to test out like the camera or datepicker and see if it works on the device but it doesn't as it was always saying the calling function is undefined.
So with the current setup I call the code below in one of my submodules
navigator.camera.getPicture(onSuccess,onFail,{sourceType:1,quality:60});
This doesn't work so I tried other tutorials and also by trying ngCordova which is a wrapper class for angular. The following is how it looks like in my index.html
<!-- build:js(.) scripts/vendor.js -->
<script src="phonegap.js"></script>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/collide/collide.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/pouchdb/dist/pouchdb-nightly.js"></script>
<script src="bower_components/angular-pouchdb/angular-pouchdb.js"></script>
<script src="bower_components/proj4/dist/proj4.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
<!-- endbower -->
In the tutorials it's asking to have the ng-cordova import above this line which does not exist
<script src="cordova.js"></script>
How do I generate this cordova.js into an existing project and will it conflict with the phonegap.js file?
Just create a new project, add a platform (e.g. ios) with cordova and put the cordova.js file of it into your existing project. Phonegap supports both phonegap.js and cordova.js as stated here. You'll find the file in platforms/ios/www/cordova.js. Then, you're right, the cordova.js has to be included as the last <script> that you include.

Resources