I would like to use i18n and i10n in my Angular app.
If I understood correctly I can inject a script into my index.html and the changes regarding the language will change on the fly. I tested it and it works when I added manually the script and refresh the page.
Unfortunately, I am trying to inject the script for the right language on the fly.
I created a button and I want to add Portuguese language script on the click button.
app.controller('appController', ['$scope', '$route', 'UserTopBarWidget',
function($scope, $route, UserTopBarWidgetService){
$scope.topBarWidget = UserTopBarWidget;
$scope.topBarWidget.loadTopBarWidget();
}
}]);
In this file I just load the service I created called UserTopBarWidget.
The UserTopBarWidget:
app.service('UserTopBarWidgetService', function($http){
this.loadTopBarWidget = function(){
//loading something
};
this.loadPortugueseLanguage = function(){
var locale = "pt-pt";
$.getScript("https://code.angularjs.org/1.2.16/i18n/angular-locale_" + locale + ".js");
}
});
I have a page html called index.html and inject to it my html files:
index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../common/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="../common/css/style.css" />
<title></title>
</head>
<body ng-controller="AppCtrl">
<div id="container" ng-view></div>
</body>
</html>
The injected html:
<button type="button" id="searchButton" class="btn btn-default" ng-click="topBarWidget.loadPortugueseLanguage()">Portugese</button>
<h2>{{date | date: 'fullDate' }}</h2>
<h2>{{money | currency}}</h2>
The answer I get :
Tuesday, June 10, 2014
$500.00
I would like to see it in Portuguese.
What am I doing wrong?
Question
There is no way in pure angular to dynamically change locale so far, you can only do it on bootstrap level but there is a few projects that implement this functionality. This one is particularly good IMHO
https://github.com/lgalfaso/angular-dynamic-locale
There are two possible solutions to your problem really.
One is to use angular-dynamic-locale as #maurycy already explained. It's not the cleanest solution I can think of, but it's better than nothing.
The other possible solution is to create your own using other specialized i18n library like iLib for example.
Why would you ever want to do that?
Well, built-in AngularJS i18n routines does not allow for handling other calendars, time zones and formatting percents. These are serious drawbacks. The fact, that you cannot override a Formatting Locale based on user profile (or you can, but forgot about web site caching) is another.
I recommend using custom iLib-based solution (I used to recommend Globalize but after recent changes it seems a bit useless) combined with angular-translate for User Interface translation and built-in angular-locale for handling plural forms (at the time of writing angular-translate does not handle it particularly well).
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
Full code:
Plunkr Link
I have been working on a basic AngularJS website and I recently ran into an issue which prevents me from using a jquery toggle after I navigate to a different page. I believe my issue is with the routing since the toggle works if I keep it on my index.html file as well as when I separate page one and put it into codepen. I am unable to find anything too similar around the web that could help me, which is possibly because I have been asking the question incorrectly, however at this point I think I need to ask for help. This may be just a fundamental lack of understanding of ng-route or angular controllers on my end so please bear with me if that's the case/
$(document).ready(function() {
$("#SmMagCld").click(function() {
$("#SMC").toggle(350);
});
});
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<p>PLS JUST LET ME ROUTE TO MY OTHER PAGES AND STILL MAINTAIN FUNCTIONALITY MR ANGULAR... :(</p>
<br>
:(
Page1
Page2
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "main.html"
})
.when("/page1", {
templateUrl: "page1.html"
})
.when("/page2", {
templateUrl: "page2.html"
});
});
app.controller('mainCtrl', function($scope) {
$scope.message = 'welcome hooooooooome';
});
app.controller('page1Ctrl', function($scope) {
$scope.message = 'who is on first';
});
app.controller('page1Ctrl', function($scope) {
$scope.message = 'what is on second';
});
</script>
</body>
</html>
I would also like to say that no errors appear on my localhost when I put it up nor on the plunkr when I run it.
It isn't only the toggle that stops working after routing to a different page but I believe if I can figure out why that isn't working I can apply it to the other similar issues. I created the first site I linked to try and eliminate other possible variables that are causing the issue but if you want to see some other instances of my routes not working, here is another hhttps://plnkr.co/edit/98uEPuLJl8cKGjbrTGsn?p=preview that probably is littered with other mistakes. (not enough reputation to post more than two links so I added an extra h in front of the URL)
I'm fairly new to JavaScript/html, not to mention angularJS, as such any advice about cleaning or improving the code would be much appreciated. Please let me know if any additional information is needed or if I didn't explain my problem clearly.
If it's an angular app your views should be partial (It should not have html or body tags)
Load jquery before angular.
For events you can have ng-click, ng-mouseover, ng-keypress, etc Angularjs html events. And you can write functions on them which has dom manipulation using jquery, inside that page's controller.
onclick doesn't work on images with jquery in document.ready because this event checks only dom tree ready not complete multimedia load.
You can have the onclick binding either by angularjs directives or by binding it inside controller (where it executes on complete load of template).
Here's fixed plunker link : https://plnkr.co/edit/nZJtK1z4FkSIdiQS8Rk8?p=preview
I´m new to dojo and I´m want to do the following:
Pretend you have a single page application but you have two views, which are built up totally different. One view is e.g. a startpage which would just fill the Bordercontainer-center. The second view would rather look like a standard webapp, with a header in the Bordercontainer-top, a menu in Bordercontainer-left and some content in Bordercontainer-center.
If the index.html (single page app) is now called I want the startpage to appeare first. There should be an onclick-event in it. With this event the views should change. This means the startpage disappears and the second webapp-view is shown.
What would be the best way to implement this?
I thought of using two Bordercontainers.
The first Bordercontainer would contain the startpage in the region center.
The second Bordercontainer would contain the webapp-view (top, left, center).
Would it now be possible to swap the center region from the frist Bordercontainer in a way that the startpage get´s swaped with the second Bordercontainer? Would this be a way how to solve my approach?
If yes I would need some kind of controller which would swap the view.
Could I solve this with using dojo.wire?
Or is there a straight forward approach in dojo, which I have not found yet?
If there is a small example or tutorial out there, it would be great to receive a link to it.
Thx for every hint.
You should take a look at dojox/mobile (http://dojotoolkit.org/reference-guide/1.10/dojox/mobile.html) it has support for what you are trying to do. You could also look at dojox/app (http://dojotoolkit.org/reference-guide/1.10/dojox/app.html or http://dojotoolkit.org/documentation/tutorials/1.9/dojox_app/contactsList/) to see if that gives you what you need.
I tried the following code:
require([
"dijit/form/Button"
], function() {
changeView = function(idShow, idHide) {
var showView = dojo.byId(idShow);
var showHide = dojo.byId(idHide);
if (showView.style.display == 'block') {
showView.style.display = 'none';
showHide.style.display = 'block';
} else {
showView.style.display = 'block';
showHide.style.display = 'none';
}
};
});
#view1 {
display: block;
}
#view2 {
display: none;
}
<html>
<head>
<title>Change View</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script>
</head>
<body class="tundra">
<div id="view1">
View1
<br>
<button dojoType="Button" widgetId="view1Button" onClick="changeView('view2', 'view1');">Change to View2</button>
</div>
<div id="view2">
View2
<br>
<button dojoType="Button" widgetId="view2Button" onClick="changeView('view1', 'view2');">Change to View1</button>
</div>
</body>
</html>
This lets me change the view with onclick and css and a little js.
I think this is one of the various ways you mentioned, for solving my approach. But what I think I´m missing now is to combine my function changeView with dojo - somehow.
What would be the right way to combine dojo and the function changeView now?
Would I write a dojo modul with a define and then work with it in my html and calling it with require?
Or generally.. for a dojo-beginner.
If I need javascript code for my app, is there a straight forward way to combine this with dojo?
e.g. with any kind of approuch
Look an see what dojo has to solve the approch
Write JS code, if there is no suitable dojo modul/function yet
Think about seperating the JS code it into modules
Write the modules in dojo with define
Use the modules in the app by calling them with require
Would this be a proper way for programming in dojo?
The question is more a general "howto glue JS and dojo together" to write webapps and use the advantages of dojo.
Thx in advance.
I have been trying to use grails with the jquery-ui plug-in, I have created a simple controller along with a gsp page that uses a datepicker, I have not been able to get the date picker to show a list of dates. I have read the plug in documentation + articles on forums etc. but have not found a resolution.
Plug in documentation - http://grails.org/plugin/jquery-ui
Dev environment = grails 2.2.0, JDK 7, GGTS latest version
Any pointers to getting this working would be great.
(I have tried copying/renaming files in web app/other folders but have not been successful)
Steps
1. Created a new grails project
installed the jQuery-ui plug in
Created a controller and gsp page - per the documentation
When I navigate to the page it gives me the following error
ERROR resource.ResourceMeta - Resource not found: /plugins/jquery-ui-1.8.24/jquery-ui/themes/darkness/jquery-ui-1.8.24.custom.css
| Error ERROR [/Test2].[default] - Servlet.service() for servlet [default] in context with path [/Test2] threw exception
Message: It looks like you are missing some calls to the r:layoutR
The correct solution on 23-jan-13 that worked in my environment as described in the original post is shown below, I found the code posted on the grails website does not necessarily work as is - hence this edit. (if anyone has any edits do let me know directly)
GSP Code:
<html>
<head>
<title>Simple GSP page</title>
<g:javascript library="jquery" />
<g:javascript library="jquery-ui"/>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); })
</script>
<r:layoutResources/>
</head>
<body>
<div>
<p> Between <input type="text" id="datepicker"> </p>
</div>
<r:layoutResources/>
</body>
</html>
Controller code:
def testDatePicker = {
}
Are you using the Resource framework? If yes, you should use the jquery-ui module like this:
<r:require module="jquery-ui"/>
Documentation on jquery-ui and resource framework.
Note - I incorrectly edited my original question along with providing the answer, the original question also has the solution description.
I finally was successful integrating jquery-ui and grails, faced some issue which allow the solution to runs. Steps.
Create new Grails project (my environment grails 2.2.0, JDK 7, GGTS latest version)
Install jquery-ui plug-in, edit BuildConfig add runtime ":jquery-ui:1.8.24".
Create a controller and gsp page, using grails
GSP Page content
<html>
<head>
<title>Simple GSP page</title>
<g:javascript library="jquery" />
<g:javascript library="jquery-ui"/>
<r:layoutResources/>
<script type="text/javascript">
$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: 'yy/mm/dd'}); })
</script>
</head>
<body>
<div>
<p> Between <input type="text" id="datepicker"> </p>
</div>
<r:layoutResources/>
</body>
</html>
Controller code:
def testDatePicker = {
}
4. Run the solution in grails, navigate to the date picker on your page, it should show you the sleek date picker
You need to add following line for plugin.
plugins {
runtime ":jquery:1.8.3"
compile ":jquery-ui:1.8.24"
}
And add the following line on which gsp page you use Jquery UI.
< head>
< g:javascript library="jquery" />
< r:require modules="jquery-ui"/>
< r:script>
$(document).ready(function() {
your code...
});
< /r:script>
< /head>
I realize you are coming up with a way for panels to communicate. Until that time, I was thinking I could get some basic communication going with a preference object.
But how do I find a unique ID for the dashboard where an app resides?
In case there might be a better solution than sharing info via a preference object, let me describe the specific problem we want to solve: Certain projects within our project structure represent "programs" for which we want to display a "metrics dashboard"-- that dashboard would consist of multiple apps on a shared dashboard. But programs are not at consistent levels in the rally project hierarchy, and we only have about four programs though we have many many rally projects.
Because of this, I'd like this code metrics dashboard to be one page in Rally, which can easily switch between the various programs we have. I would prefer not to use the project hierarchy to do this, because we have a lot of projects, and its time consuming and tricky to find and select the programs.
I hacked at the sample to create an example of an app that can pass events between two panels.
This is very unsupported at this time and we reserve the right to break it whenever we want without any warning.
That being said you can see the current unsupported way to get an Apps ID and if you make two copies of this App you can see in your console the results of the Apps communicating on the global Rally message bus.
You can find the gist of it here
<!DOCTYPE html>
<html>
<head>
<title>My Custom App</title>
<!--Include SDK-->
<script type="text/javascript" src="/apps/2.0p/sdk.js"></script>
<!--App code-->
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
mixins:['Rally.Messageable'],
launch: function() {
var brokenInTheFutureIdThatWillWorkForNow = Ext.Object.fromQueryString(window.location.href);
window.parent.Rally.Messages.subscribe("test",function(){console.error(brokenInTheFutureIdThatWillWorkForNow.panelOid,arguments);});
window.parent.Rally.Messages.publish("test",brokenInTheFutureIdThatWillWorkForNow.panelOid);
//Write app code here
}
});
Rally.launchApp('CustomApp', {
name: 'My Custom App'
});
});
</script>
<!--App styles-->
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body class="myApp">
</body>
</html>