At the Angular-UI-Bootstrap page on cdnjs, is says:
Native AngularJS (Angular) directives for Twitter's Bootstrap. Small footprint (5 kB gzipped!), no third-party JavaScript dependencies (jQuery, Bootstrap JavaScript) required!
... and has options for
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap-tpls.min.js
and
//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.6.0/ui-bootstrap.min.js
Diff'ing these shows a subtle difference, and I can't seem to find any documentation on it...
Long story short, use tpls unless you are going to create customized
templates.
It is documented here:
github.com/angular-ui/bootstrap/tree/gh-pages#build-files (linked from
the home page as well). In short the -tpls version has default Bootstrap
templates bundled. In any case you should only include one of the
listed files. - Thanks pkozlowski.opensource
So, ui-bootstrap-tpls.min.js == (ui-bootstrap.min.js + HTML templates) required by the JavaScript code. If you only included ui-bootstrap.min.js, you will also need to provide your own HTML templates.
Otherwise you will see something like:
GET http://localhost:8989/hello-world/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:7073
Error: [$compile:tpload] http://errors.angularjs.org/undefined/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
at Error (<anonymous>)
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:6:453
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:54:14
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:64:438
at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
at A (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:89:258)
at http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:90:465
at g.$eval (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:98:272)
at g.$digest (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:96:142)
at g.$apply (http://localhost:8989/hello-world/js/vendor/angular-1.2.0-rc.3/angular.min.js:99:100)
The tpls tag means that the file also contains templates.
Here is an example:
ui-bootstrap.js
angular.module("ui.bootstrap"
["ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);
angular.module('ui.bootstrap.transition'
[])
ui-bootstrap-tpls.js
angular.module("ui.bootstrap"
["ui.bootstrap.tpls"
"ui.bootstrap.transition"
"ui.bootstrap.collapse"
"ui.bootstrap.accordion"
"ui.bootstrap.alert"
"ui.bootstrap.bindHtml"
"ui.bootstrap.buttons"
"ui.bootstrap.carousel"
"ui.bootstrap.position"
"ui.bootstrap.datepicker"
"ui.bootstrap.dropdownToggle"
"ui.bootstrap.modal"
"ui.bootstrap.pagination"
"ui.bootstrap.tooltip"
"ui.bootstrap.popover"
"ui.bootstrap.progressbar"
"ui.bootstrap.rating"
"ui.bootstrap.tabs"
"ui.bootstrap.timepicker"
"ui.bootstrap.typeahead"]);
angular.module("ui.bootstrap.tpls"
["template/accordion/accordion-group.html"
"template/accordion/accordion.html"
"template/alert/alert.html"
"template/carousel/carousel.html"
"template/carousel/slide.html"
"template/datepicker/datepicker.html"
"template/datepicker/popup.html"
"template/modal/backdrop.html"
"template/modal/window.html"
"template/pagination/pager.html"
"template/pagination/pagination.html"
"template/tooltip/tooltip-html-unsafe-popup.html"
"template/tooltip/tooltip-popup.html"
"template/popover/popover.html"
"template/progressbar/bar.html"
"template/progressbar/progress.html"
"template/rating/rating.html"
"template/tabs/tab.html"
"template/tabs/tabset-titles.html"
"template/tabs/tabset.html"
"template/timepicker/timepicker.html"
"template/typeahead/typeahead-match.html"
"template/typeahead/typeahead-popup.html"]);
angular.module('ui.bootstrap.transition'
[])
For example: template/alert/alert.html
angular.module("template/alert/alert.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/alert/alert.html",
"<div class='alert' ng-class='type && \"alert-\" + type'>\n" +
" <button ng-show='closeable' type='button' class='close' ng-click='close()'>×</button>\n" +
" <div ng-transclude></div>\n" +
"</div>\n" +
"");
}]);
People have answered this question already, but I wanted to point out that starting with release 0.13.4, we've added the ability to provide your own templates on a case-by-case basis (i.e., each directive use, not application wide, though, the latter would not be hard to do).
Related
I have recently migrated the app from angular 1.7 to Angular 8. On loading the application it was unable to load the templates.
Then I used require('./tempalte-name') in the directives to load. But then it gave exception that
"Module parse failed: Unexpected token (1:0)"
I used raw-loader in this way => require('raw-loader!./template-name')
There were no errors in the console. But in the browser window, the template is being shown as [object Module].
When I replace the require('raw-loader!./template-name') with raw template e.g 'Test'. It displays correctly
Is there any way to get the template html instead of [object Module].
try this
// #ts-ignore
import * as TEMPLATE from 'raw-loader!./myComponent.html';
...
{
...
template: TEMPLATE.default
...
}
Int works fine for me (angularjs + angular9 + angular-cli)
Try downgrading #angular-devkit/build-angular to version 0.802.2.
Since 0.803.0 it shows [object Module]
Or you can try completely different approach - instead of using template: require() you can use templateUrl but then you have to copy html files to destination folder.
To do that, you have to change angular.json and set assets
{
"glob": "**/*.html",
"input": "apps/lopa/src/app-ajs",
"output": "/app-ajs"
},
And in your component use full path like this:
templateUrl: 'app-ajs/components/component-name.html'
I am in the process of migrating our .NET Framework project over to .NET Core. And where we previously relied on the BundleTable tools in .NET Framework. We are now using webpack.
I have a directive that uses a package 'angularjs-dragula'. The webpack entry definition is as follows
'bundles/grouping':
[
"./Scripts/angularjs-dragula.js",
"./App/components/grid.directive.js",
"./App/components/inline-edit.directive.js",
"./App/services/grouping.service.js",
"./App/components/grouping/grouping.directive.js"
],
I initialize the directive as follows:
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
As it is, the page never loads grouping.directive. And there are no errors. Unless i remove the dragula file in the webpack entrypoint. The directive will then load, but complain:
ReferenceError: angularDragula is not defined[Learn More]
I have tried relying on webpack to import the package, and removed it from the entry definition. I installed angularjs-dragula into my node_modules, and used
var angularDragula = require('angularjs-dragula');
(function () {
angular.module('App').requires.push(angularDragula(angular));
angular
.module('App')
.directive('appCustomGrouping', appCustomGrouping);
appCustomGrouping.$inject = ['urlService', 'groupingService', 'dragulaService' ];
function appCustomGrouping(urlService, groupingService, dragulaService) {
...
However this results in the same behavior.
The angularjs-dragula package works, since we were using it before the move to webpack. However now it seems to be silently failing, and taking the rest of the directive with it?
How can I begin to diagnose this issue?
The AngularJS wrapper for Dragula is unusual in that it places on global scope a function named angularDragula. That function registers the dragula module with AngularJS when the function is invoked with angular as an argument. It returns a string with the module name "dragula".
angularDragula(angular)
angular.module("app",["dragula"])
.run(function(dragulaService) {
console.log(dragulaService);
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angularjs-dragula/dist/angularjs-dragula.js"></script>
<body ng-app="app">
<h1>Hello AngularJS!</h1>
</body>
the page never loads grouping.directive
How can I begin to diagnose this issue?
I would use the Developer Console to insert breakpoints. Then examine variables.
The above example loads AngularJS with Dragula and successfully logs the dragularService.
I started estudr the yeoman and testing a generator equipment-app (https://github.com/michaelkrone/generator-material-app) I came across a problem. When performing APPLICATION, get umo following error in the browser console:
TypeError: cssClasses.split is not a function
at jqLiteAddClass (angular.js:2897)
at Function.$get.extend.addClass (angular.js:3538)
at angular-animate.js:119
at forEach (angular.js:336)
at $$addClass (angular-animate.js:118)
at options (angular-animate.js:132)
at close (angular-animate.js:2328)
at queueAnimation (angular-animate.js:2156)
at Object.$$AnimateQueueProvider.$get.push (angular-animate.js:2053)
at Object.$AnimateProvider.$get.leave (angular.js:5224)
I identified that the angle is coming a function in cssClasses parameter rather than a string as follows:
cssClasses = (arg1, arg2, arg3) {
2893
if (cssClasses && element.setAttribute) {
2894
var existingClasses = (' ' + (element.getAttribute('class') || '') + ' ')
I have done: npm install, install bower and gulp build but none of that helped a lot.
Anyone know anything I can do to work around this?
It is actually quite simple. There is a problem with jqlite, then we can install the full jquery in front of angularjs.
As AngularJS documentation states, if jquery is loaded before AngularJS script, jquery will be used instead of jqlite.
Since the problem is in jqlite, so if we use jquery instead of jqlite, the problem goes away.
All you need to do is:
$ bower install --save jquery
and then add the following line before angular.js script loading:
<script src="./bower_components/jquery/dist/jquery.js"></script>
And this problem should goes away.
I'm using this awesome project called bootstrap-map-js.
A simple framework for building responsive mapping apps with ArcGIS
and Bootstrap.
Since Esri ArcGIS JavaScript API states that they support IE7+ I thought the amazing bootstrap-map-js project would also be compatible with IE 7. Maybe it is and the problem is in my code...
I'm getting an Invalid Argument error with no further info on IE 11 Developer Tools console window when simulating the page on IE 7/8 document modes. IE 9 onwards works great. All other browsers work great too! :) Only finicky IE refuses to work as always...
Looks like dojo.require is barking somewhere. See this related question: Dojo nested requires on IE7 and IE8 causes Invalid Argument Exception
If I remove the reference to bootstrapmap.js and the var map = ... declaration, then the code works and I see hey Leniel! otherwise the code breaks and I see the Invalid argument. The code breaks in the call to BootstrapMap.create.
Can anyone shed some light on what's going on with finicky IE? Is there anything I can do to see more from the error? As you see in the image, there's no message, description, etc. :(
Here's the minimum code I had to assemble to get to what was causing the error:
<!-- ArcGIS JavaScript API v3.8 -->
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.8/3.8/init.js"></script>
<script type="text/javascript">
function init()
{
require([
"esri/map",
"/myproject/Scripts/bootstrapmap.js",
"esri/layers/FeatureLayer"
], function(
Map,
BootstrapMap,
FeatureLayer
)
{
// Get a reference to the ArcGIS Map class
var map = BootstrapMap.create("mapDiv", {
basemap: "oceans",
center: [-117.789, 33.543],
zoom: 12
});
alert('hey Leniel!');
});
}
dojo.addOnLoad(init);
</script>
I made some progress on this issue as you can read here.
I read Configuring Dojo with dojoConfig and then added this before ArcGIS JS API script tag:
<!-- set Dojo configuration, load Dojo -->
<script>
dojoConfig = {
has: {
"dojo-firebug": true
},
parseOnLoad: true,
async: true
};
</script>
Now I get a more descriptive error instead of only Invalid argument as before. IE Dev Tools shows this:
SCRIPT87: Invalid argument.
File: init.js, Line: 136, Column: 65
This is line 136 in init.js when I click on the link provided by IE Dev Tools:
b;b=d[b]?"cssFloat"in f.style?"cssFloat":"styleFloat":b;if(3==k)return q?g(f,e):f.style[b]=e;for(var r in b)l.set(a,r,b[r]);return l.getComputedStyle(f)};return l})},"dojo/dom-geometry":function(){define(["./sniff","./_base/window","./dom","./dom-style"],function(b,n,k,m){function l(a,b,d,c,h,f){f=f||"px";a=a.style;isNaN(b)||(a.left=b+f);isNaN(d)||(a.top=d+f);0<=c&&(a.width=c+f);0<=h&&(a.height=h+f)}function r(a){return"button"==a.tagName.toLowerCase()||"input"==a.tagName.toLowerCase()&&"button"==
Sounds like IE 7/8 is barking about some crazy CSS manipulation done by ArcGIS JS API.
Fixed it connecting the dots...
Searched for NaNpx e's value as I had never seen that before. Found this jQuery ticket.
Followed the advice given there and changed that return in line 136,
from:
return q?g(f,e):f.style[b]=e;
to:
return q?g(f,e):f.style[b]=(e=='NaNpx'?'0px':e);
Note: I'm using jQuery 1.11.0 which supports IE 7.
I am using an ng-switch in angularjs to have dynamic content in my page, dependent on the url. And I am managing my project with yeoman. Here is the code of the dynamic content generation:
html:
<div class="div-content bgcontent" id="content">
<span ng-switch on="renderPath[0]">
<div ng-switch-when="home" ng-include="'partials/home.html'"></div>
<div ng-switch-when="gallery" ng-include="'partials/gallery.html'"></div>
</span>
</div>
controller:
$scope.renderPath = $location.path().split('/');
// remove first entry because it's empty string
$scope.renderPath.shift();
This works perfectly well when running the stuff with 'yeoman server'. But if I build with 'yeoman build:minify', it doesn't work anymore afterwards. It hits an assertion:
at assertArg (http://host:8888/scripts/vendor/d10639ae.angular.js:973:11)
at Object.ngDirective.compile (http://host:8888/scripts/vendor/d10639ae.angular.js:13474:5)
at applyDirectivesToNode (http://host:8888/scripts/vendor/d10639ae.angular.js:4047:32)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3794:14)
at compileNodes (http://host:8888/scripts/vendor/d10639ae.angular.js:3799:14)
at compile (http://host:8888/scripts/vendor/d10639ae.angular.js:3739:29)
at update (http://host:8888/scripts/vendor/d10639ae.angular.js:13685:22)
at $get.Scope.$broadcast.next (http://host:8888/scripts/vendor/d10639ae.angular.js:8002:24)
at Array.forEach (native)
at forEach (http://host:8888/scripts/vendor/d10639ae.angular.js:110:11) <!-- ngSwitchWhen: home -->
Does someone know how to fix this? Or where I need to look to debug it?
If you are using dependency-injection within your scripts, make sure to use the minify-proof syntax as described here: http://docs.angularjs.org/guide/di