I am trying to translate a FullCalendar using the language file included in the package. To make it simpler with angular, I use the plugin ui-calendar.
To do so, I imported the language script as described in the doc :
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
... //other includes generated by bower
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/fullcalendar/dist/fullcalendar.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- FullCalendar language pack -->
<script src="bower_components/fullcalendar/dist/lang/fr-ca.js"></script>
However, the months and the days are not being translated. I did managed to translate the labels manually using the "monthNames", "dayNames", etc configs, but IMO that's ugly and it doesn't translate the ui.bootstrap.datepicker.
From what I understand, the problem is momentjs who wont take anything I give him. I tried to do a 'moment.lang('fr-ca')' but it doesn't do much. Anyone know a "Mickey Mouse trick" that could help to fix this issue?
Note: ui-calendar uses the v 1.6 of fullcalendar which doesn't include the languages utilities. So I added fullcalendar#2.1.0 to my bower.json. Everything seams to be working properly, I don't see where this could mess up the language since I'm calling fullcalendar directly.
Here is a working plunkr: http://plnkr.co/edit/AFpj79M1C6vOewSWLX8J
You also need to localise angular, you can read the doc here: https://docs.angularjs.org/guide/i18n
To make it work I added the code of i18n/angular-locale_fr-ca.js in the plunkr file ng-fr-ca.js.
Looking at the source of ui-calendar (line 179), you will see it uses anggular $locale service to translate days, month, etc. I have added a console.log to the source so you can see the difference between
var dtf = $locale.DATETIME_FORMATS;
console.log(dtf);
$locale uses engglish by default. If you load one of the i18n locale file, you will have it translated.
Related
I'm trying to implement Angular UI Bootstrap Iconpicker in my project but it doesn't work because I'm using those js files for angularjs tabs:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.0.js"></script>
and for ui-iconpicker I use those files:
<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>
I think there is a confusion between the two files (ui-bootstrap-tpls) but when I remove one of them the associated component don't work!! any help please
This problem is known to the author of ui-iconpicker.
See ui-iconpicker Issue #4: Doesn't work with ui-bootstrap >= 0.11.0
#justin-lau justin-lau added the wontfix label on Jan 29, 2015
#rapheki commented on May 20:
i had a similar issue, you need to modifiy the ui-iconpicker.js file and replace in line 156 (the templates/iconpicker.html):
"dropdown>" to "uib-dropdown>"
"dropdown-toggle>" to "uib-dropdown-toggle>"
I have included these in my index.html because bower is including them:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
Why is the ui-bootstrap.js not included? Because the bower.json from bootstrap and its main property has set "ui-bootstrap-tpls.js" but what about the ui-bootstrap.js?
Even when I include the file outside of the bower:js tags the popover from the datepicker is not visible and I get NO errors in my google chrome.
But when I click on the datepicker button no popover...
UPDATE
Now that I corrected my angularjs modules, now I use just this: 'ui.bootstrap.datepicker'
I get now these errors in google chrome:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:9000/template/datepicker/datepicker.html
Error: [$compile:tpload] Failed to load template: template/datepicker/datepicker.html
When I look at the source ui-bootstrap-tpls.js file:
.directive( 'datepicker', function () {
return {
restrict: 'EA',
replace: true,
templateUrl: 'template/datepicker/datepicker.html',
scope: {
datepickerMode: '=?',
dateDisabled: '&'
},
Where are these above path template... ? I have them not here. I just installed the angular-bootstrap bower package. Should there not all be included?
UPDATE2
I get these angularjs error now:
See the parent is null and therefore the parent.InsertBefore can not work and throws the exception...
Official Doc
ui-bootstrap-tpls.js library contains the directives and the directive templates.
ui-bootstrap.js is just the directives and you are expected to supply the directive templates.
Most folks use the predefined directive templates (ui-bootstrap-tpls.js). You do not want to include both and that may be why the popover/datepicker is not working. You would essentially have 2 directives working to show/hide the popover/datepicker. Also, do not load the bootstrap.js library as that will cause the same problems.
UPDATE:
In regards to the template not found error, the datepicker directive is looking for the template 'template/datepicker/datepicker.html' in the $templatecache. The ui-bootstrap-tpls.js injects the templates into the template cache at the very end of the js file.
In the ui-bootstrap-tpls.js file you should see several $templatecache.put lines with 'template/datepicker/datepicker.html' being one of them.
Just in case someone else is having the same issue: I was having problems with the datepicker, and the issue was that I was loading the templates before the base JS:
From:
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
To:
<script src="/Scripts/angular-ui/ui-bootstrap.min.js"></script>
<script src="/Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
I just ran into this issue also, the answers above helped me a lot!
In my instance I was using a yo-angular build, and installed ui-bootsrap with bower. The problem was multiple references to ui-bootrap and bootstrap conflicting with the tpls.js verison
Here is my solution:
Simply put within my index.html
Remove
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
Add
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
Problem:
This questions comes up as a Google result for
Error: [$compile:tpload] Failed to load template: templates/datetimepicker.html
This may not be a direct answer to your specific problem, but I wanted to leave a note for future users encountering similar problems.
The directive daleotts/angular-bootstrap-datetimepicker introduces a breaking change in v1.0.0:
must include datetimepicker.template.js in the page to load the
template.
(b520f515)
Solution:
Users of angular-bootstrap-datetimepicker can either roll back to a previous version (such as v0.40), or choose to include templates file that was previously included in the base .js file:
// Previously this was the needed file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
// Users who wish to use the default datetimepicker templates must now also include this file
<script type="text/javascript" src="node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
I have an appengine Python application. It includes the simpleauth library. I am viewing the application in Google Chrome.
After I load a page in the application, some text that looks like (for example) "#.UhJcZ2TwKa4" is appended to the end of the URL.
What is this and where does it come from?
Upon edit, maybe it's one of my javascript includes that is doing it. Here are all my javascript includes:
<script type="text/javascript" src="/static/js/tinymce/tiny_mce.js"></script>
<script type="text/javascript" src="//use.typekit.net/dvk0ttp.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
Thanks in advance,
Aaron
Looks like you're using AddThis APIs and you have enabled address bar tracking which appends those "strange" characters to the page url.
Those parameters are used to collect data if someone copies the URL somewhere else
If you don't want this feature, you can disable it, editing the javascript config variable for the APIs (See attached link for the tutorial)
data_track_addressbar = false;
Source: AddThis Support
Inserting:
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
before closing the tag cleans the URL
This is the corect resource: Removing all hashtags/anchors from your URLs
I am facing below exception in IE-8 when I am loading the angular related page. It works fine in other browsers. Any specific reason?
SCRIPT5022: Argument 'module' is not a function, got undefined
angular.js, line 975 character 5
I had this same issue (when on IE < 9) and it took me forever to track it down...
angular.module('app', ['app.directives', 'app.filters', 'app.services', ]);
Note the trailing comma after 'app.services'.
I get errors like that when I try to inline end the script tag causing IE to not load all my scripts. Check if you have end tags for all your script includes.
To illustrate:
<script src="js/services.js"></script>
<script src="js/controllers.js"/> <!-- THIS IS A PROBLEM FOR IE -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
On IE9 this will result in:
SCRIPT5022: No module: myApp.filters
angular.min.js, line 17 character 195
Not entirely the same, but I can't test it on IE8. On Chrome however, this works perfectly. The weird thing about this, is actually the thing it can't seem to find, is in the script following the one with the inline ending. I can't really explain that.
Now, when I close the script tag like this:
<script src="js/services.js"></script>
<script src="js/controllers.js"></script> <!-- THIS WORKS -->
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
<script src="js/myApp.js"></script>
It works like a charm.
To sum it up, AngularJS tries to find your module called 'module', but is not able to find it. Probably due to a script that is not loaded. Try to find a script tag which closes inline, and end it as descibed above.
Hope that helps.
Another thing that might cause this is using keywords for object properties. I had three modules with the error above:
statistic.import = !statistic.import;
default: $scope.newGrid.default
$scope.data = JSON.stringify({export: exportParams})
The offending properties being import, default and export.
I don't know if you're still walking around same problem, but i've found up a possible cause:
when you declare any angular module you must inject dependences some like this:
angular.module('MyStore', ['ng','ngRoute']);
if you need invoke that module from another place to perform any action you probably mismatch if you attempt to inject dependences again... then you must call it by its name like this:
angular.module('myStore')
otherwise you will exploit your brain looking for the solution.
I hope it helps!
Sorry for the silly question, does everyone know how to start using AngularUI? I've downloaded it from Github and read the instruction in README but still don't understand what I have to do.
Steps to integrate:
Include jQuery and jQuery-ui (best served from a CDN)
Include angular (it is the best to include if from a CDN)
Include angular-ui JS / CSS (currently only hosted in the GitHub repository in the build folder)
Include any jQuery plugins for the directives you are planning to use
Declare dependencies on the angular-ui modules (ui.directives or ui.filters depending on what you are planning to use).
Most of the outlined steps are just about including JS/CSS dependencies. The only "tricky" part is to declare dependencies on a ui.* module, you can do it like this:
var myApp = angular.module('myApp',['ui.directives']);
Once all the dependencies are included and a module configured you are ready to go. For example, using the ui-date directive is as simple as (notice the ui-date):
<input name="dateField" ng-model="date" ui-date>
Here is the complete jsFiddle showing how to use the ui-date directive: http://jsfiddle.net/r7UJ2/11/
You might also want to have a look at the sources of the http://angular-ui.github.com/ where there are live examples off all the directives.
As of 3rd of May 2013, here are the steps:
include
<script src="angular.min.js"></script>
<script src="ui-bootstrap-tpls-0.3.0.min.js"></script>
register ui
angular.module('myFancyApp', ['ui.bootstrap']);
make sure myFancyApp is the same as in your <html ng-app="myFancyApp">
Let the magic commence.
I think what is missing is plugins - you've got to add the jquery plugin scripts and css for some angular-ui directives to work. For example the codemirror directive needs:
<script src="http://codemirror.net/lib/codemirror.js" type="text/javascript"></script>
<script src="http://codemirror.net/lib/util/runmode.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" type="text/css" />
It's a surprise to me that angular-ui.github.com doesn't mention needing to include plugins.
Hi I wrote an article specifically on how to do this for for PHP syntax highlighting. The article is here: http://neverstopbuilding.net/how-to-integrate-codemirror-with-angular-ui/
The core of things is getting the configuration right:
var myApp = angular.module('myApp', ['ui']);
myApp.value('ui.config', {
codemirror: {
mode: 'text/x-php',
lineNumbers: true,
matchBrackets: true
}
});
function codeCtrl($scope) {
$scope.code = '<?php echo "Hello World"; ?>';
}
For something like the following HTML snippet:
<div ng-app="myApp">
<div ng-controller="codeCtrl">
<textarea ui-codemirror ng-model="code"></textarea>
</div>
</div>
You can see the whole jsfiddle of the set up here: http://jsfiddle.net/jrobertfox/RHLfG/2/
pkozlowski.opensource is right, there are a lot more files that you need to include than it seems from the AngularUI documentation (if you can call it documentation...)
The instructions are in the readme.md file at their official github repository
Angular UI
Alternatively, the way you can find out how to integrate is to open the angular-ui js file (example: ui-bootstrap-tpls-0.6.0.js) and in the first line, you will notice the following statement
angular.module("ui.bootstrap", [...deps...])
Based on the above code, you need to inject 'ui.bootstrap' into your module.
angular.module('myFancyApp', ['ui.bootstrap','other_deps',.....]);